УРОКИ HTML - языка гипертекстовой разметки Веб-страниц. Базовый курс.


Урок 5. Создание таблиц (продолжение)

Теперь объединим, где нужно, некоторые ячейки вместе (в первой строке - вторую и третью; во второй строке - все три).

Объединять ячейки можно с помощью атрибутов colspan и rowspan.

Так, colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца/ряда).

Применим новые знания к нашей странице.

В первой строке, в тег, задающий вторую ячейку вставим colspan="2", третью же ячейку (выделена красным) уберём совсем:

Листинг 5.1

……
<body>
<table WIDTH="1240" BORDER="2" BORDERCOLOR="#6600CC">
<tr>
<td> Здесь будет картинка, отражающая тему сайта </td>
<td colspan="2"> Имя сайта: ВСЁ О СОБАКАХ </td>
<td> А эту ячейку мы потом уберём </td>
</tr>
……

Вот, что получилось:

Листинг 5.2

……
<body>
<table WIDTH="1240" BORDER="2" BORDERCOLOR="#6600CC">
<tr>
<td> Здесь будет картинка, отражающая тему сайта </td>
<td colspan="2"> Имя сайта: ВСЁ О СОБАКАХ </td>
</tr>
……

Уроки html для начинающих
Рис. 9.

Теперь объединим во второй строке все три ячейки в одну. Для чего в тег, задающий первую ячейку подставим colspan="3", а ячейки, выделенные красным, уберём:

Листинг 5.3

……
<tr>
<td colspan="3"> Здесь будет рекламный баннер </td>
<td> Эту ячейку объединим с двумя другими </td>
<td> Эту ячейку тоже объединим с двумя другими </td>

</tr>
……

Получим для второй строки такой код:

Листинг 5.4

……
<tr>
<td colspan="3"> Здесь будет рекламный баннер </td>
</tr>
……

А так выглядит теперь страница:

Уроки html для начинающих
Рис. 10.

Мы выяснили, что ширина задаётся атрибутом width= , а высота - атрибутом height= . Ширину и высоту можно прописать как для всей таблицы, так и для каждой отдельной строки или ячейки.

Сейчас установим высоту для первой и второй строки и ширину для первой и третье ячеек в третье строке. Для третьей строки устанавливать высоту не будем, она будет зависеть от количества информации, которую мы потом туда поместим.

Добавьте следующие значения в код:

Листинг 5.5

……
<body>
<table WIDTH="1240" BORDER="2" BORDERCOLOR="#6600CC">
<tr height="150">
<td> Здесь будет картинка, отражающая тему сайта </td>
<td colspan="2"> Имя сайта: ВСЁ О СОБАКАХ </td>
</tr>
<tr height="40">
<td colspan="3"> Здесь будет рекламный баннер </td>
</tr>
<tr>
<td WIDTH="200"> Здесь будет панель навигации </td>
<td> Здесь разместим уникальные, качественные, содержательные статьи. </td>
<td WIDTH="200"> Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр. </td>
</tr>
</table>
</body>
</html>

Сохраните файл, обновите страницу в браузере и посмотрите, что получилось.

Теперь разберёмся с расположением текста в каждой ячейке. По умолчанию текст в ячейках таблицы выравнивается по левому краю, по середине.

Чтобы изменить положение текста, есть следующие атрибуты и их значения:

- align=left/right/justify/center - выравнивание данных в ячейке по левому краю/правому/по ширине/по центру;

- valign=top/bottom/middle - выравнивание данных в ячейке по верхнему/нижнему краю/вертикальной середине.

Зададим положение текста для каждой ячейки:

Листинг 5.6

……
<body>
<table WIDTH="1240" BORDER="2" BORDERCOLOR="#6600CC">
<tr height="150">
<td align="center"> Здесь будет картинка, отражающая тему сайта </td>
<td colspan="2" align="center"> Имя сайта: ВСЁ О СОБАКАХ </td>
</tr>
<tr height="40">
<td colspan="3" align="center"> Здесь будет рекламный баннер </td>
</tr>
<tr>
<td align="center" valign="top"> Здесь будет панель навигации </td>
<td align="justify" valign="top"> Здесь разместим уникальные, качественные, содержательные статьи. </td>
<td align="center" valign="top"> Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр. </td>
</tr>
</table>
</body>
</html>

Сохраним результат, посмотрим что получилось:

Уроки html для начинающих
Рис. 11.

Ну, и ещё один "штрих".

Обратите снимание: текст в ячейках расположен практически вплотную к линиям рамок. Особенно это заметно в нижней строке. Это не очень красиво смотрится. Для задания отступа внутри ячеек есть атрибут:

cellpadding - атрибут, задающий отступ между границами ячейки и ее содержимым.

Применим этот атрибут к нашей таблице:

Листинг 5.7

……
<table WIDTH="1240" BORDER="2" BORDERCOLOR="#6600CC" cellpadding="5">
……

 

Сохраните страницу, обновите в браузере и посмотрите результат.

Итак, мы создали структуру страницы сайта с помощью таблицы. Это так называемый табличный дизайн.

В следующем уроке научимся форматировать текст, расположенный в ячейках >>>

Важно! Web-технологии постоянно развиваются, совершенствуются. Те статьи по HTML, что выложены на нашем сайте - это необходимый минимум, который следует освоить, но информация в них несколько утарела. Со времени их написания появилась новая версия HTML - HTML5. Поэтому рекомендую скачать бесплатно видеоуроки по HTML, в которых вы найдёте много нового, соответствующего новым стандартам сайтостроения.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта