Содержание

Таблицы

Теги <table> и </table> соответственно начинают и заканчивают таблицу.

Заполнение таблицы происходит построчно. Поэтому сначала оформляется строка с помощью тегов <tr> и </tr>.

Затем в строку включается необходимое количество ячеек с помощью тегов <td> и </td>.

Располагать теги можно произвольным образом, главное - соблюдать структуру.

В приведенном ниже коде показано, как две одинаковые по структуре строки оформлены разными способами. Способ оформления кода никак не влияет на конечный вид таблицы при отображении веб-страницы.

Помним, что главное в HTML - это структура.

Формат.

<table> <tr> <td>ячейка1</td> <td>ячейка2</td> </tr> <tr> <td>ячейка3</td> <td>ячейка4</td> </tr> </table>

Атрибуты.

В каждом теге таблицы можно записать необходимые атрибуты (настройки), например, ширину, цвет фона, выравнивание и т.д.

Тег Атрибут Значение Описание

table border число в пикселях толщина линий

cellspacing число в пикселях промежуток между ячейками

cellpadding число в пикселях поля внутри ячеек

td colspan количество горизонтально объединенных ячеек

rowspan количество вертикально объединенных ячеек

все (table,
tr,
td) width число в пикселях или процентах ширина

height число в пикселях или процентах высота

bgcolor код или английское название цвета цвет фона

background путь к файлу изображения изображение фона

align left
center
right выравнивание по горизонтали

valign top
middle
bottom выравнивание по вертикали

Пример.

<table width=80% height=200 align=center border=1 cellspacing=0 cellpadding=0> <tr bgcolor=lightgreen> <td align=center valign=top>ячейка1</td> <td align=center valign=middle>ячейка2</td> </tr> <tr> <td bgcolor=pink valign=top>ячейка3</td> <td align=right valign=bottom bgcolor=lightblue>ячейка4</td> </tr> </table>

Результат.

ячейка1 ячейка2

ячейка3 ячейка4

Пример объединения ячеек по горизонтали (colspan).

Результат.

1

2 3

Пример объединения ячеек по вертикали (rowspan).

Результат.

1 2

3

Упражнение.

Создайте шаблон веб-страницы как показано на рисунке: