Основы работы с XHTML и CSS
Простая таблица
Таблица, созданная с помощью тегов таблицы XHTML, как и любое другое табличное представление, содержит строки и столбцы, их пересечением являются ячейки таблицы, в которые помещается информация. Простая таблица 3 х 3 показана на рисунке 8.1.
Рис. 8.1. Таблица 3 x 3
Строки, столбцы и ячейки таблицы определяются с помощью трех основных тегов. Тег <table> охватывает все описание таблицы; теги <tr> (table row) определяют строки таблицы; а теги <td> (table data) определяют ячейки, или столбцы, которые появляются в каждой строке. Тег <td> охватывает содержимое, которое появляется в ячейке. Эти теги показаны в их общем структурном формате на листинге 8.2.
<table> <tr> <td>содержимое ячейки</td> <td>содержимое ячейки</td> ... </tr> ... </table>
Листинг 8.2. Общий формат основных тегов таблицы (html, txt)
Для задания таблицы используется столько тегов <tr>, сколько имеется строк в таблице, и столько тегов <td>, сколько имеется ячеек (столбцов) в каждой строке. При создании таблиц надо внимательно следить за правильным расположением открывающих и закрывающих тегов. Небольшая ошибка в организации может приводить к полному разрушению таблицы. Желательно также аккуратно организовать код, чтобы структура таблицы была легко видна. Следующий код, например, используется для таблицы, показанной выше на рисунке 8.1.
<table> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.3. Код для создания таблицы 3 x 3 (html, txt)
Отметим, что теги <table>, <tr>, и <td> являются контейнерными тегами, которые требуют как открывающего, так и закрывающего тега. Тег <table> ограничивает весь код таблицы; теги <tr> ограничивают каждую строку таблицы; теги <td> ограничивают каждую ячейку строки таблицы.
Код на листинге 8.3 организован с построчной иерархией тегов, напоминающей о структуре таблицы. Такая манера кодирования полезна для визуализации таблицы, хотя теги таблицы можно кодировать в свободном стиле, как и любой другой код XHTML. Например, эту же таблицу вверху можно закодировать следующим образом:
<table> <tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr> <tr><td>Cell 3.1</td><td>Cell 3.2</td><td>Cell 3.3</td></tr> </table>
Листинг 8.4. Альтернативный код создания таблицы 3 x 3 (html, txt)
Однако, поскольку ячейки таблицы (<td>...</td>) могут содержать информацию различной длины и сложности, то лучше кодировать их на отдельных строках, как на листинге 8.3, для более точной визуализации и ввода содержимого ячеек.
