Добавление границ, заголовков столбцов/строк и заголовка таблицы
Если вы хотите воспользоваться HTML-таблицей для отображения табличных данных (вместо применения таблицы в качестве инструмента компоновки страницы, о чем пойдет речь ниже в этой главе), вам нужно будет нарисовать границы вокруг таблицы и каждой из ее ячеек и добавить заголовок (название) таблицы, который будет резюмировать данные, содержащиеся в таблице. Более того, в большинстве своем табличные данные включают в себя строку и/или столбец заголовков, которые сообщают читателю значение элементов в отдельной строке или столбце (либо же отношения между ними). На рис. 2.6, например, показана таблица с видимыми границами, заголовками столбцов и заголовком таблицы.
Рис. 2.6. Таблица для отображения информации в табличном формате
В HTML-дескрипторе определения таблицы предусмотрен атрибут border (граница), с помощью которого можно дать Web-браузеру указание отобразить границу вокруг таблицы и вокруг каждой из ее ячеек. Кроме того, с помощью начального и конечного дескрипторов заголовка таблицы (<caption></caption>) можно задать название (или заголовок) таблицы, а с помощью начального и конечного дескрипторов заголовков столбцов/строк (<th></th>) дать Web-браузеру указание отформатировать содержимое ячейки в виде заголовка:
- border. Атрибут дескриптора <table>, сообщающий Web-браузеру число пикселей — ширину границы, которую браузер должен нарисовать вокруг таблицы и каждой ее ячейки.
- <caption></caption>. Дает Web-браузеру указание применить к тексту между начальным и конечным дескрипторами стиль заголовка (большинство браузеров используют для этого полужирный шрифт).
- <th></th>. Сообщает Web-браузеру, что текст между начальным и конечным дескрипторами должен быть отформатирован как текст заголовка (большинство браузеров используют для этого полужирный шрифт).
Дескрипторы заголовков таблиц и столбцов/строк особенно важны для незрячих, поскольку браузеры, разработанные для пользователей с ослабленным зрением, будут произносить по-иному их, чтобы провести различие между заголовками таблицы и столбцов/строк и данными таблицы. Кроме того, в дескриптор <table> можно включить атрибут summary (резюме), чтобы предоставить более подробное описание назначения таблицы для посетителей, пользующихся браузерами на основе речевого или Брайль-интерфейса.
Чтобы отобразить таблицу с границами, заголовком и заголовками столбцов вроде той, которая показана на рис. 2.6, сначала нужно изменить дескриптор таблицы <table>, включив в него атрибут border, которому присваивается ширина в пикселях границы таблицы. Например, чтобы нарисовать границы шириной 4 пикселя (как у таблицы на рис. 2.6), дескриптор <table> таблицы должен будет выглядеть следующим образом:
<table border="4">
Затем, чтобы снабдить таблицу названием (заголовком), в определение таблицы сразу же после дескриптора <table> нужно вставить начальный и конечный дескрипторы заголовка таблицы (<caption></caption>). Таким образом, первая строка кода (с одним лишь дескриптором <table>) в предыдущем примере превращается в следующие две строки кода, которые дают Web-браузеру указание нарисовать таблицу с границами шириной 4 пикселя и заголовком:
<table border="4"><сарtion>Дескрипторы и атрибуты, используемые для создания таблиц</caption>
Примите к сведению, что в новейших спецификациях языка HTML (начиная со стандарта HTML 4.01) указано, что элемент caption, если таковой присутствует, должен следовать сразу же за открывающим дескриптором <table>.
Затем, чтобы поместить вверху каждого столбца таблицы заголовок, вставьте начальные и конечные дескрипторы заголовков столбцов/строк таблицы (<th></th>) с текстом заголовков между ними после дескриптора <tr>, начинающего строку, в которой должны быть отображены заголовки. Например, чтобы добавить заголовок над каждым столбцом в таблице из двух столбцов, вам нужно будет написать следующий код:
<table border="4">
<сарtion> Дескрипторы и атрибуты, используемые для создания таблиц</caption>
<tr><th>HTML-дескриптор</th>
<th>Описание</th></tr>
Чтобы добавить вместо строки заголовков столбец заголовков, добавьте пару (начальный и конечный) дескрипторов заголовка столбца/строки (<th></th>), между которыми заключен текст заголовков, в каждую строку элементов данных, обозначенную начальным и конечным дескрипторами строки таблицы (<tr></tr>). Например, приведенный ниже HTML-код с двумя парами — начальным и конечным - дескрипторов заголовков столбцов/строк таблицы (<th></th>) после одного дескриптора <tr>, дает Web-браузеру указание создать таблицу с двумя заголовками в разных столбцах одной и той же строки:
<table border="4">
<caption>Заголовки, расположенные в строку</caption><tr><th>Заголовок 1</th>
<th>Заголовок 2 </th></tr>
<tr><td>Строка 1, элемент 1</td>
<td> Строка 1, элемент 2</td></tr>
<tr><td>Строка 2, элемент 1</td>
<td> Строка 2, элемент 2</td></tr>
</table>
И, наоборот, следующий HTML-код с одной парой начальных дескрипторов заголовка столбца/строки таблицы (<th></th>) и одного дескриптора строки <tr> дает WEB-браузеру указание создать таблицу с теми же двумя заголовками, но поместив их на разных строках таблицы:
<table border="4">
<caption>Заголовки, расположенные в столбец</caption><tr><th>Заголовок 1</th>
<td>Строка 1, элемент 1</td><td>Строка 1, элемент 2</td></tr>
<tr><th>Заголовок 2</th>
<td>Строка 2, элемент 1</td><td>Строка 2, элемент 2</td></tr>
</table>
На рис. 2.7 две таблицы, полученные из определений таблиц из двух предыдущих примеров, показаны рядом друг с другом, так что можно сравнить внешний вид таблицы с заголовками в строку с таблицей, заголовки которой расположены в столбец:
Рис. 2.7. Заголовки таблиц могут располагаться в строку (слева) или в столбец (справа)