Пошаговая инструкция создания сайта на html коде / Две колонки сайта

Две колонки сайта

Две колонки своего сайта я сделала с помощью элемента <table> и его внутренних элементов <tr> и <td>, которые следуют друг за другом, вложены друг в друга и предназначены для построения таблиц.

<table><!-- Каркас таблицы --></table>

<tr><!-- Строка таблицы --></tr>

<td><!-- Ячейка таблицы --></td>

Создадим такую таблицу с именем идентификатора, например, "table", состоящую из одной строки и двух ячеек, которую расположим сразу после блока с шапкой сайта:

<table id="table"><tr>
<td><!-- Первая колонка --></td><td><!-- Вторая колонка --></td>
</tr></table>

Зададим размеры для нашей таблицы и ячеек с помощью специальных атрибутов:

width="...px" <!-- Ширина таблицы и ячеек, зададим в пикселях -->

border="..." <!-- Рамка таблицы -->

Ширина таблицы будет соответствовать ширине страницы сайта, которая составляет 960px. Это мы определили в статье "Страница сайта". При этом ширину колонок рекомендуется взять 593px и 367px соответственно. Скажу, что я никогда таких размеров не придерживалась, потому что мне всегда хотелось сделать первую колонку пошире, а вторую поуже. Но для пробного сайта возьмем эти размеры.

Вместо комментариев <!-- Первая колонка --> и <!-- Вторая колонка -->, напишем эти фразы простым текстом:

<table id="table" width="960px"border="1"><tr>
<td width="593px">Первая колонка</td><td>Вторая колонка</td>
</tr></table>

Теперь можно посмотреть, что же получилось на экране:

В первой колонке будет отображаться контент нашего сайта, то есть все его статьи. Поэтому надпись "Добро пожаловать на мой сайт!" перенесем в первую колонку. Во второй колонке будут находиться разные другие материалы, например, боковое меню, форма подписки на новости, рекламные баннеры и многое другое.

<table id="table" width="960px"border="1"><tr>
<td width="593px">Добро пожаловать на мой сайт!</td><td>Вторая колонка</td>
</tr></table>

Рамку таблицы можно убрать, если атрибуту таблицы border задать значение "0":

border="0"<!-- Убрать рамку таблицы -->

Но мне больше нравится, когда рамка все-таки есть, только она тоненькая и чуть заметная. Для этого, вернем атрибуту border значение "1" и добавим свойство стиля border-collapse, которое соединит двойную линию рамки и сделает ее одинарной:

border="1"<!-- Рамка таблицы -->

border-collapse: collapse; <!-- Одинарная линия рамки таблицы -->

<table id="table" width="960px" border="1" style="border-collapse: collapse;">

Еще одно свойство стиля border-color, которое поменяет цвет рамки:

border-color: #код цвета/название; <!-- Цвет рамки таблицы -->

Я подставлю код цвета своей рамки:

<table id="table" width="960px" border="1" style="border-collapse: collapse; border-color: #e8e3e3;">

Внешние линии рамки получаются немного темнее внутренних, но мы их потом задекорируем тенью и все будет хорошо, хотя можно этого не делать, на ваше усмотрение.



В файле index.html должна появиться вот такая запись:

Следующий шаг - Контент сайта