Стили CSS для таблицы

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

Мы уже создали таблицу, но она в результате предустановленных стилей, получилась не очень приятной для глаз ( смотрите, что получилось в статье - как создать таблицу на сайте.) Быть может и она вам не очень понравится...

Давайте разбираться в стилях таблицы, что же с ними не так:

1) отступы между границами ячеек и содержимым (раньше к тегу table применялось свойство cellpadding - сейчас можно или даже лучше так не делать).

Лучше сделать так : td, th { padding: 5px; } - сразу идет применение стиля для заголовка таблицы и ячеек.

Отдельно для ячеек можно и для каждой стороны:

td {
padding-top: 7px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
}

или более прогрессивно td {padding: 7px 5px 4px 5px} - это тоже самое, краткая запись.

При td, th { padding: 10px; } наша таблица приобретет вид:

Таблица для примера
Заголовок 1 колонкиЗаголовок 10 колонкиЗаголовок 3 колонки
ячейка таблицы1 ячейка таблицы2 ячейка таблицы3
ячейка таблицы4 ячейка таблицы5 ячейка таблицы6

Как видим таблица стала больше - в результате увеличения отступов, но красивее она пока так и не стала. А мы переходим к второму свойству:

2) Стандартные text-align и vertical-align.

text-align - применяется для выравнивания содержимого ячеек по горизонтали - а конкретно: center - центрирует содержимое, left - выровнит по левому краю, right - по правому, justify - распределит содержимое по всей ширине.

Для того, чтобы выровнить все содержимое ячеек по центру - назначим это - table {text-align: center;}

vertical-align - выровнит содержимое по вертикали: top - по верхнему краю, middle - по середине, bottom - по нижнему краю, baseline - выравнивание первой строки по верхнему краю.

Раньше вместо этих тегов применялся - тег align - сейчас его не считают правильным для применения, но все же он еще работает, поэтому старые сайты, "с которых давно не смахивали пыль" - они не стали одновременно выравниваться неправильно, все работает, но веб-дизайнеры уже переходят на другие стандарты.

Применим к нашей таблице это table {text-align: center;} и vertical-align в значении middle для ячеек 1 колонки;

Таблица для примера
Заголовок 1 колонкиЗаголовок 2 колонкиЗаголовок 3 колонки
ячейка таблицы1 ячейка таблицы2 ячейка таблицы3
ячейка таблицы4 ячейка таблицы5 ячейка таблицы6

Обратите внимание: vertical-align не наследуется - и поэтому его необходимо применять к th и td !!!

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

3) Свойство border-spacing - указывает пространство между ячейками (именно потому что у меня по умолчанию его создатели шаблона указали в 0, поэтому мы с вами и не видим границ)

Необходимо применять к таблице:

table {
border-spacing: 8px;
}

Таблица для примера
Заголовок 1 колонкиЗаголовок 2 колонкиЗаголовок 3 колонки
ячейка таблицы1 ячейка таблицы2 ячейка таблицы3
ячейка таблицы4 ячейка таблицы5 ячейка таблицы6

 Но разницы все равно сильно не увидим(но она на самом деле есть), и только лишь прописав границы:

td {
border: 1px solid black; }

Таблица для примера
Заголовок 1 колонкиЗаголовок 2 колонкиЗаголовок 3 колонки
ячейка таблицы1 ячейка таблицы2 ячейка таблицы3
ячейка таблицы4 ячейка таблицы5 ячейка таблицы6

 4) Почему мы не увидели расстояний между ячейками, кто знает? Мы же его задали в 5px. Причина все та же - что-то в шаблоне уже выставлено по-умолчанию. И мы переходим к следующему свойству - это border-collapse (может принимать 2 значения : separate - отображать 2 границы и collapse - "схлопнуть"). Оно "схлопывает" границы между ячейками - к примеру, в примере выше, мы задали границу по 1px, тогда на граница между ячейками должна выглядеть как сдвоенная (1px + 1px), но этого не происходит, потому что по умолчанию у нас выставлено значение collapse.

Давайте попробуем выставить border-collapse в значение separate для нашей таблицы:

Таблица для примера
Заголовок 1 колонкиЗаголовок 2 колонкиЗаголовок 3 колонки
ячейка таблицы1 ячейка таблицы2 ячейка таблицы3
ячейка таблицы4 ячейка таблицы5 ячейка таблицы6

 

Как видим таблицы приобретает должные очертания, при этом конечно же, можно менять цвета границ таблицы, внутренний background (внутренний фон: цвет или картинку).

 5) Может быть вы заметили, что у 2 ряда ячеек - углы скругленные? Это мы назначили для них свойство CSS border-radius в значение 5px; Если же у вас свойство border-collapse стоит в значении collapse, углы останутся прямыми, то есть border-radius будет успешно проигнорирован.

6) Более продвинутые веб-дизайнеры знают как заставить человека дольше изучать таблицу - часто для того, чтобы "глазу было интереснее" - применяют раскраску рядов ячеек: например 1 ряд - белого цвета, а второй - серого. Но есть в CSS 3 и свойства, которые могут назначить четным рядам - одно, а нечетным = другое:

tr:nth-of-type(odd) { background-color: white; }
tr:nth-of-type(even) { background-color: grey; }

Прописав их для таблицы, нам не нужно будет прописывать их для каждого ряда.

 6) Почему мы добавили теги <colgroup> и <col> в таблицу -  а для того, что при помощи них вы можете контролировать параметрами колонок, предварительно задав им идентификатор или класс. К примеру, попробуйте им задать ширину-width и свойства фона (backgroundcolor, background-image)

Как центрировать таблицу на странице сайта по ширине (по горизонтали)

Часто бывает очень нужно и красиво сделать таблицу именно по ширине блока или страницы, но она "зараза" как бы не хочет и не получается отцентрировать, такое бывает, но это легко исправить:

Решение: нужно задать ШИРИНУ таблицы в пикселах или в процентах(но меньше 100%) и задать свойство: margin: auto.

Вот так вот мы и разобрали основные CSS стили таблицы. Кому было полезно, отписываемся.

 

 

 

Добавить комментарий


Защитный код
Обновить

Вы здесь: Сайтостроение Создание сайта css Стили CSS для таблицы