Учебник по программированию на HTML

HTML в примерах

Таблицы в HTML

Структура таблиц в HTML включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Таблица в обычном варианте представляется в естественном виде, с согласованно расположенными столбцами. Таблицы - важнейшее улучшение в HTML 3.2 по сравнению с HTML 2.0. С другой стороны конструкция таблиц HTML 3.2 является всего лишь подмножеством Табличной модели HTML 3.

В HTML табличные элементы обычно называют ячейками, чтобы избежать смешивания с табличным элементом (TABLE element), который в описании HTML соответствует всей таблице.

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

Теги, используемые для представления таблиц

Для представления таблиц используются нескольких видов тегов HTML:

теги TABLE, которые обрамляют всю табличную спецификацию
необязательный элемент CAPTION, специфицирующий заголовок (имя) таблицы
теги TR, специфицирующие строки таблицы
теги TH, специфицирующие заголовки строк и столбцов
теги TD, специфицирующие данные в таблице, т.е. содержимое табличных ячеек

Основные табличные структуры

Давайте начнем с очень простого примера. Он связан с представлением таблицы чисел 2 на 2 (единичная матрицa) без каких либо заголовков. Код HTML выглядит следующим образом:

<TABLE> 
<TR> <TD> 1 </TD> <TD> 0 </TD> </TR> 
<TR> <TD> 0 </TD> <TD> 1 </TD> </TR> 
</TABLE>

и обычно представляется броузером следующим образом:

1	0
0	1

Таким образом, теги TABLE заключают в себе табличные строки, каждая из которых обрамляется тегами TR, и табличные ячейки, обрамляемые тегами TD. Это согласуется с логической структурой таблицы, как множеством строк, состоящих из ячеек. Вы можете сократить табличную структуру, опустив конечные теги TD и TR, однако утратите до некоторой степени ясность представления:

<TABLE> 
<TR> <TD> 1 <TD> 0 
<TR> <TD> 0 <TD> 1 
</TABLE>

Более того, хотя удаление конечных тегов допустимо в HTML 3.2, отдельные броузеры (включая Netscape) не смогут без них правильно представить таблицу.

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