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


Выравнивание таблицы


Плавающая таблица

Рис. 8.23.  Плавающая таблица

Таблицы можно выравнивать влево или вправо на странице, задавая для селектора table свойство float. Когда таблицы определена как плавающая, текст обтекает таблицу примерно так же, как обтекание текста происходит вокруг плавающих изображений.

Код плавающей таблицы появляется непосредственно перед текстом, который будет обтекать таблицу. По сторонам таблицы можно добавлять поля, чтобы оставить свободное пространство между таблицей и обтекающим текстом. Следующая частичная таблица стилей применяется для плавающей таблицы, показанной на рисунке 8.23.

<style type="text/css"> table {border:outset 1; float:right; margin-left:20px; margin-bottom:10px} ... </style>

Листинг 8.26. Частичная таблица стилей для плавающей таблицы

Таблицу можно выравнивать влево, или вправо, или по центру отдельной строки. Однако в этом случае оформление выравнивания не связывается с самой таблицей. Таблица должна вкладываться внутрь тега <p> или <div> (блочные теги), которым присваивается свойство text-align. Таблица на рисунке 8.24 кодируется внутри тега <p>, который содержит оформление для выравнивания его содержимого по центру.

Выровненная по центру таблица

Рис. 8.24.  Выровненная по центру таблица

<style type="text/css"> p#CENTER {text-align:center} table {border:outset 1} table td {border:inset 1} table caption {font-weight:bold} table tr#HEAD {font-weight:bold; text-align:center; background-color:#F0F0F0} </style>

<p id="CENTER"> <table> <caption>A Centered Table</caption> ... </table> </p>

Листинг 8.27. Таблица стилей для выровненной по центру таблицы




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