Понимание HTML-дескрипторов, используемых для создания таблиц
HTML-таблицы, используемые для отображения содержимого на Web-странице, как и те таблицы, которые вы видите в печатных материалах (книгах, журналах, газетах и т.д.), состоят из столбцов данных, организованных в строки. Не удивительно, что основные HTML-дескрипторы, с помощью которых создаются таблицы, сообщают Web-браузеру, какую часть HTML-файла включить в таблицу, и группируют отдельные элементы данных в этой части файла в столбцы и строки:
- <table></table>. Уведомляет Web-браузер, что с текстом, заключенным между начальным и конечным дескрипторами, нужно обращаться как с таблицей.
- <tr></tr> (строка таблицы — table row). Уведомляет Web-браузер, что он должен поместить элементы данных и, возможно, заголовки между начальным и конечным дескрипторами в отдельную новую строку таблицы.
- <td></td> (данные таблицы — table data). Уведомляет Web-браузер, что HTML-дескрипторы, атрибуты и текст (если таковой имеется) между начальным и конечными дескрипторами являются содержимым (иными словами, данными), которое Web-браузер должен отобразить в столбце таблицы.
Например, чтобы Web-браузер отобразил показанную на рис. 2.4 простую таблицу, состоящую из трех столбцов и двух строк, вам потребуется написать следующий код:
<table border="1">
<tr><td>K/td>
<td>2</td><td>3</td></tr>
<tr><td>4</td>
<td>5</td><td>6</td></tr>
</table>
Рис. 2.4. Простая таблица, содержащая две строки и три колонки
Как было сказано в перечне перед HTML-кодом таблицы, начальный и конечный дескрипторы таблицы (<table></table>) в начале и конце кода сообщают Web-браузеру, что HTML- код и прочий текст между этими дескрипторами описывает таблицу. (Пока что не обращайте внимания на атрибут border; его мы рассмотрим в следующем разделе этой главы.) Каждая пара начальных и конечных дескрипторов строки (<tr></tr> ) дает Web-браузеру указание отобразить содержимое между ними в одной и той же новой (горизонтальной) строке таблицы. Тем временем каждая пара начальных и конечных дескрипторов данных таблицы (<td></td>) определяет каждую из ячеек таблицы, а заключенное между ними содержимое сообщает Web-браузеру, что именно поместить в ячейку.
Таким образом, чтобы создать показанную на рис. 2.5 таблицу с двумя столбцами и тремя строками, вам понадобятся три набора начальных и конечных дескрипторов строки таблицы (<tr></tr> ) и два набора начальных и конечных дескрипторов данных таблицы (<td></td>), как показано ниже:
<table border="1">
<tr><td>A</td>
<td>B</td></tr>
<tr><td>C</td>
<td>D</td></tr>
<tr><td>E</td>
<td>F< td>< tr
</table>
Рис. 2.5. Простая таблица, содержащая три строки и две колонки
Как и в случае с предыдущим примером, первая строка кода в данном примере содержит дескриптор <table>, который сообщает Web-браузеру, что весь последующий HTML-код, считываемый браузером до тех пор, пока не встретится дескриптор </table>, является частью определения HTML-таблицы.
Вторая строка кода выглядит так:
<tr><td>A</td>
Всякий раз, когда браузер считывает внутри определения таблицы дескриптор <tr>, он должен перейти на новую строку таблицы, тогда как дескриптор <td>, следующий за дескриптором <tr>, дает браузеру указание поместить все считанное им до дескриптора </tr> в одну ячейку таблицы. Следовательно, в данном примере первый дескриптор <td> дает Web-браузеру указание поместить "А" в первую слева ячейку в новой строке таблицы, начатой браузером после обработки дескриптора <tr>, стоящего перед дескриптором <td>.
Третья строка кода в HTML-таблице в данном примере выглядит так:
<td>B</td></tr>
Поскольку перед вторым дескриптором <td> нет дескриптора <tr>, Web-браузер помещает все, что заключено между второй парой начального и конечного дескрипторов данных таблицы (<td></td>) (в данном примере "В") во вторую (вправо) ячейку первой строки таблицы. (Если бы перед дескриптором </tr> имелась третья пара начального и конечного дескрипторов данных таблицы (<td></td>), Web-браузер поместил бы все, что находилось бы между этими дескрипторами, в третью ячейку (вправо) первой строки таблицы и т.д.) Дескриптор </tr> говорит браузеру: "Все. В текущей строке больше ячеек нет", после чего браузер ожидает увидеть либо новый дескриптор <tr>, либо дескриптор </table>. В данном примере структура <tr><td></td><td></td></tr> повторяется еще два раза (таким образом, отдавая браузеру указание создать еще две строки по две ячейки (или столбца) каждая) перед тем, как дескриптор </table> в последней строке кода просигнализирует об окончании определения HTML-таблицы.