Основы работы с XHTML и CSS


Оформление нескольких таблиц


Так как таблицы являются одним из наиболее эффективных методов организации содержимого на странице Web, то часто на одной странице встречаются две и больше таблиц либо вложенные таблицы или несколько таблиц, содержащих различные данные. При этом часто необходимо оформить эти таблицы различным образом. Поэтому встроенная таблица стилей должна различать таблицы, чтобы каждая из них могла иметь свое собственное специальное оформление.

Вспомните из предыдущего обсуждения, что элементам страницы могут присваиваться для уникальной идентификации эначения id. Эти id нужны затем во встроенной таблице стилей для указания, какому уникальному элементу соответствует какой стиль. Эта технику можно использовать для применения различных стилей к разным таблицам на одной странице.

Две таблицы на рисунке 8.3, например, имеют различные стили границы и размеры. Первая таблица оформлена со стандартными границами; вторая таблица использует стиль outset для границ таблицы и ячеек и другую толщину границ.

Оформление нескольких таблиц на одной странице

Рис. 8.3.  Оформление нескольких таблиц на одной странице

Таблица стилей и определения этих двух таблиц показаны на листинге 8.8.

<style type="text/css"> table#Table1 {border:outset 1px} table#Table1 td {border:inset 1px}

table#Table2 {border:outset 3px} table#Table2 td {border:outset 2px} </style>

<table id="Table1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

<table id="Table2"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

Листинг 8.8. Код оформления нескольких таблиц на одной странице

Селекторы ID используются для раздельного оформления тегов <table> для двух таблиц. Контекстные селекторы применяются для оформления их тегов <td>. Таким образом можно оформить различными стилями любое число таблиц без конфликтов оформления.

Это введение в таблицы дает общий обзор таблиц и подходов на основе таблиц стилей для их оформления. Далее подробно рассмотрены различные аспекты проектирования и форматирования таблиц.




Начало  Назад  Вперед