Основы работы с XHTML и CSS
Границы таблицы и ячеек
По умолчанию теги таблицы не создают границы вокруг таблицы или вокруг ее ячеек. Код на листингах 8.3 и 8.4 создает в действительности таблицу, показанную ниже на листинге 8.5. Данные выровнены по столбцам и строкам, однако, никакие границы не выводятся. В некоторых случаях границы таблиц выводить нежелательно, но в большинстве случаев их выводят. Поэтому, чтобы выводить вокруг таблицы и ее ячеек границы, необходимо применять таблицы стилей.
Cell 1.1 Cell 1.2 Cell 1.3 Cell 2.1 Cell 2.2 Cell 2.3 Cell 3.1 Cell 3.2 Cell 3.3
Листинг 8.5. Стандартная таблица 3 x 3 (html, txt)
Границу вокруг всей таблицы задают оформлением тега <table>; границы, окружающие отдельные ячейки, задают оформлением тега <td>. Показанный ниже код создает таблицу с границами, показанную на рисунке 8.1. Вся таблица окружена внешней границей толщиной 1 пиксель, а каждая из ячеек окружена внутренней границей толщиной 1 пиксель. Такое оформление типично для стандартной таблицы XHTML.
<style type="text/css"> table {border:outset 1px} td {border:inset 1px} </style>
<table> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.6. Код создания таблицы 3 x 3 с границами (html, txt)
Встроенная таблица стилей является самым удобным методом оформления элементов таблицы. Однако можно использовать линейную таблицу стилей, при этом отдельные таблицы стилей должны появиться в каждом из множества тегов <td>. Значительно проще объявить встроенную таблицу стилей для селекторов table и td. Таблицы могут иметь любой стиль для внешних границ, а ячейки могут иметь свои собственные стили границ. Оформление границ рассматривается дальше.
