С таблицами мы сталкиваемся постоянно (например в excel). В чем особенность таблицы? Откроем программу excel и посмотрим. Каждый элемент таблицы связан с другими. Если я хочу изменить ширину этого элемента, я вынужден менять ширину связанных с ним в этом столбце других элементов. Так же и высота: если я поменяю высоту в одном элементе, она изменится в других элементах этой строки. Т.е. нельзя изменить размеры отдельно одного элемента. Данная структура в силу такой зависимости несколько сложна.

Сама таблица формируется с помощью элемента ‘table’. Это блочный элемент. Таблица формируется построчно при помощи элементов ‘tr’ (сколько будет строк в таблице, столько будет этих элементов). Внутри строк обычно лежит одинаковое количество ячеек. Ячейки талицы формиируются элементами ‘td’ и ‘th’. Количество столбцов определяет количество ячеек ‘td’. А содержание таблицы находится между тегами ячейки (внутри ячейки).

Пример простой таблицы:

<table>
<tr> <!-- Первая строка -->
<td>(1,1)</td> <!-- Первая ячейка -->
<td>(1,2)</td> <!-- Вторая ячейка -->
</tr>
<tr> <!-- Вторая строка -->
<td>(2,1)</td> <!-- Первая ячейка -->
<td>(2,2)</td> <!-- Вторая ячейка -->
</tr>
<tr> <!-- Третья строка -->
<td>(3,1)</td> <!-- Первая ячейка -->
<td>(3,2)</td> <!-- Вторая ячейка -->
</tr>
</table>

У таблицы может быть единственный элемент (может не быть вообще) ‘caption’. Это заголовок таблицы. Его нужно прописывать в коде таблицы самым первым. Заголовок можно вывести над и под таблицей (атрибут align=top | bottom).

Атрибуты элемента TABLE

• border — рамка вокруг таблицы и вокруг ячеек.
• cellspacing — пространство внутри ячеек (двигает границы ячейки).
• cellpadding — отодвигает содержимое ячейки от границ (внутренний отступ).
• width — ширина таблицы (в пикселях или процентах).
• bgcolor — фоновый цвет (bgcolor=”#ffffcc”).
• align — выравнивание таблицы: слева — центр — вправо (align=”left”| center | right”). Если выравнивать по левому или правому краю, то текст начинает обтекать эту таблицу, поэтому такое выравнивание не рекомендуется.
• background — фоновое изображение в таблице (указывается нужный файл).
• bordercolor — цвет рамки вокруг таблицы.

Атрибуты элемента TR

• bgcolor — фоновый цвет ячеек в этой строке.
• align — выравнивание текста в ячейках этой строки по горизонтали (align=”left | center | right”).
• valign — выравнивание контента ячеек данной строки по высоте: сверху, снизу, выравнивание по базовой линии, посередине(valign=”top | bottom | baseline | middle”).
• bordercolor — цвет границ данной строки.

Атрибуты элемента TD (TH)

• bgcolor — фоновый цвет ячейки.
• align — выравнивание текста в ячейке по горизонтали (align=”left | center | right”).
• valign — выравнивание контента ячейки по высоте: сверху, снизу, выравнивание по базовой линии, посередине(valign=”top | bottom | baseline | middle”).
• width — ширина ячейки в пикселях или процентах.
• background — фоновое изображение в ячейке (выбираем нужный файл).
• bordercolor — цвет границ ячейки.
• nowrap — пробельные символы внутри ячейки сокращаются, но по ним не производится автоматического переноса (при уменьшении размеров окна браузера).
• colspan — сколько столбцов охватывает ячейка.
• rowspan — сколько строк охватывает ячейка.

Вложенные таблицы

Раньше ситуация, когда одна таблица вложена в другую таблицу была общераспространенной. Сейчас для этого используют CSS (таблицы стилей). Пример вложенной таблицы:

<table border=1 cellspacing=0>
<tr>
<td>
<table border=0 cellspacing="3" width="100%">
<tr>
<td bgcolor="black"><font color="white">Ссылка1</font></td>
<td bgcolor="black"><font color="white">Ссылка2</font></td>
<td bgcolor="black"><font color="white">Ссылка3</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Содержимое ячейки</td>
</tr>
</table>

С появлением HTML 5 и развитием CSS применение вложенных таблиц совсем не целесообразно, т.к. для построения макета страницы уже появилось куча других специальных элементов.