Стили 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; } наша таблица приобретет вид:

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

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 колонки;

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

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

3)

border-spacing

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

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

table {
border-spacing: 8px;
}

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

td {
border: 1px solid black; }

border-collapse

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

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

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

Скругление углов таблицы в CSS

 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 стили таблицы. Кому было полезно, отписываемся.