Границы таблицы.

Ранее в главе 4 " Таблицы" мы с Вами познакомились с атрибутами border - ширина границы и bordercolor - цвет границы, но это не весь набор инструментов применимых к границам таблицы.. Есть ещё два атрибута: frame и rules о них мы и поговорим ниже.

Начнём с атрибута frame - рамка, данный атрибут применяется к тегу < table> и указывает на то, как следует отображать внешние границы таблицы, т.е. то есть вокруг самой таблицы, а не между её отдельными ячейками

Атрибут frame может принимать следующие значения:

· void - не отображать границы вокруг таблицы.

· border - отображать границы вокруг таблицы (по умолчанию).

· hsides - отображать только горизонтальные границы сверху и снизу.

· vsides - отображать только вертикальные границы слева и справа.

· above - отображать только верхнюю границу таблицы.

· below - отображать только нижнюю границу таблицы.

· lhs - отображать только левую границу.

· rhs - отображать только правую границу.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> frame< /title>
< /head>
< body>
< table border=" 8" frame=" hsides" width=" 400" cellpadding=" 3" cellspacing=" 0" >
< caption> < b> Энергетическая ценность продуктов питания: < /b> < /caption>
< thead bgcolor =" #deb887" title=" Шапка" >
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< /thead>
< tbody align=" left" bgcolor =" #faebd7" title=" Энергетическая ценность продуктов питания" >
< 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>
< /tbody>
< tfoot align=" left" bgcolor =" #f5f5dc" title=" Итого: " >
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /tfoot>
< /table>
< /body>
< /html>

А вот атрибут rules в отличие от frame наоборот указывает на то, как следует рисовать границы между ячейками таблицы.

Атрибут rules может принимать следующие значения:

· all - отображать все границы между ячейками.

· none - не отображать границы между ячейками.

· rows - отображать границы только между строками.

· cols - отображать границы только между стобцами.

· groups - отображать границы только между группами строк и группами столбцов образованными с помощью тегов: < thead>, < tbody>, < tfoot> и < colgroup>.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> rules< /title>
< /head>
< body>
< table border=" 1" rules=" groups" width=" 500" cellpadding=" 3" cellspacing=" 0" >
< caption> < b> Энергетическая ценность продуктов питания: < /b> < /caption>
< thead bgcolor =" #deb887" title=" Шапка" >
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< /thead>
< tbody align=" left" bgcolor =" #faebd7" title=" Энергетическая ценность продуктов питания" >
< 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>
< /tbody>
< tfoot align=" left" bgcolor =" #f5f5dc" title=" Итого: " >
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /tfoot>
< /table>
< /body>
< /html>

Атрибут rules напрочь игнорирует браузер Opera, но как я уже не раз намекал такие проблемы можно решить с помощью средств CSS.

Полезные советы:

· Тег < col> помимо своей прямой задачи, решает еще одну полезную штуку..
При загрузке таблицы браузеры не показывают её содержание до тех пор пока таблица полностью не загрузилась. Так вот при использовании тега < col>, браузер зная количество и будущие размеры колонок, сразу начинает показывать содержание, не дожидаясь полной загрузки.. что есть гуд! особенно при медленном соединении Интернета. Сайты свёрстанные табличным способом перестают " плясать" во время загрузки.

· По наблюдениям, на тег < th> обращают внимание поисковые системы, и слова в заголовке таблицы имеют больший " вес", в глазах поисковиков, нежели чем текст в обычных ячейках, что в свою очередь может повлиять на результаты выдачи по тому или иному поисковому запросу.

· Всё что написано в этой главе, по большей своей части, ориентированно на логику таблиц, что облегчает жизнь всем!:
- Веб-мастерам, для более простого управления таблицей через стили или скрипты.
- Браузерам, и речевым браузерам для более корректного отображения или чтения таблиц.
- Алгоритмам поисковых систем, которые стараются найти эту самую логику на той или иной странице, чтобы выдать пользователю наиболее релевантные результаты.

Так что не стоит пренебрегать тегами: < thead>, < tbody>, < tfoot>, < th>, < col>, < caption>, < colgroup> - они весьма полезны!

Глава 13