Rambler's Top100 Старый русский почтовик! Оплата в WM! Самый активный, самый надежный!
Рыболовные туры в Финляндию
Рыбалка в Финляндии
с русскоговорящим гидом!
SEO sprint - Всё для максимальной раскрутки!
Форум русских рыболовов Финляндии

Рыбалка в Финляндии


на главную
Простейшие
таблицы
Дальше о
таблицах
Таблицы с
помощью CSS


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

   В этой статье я расскажу, как можно оформить (в смысле - раскрасить:-) таблицы с помощью таблиц стилей. (Дальше, чтобы не наворачивать таблицы на таблицы, я буду говорить просто: "с помощью стилей":-). Предупреждая возможную критику со стороны дизайнеров за слишком аляповатый вид таблицы, обращаю Ваше внимание, что это пример ПОСТРОЕНИЯ таблицы с помощью стилей, но никак не пример для ПОДРАЖАНИЯ! В том смысле, что я лишь показываю, как это делать технически, и цвета и формы выбраны только для иллюстрации возможностей, а не в качестве примера дизайна. О дизайне своих страниц Вы уж, пожалуйста, позаботьтесь сами согласно своим вкусам и наклонностям.
   Итак, приступим...    Все таблицы на этой странице подчиняются следующим правилам стилей, которые помещены в разделе HEAD (правила выделены красным, черным - комментарии):
table - ниже перечислены общие правила для всей таблицы
{
border-bottom: thick; - определяет толщину рамки
border-style: ridge; - определяет стиль рамки
border-color: green; - определяет цвет рамки
background:gray; - определяет цвет фона ячеек (в нижеследующем примере виден лишь в пропущенных ячейках, так как цвет остальных определяется другими правилами.
}
caption - определяет свойства заголовка таблицы
{color:green; - цвет
font-family: Arial serif; - шрифт
font-size: 200%;text-align:center} - размер шрифта
td - общие свойства для всех ячеек
{background:#ffffcc; border: thick inset fuchsia;} - цвет фона и свойства рамки
th - свойства для заглавных ячеек столбцов
{border:thick outset yellow;background-color:#009900} - цвет фона и свойства рамки
#solu3 - определяет селектор
{background-color:#ccffff; border:thick inset #ffffcc} - определяет свойства фона и рамок ячеек, определенных селектором #solu3
#solu4 - определяет селектор
{background-color:#ffccff;border:thick inset #ffffcc} - определяет свойства фона и рамок ячеек, определенных селектором #solu4
   Вот, что получается в результате:

Заголовок таблицы
заголовок столбца №1 заголовок столбца №2 заголовок столбца №3 заголовок столбца №4 заголовок столбца №5 заголовок столбца №6
ячейка 1 ячейка 2 ячейка3
свойства определены селектором solu3, строки объединены при помощи rowspan="4"
ячейка 4 свойства определены селектором solu4
ячейка 5 ячейки объединены colspan="2" ячейка 6 ячейка 7 ячейка 8
ячейка 9 ячейка 9 ячейка 9 ячейка 9 ячейка 9
ячейка 10 ячейка 10 ячейка 10 ячейка 10 ячейка 10

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

Создать свой сайт


Рейтинг@Mail.ru liveinternet.ru: показано число посетителей за сегодня


Copyright © 2001 by Сергей Червонящий.
Все права защищены. Запрещено частичное или полное воспроизведение материалов сайта без согласования с автором.

Покупайте на OHO.ru:
Покупайте на OHO.ru: