Название таблицы и её описание

Тег < caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после < table>

< table>
< caption> Название таблицы< /caption>
< tr>
< td> ячейка< /td>
< /tr>
< /table>

Вот пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Название таблицы< /title>
< /head>
< body>
< table border=" 1" width=" 400" cellpadding=" 3" cellspacing=" 0" >
< caption> < b> Энергетическая ценность продуктов питания: < /b> < /caption>
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< tr>
< th> Хлеб ржаной< /th> < td> 4, 7< /td> < td> 0, 7< /td> < td> 49, 8< /td> < td> 214< /td>
< /tr>
< tr>
< th> Молоко< /th> < td> 2, 8< /td> < td> 3, 2< /td> < td> 4, 7< /td> < td> 58< /td>
< /tr>
< tr>
< th> Картофель< /th> < td> 2< /td> < td> 0, 1< /td> < td> 19, 7< /td> < td> 83< /td>
< /tr>
< tr>
< th> Свинина< /th> < td> 11, 4< /td> < td> 49, 3< /td> < td> 9< /td> < td> 489< /td>
< /tr>
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /table>
< /body>
< /html>

К тегу < caption> может быть применён атрибут align - выравнивание названия таблицы по горизонтали с возможными значениями left, right и center, а также атрибут valign который говорит от том где должно располагаться название сверху - top или снизу - bottom таблицы.

Однако хочу отметить, что данные атрибуты в разных браузерах ведут себя по разному, так например, запись:

< caption align=" left" > Текст< /caption>

- для браузеров IE и Opera разместит название сверху таблицы по её левому краю, а для браузера Firefox это будет значить, что название следует размещать слева от самой таблицы.

Так же название таблицы или её краткое описание можно указывать с помощью атрибута summary тега < table>

Вот так:

< table summary=" описание таблицы" >

Такое описание никак не отображается и не выводится на экран обычными браузерами, однако может быть использовано поисковыми системами, а так же речевыми браузерами.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Описание таблицы< /title>
< /head>
< body>
< table border=" 1" width=" 400" cellpadding=" 3" cellspacing=" 0" summary=" Энергетическая ценность продуктов питания" >
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< tr>
< th> Хлеб ржаной< /th> < td> 4, 7< /td> < td> 0, 7< /td> < td> 49, 8< /td> < td> 214< /td>
< /tr>
< tr>
< th> Молоко< /th> < td> 2, 8< /td> < td> 3, 2< /td> < td> 4, 7< /td> < td> 58< /td>
< /tr>
< tr>
< th> Картофель< /th> < td> 2< /td> < td> 0, 1< /td> < td> 19, 7< /td> < td> 83< /td>
< /tr>
< tr>
< th> Свинина< /th> < td> 11, 4< /td> < td> 49, 3< /td> < td> 9< /td> < td> 489< /td>
< /tr>
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /table>
< /body>
< /html>