Простая красивая таблица css. Выравнивание содержимого ячеек

Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Добавляя к таблицам всю мощь стилей можно весьма удачно вписать таблицы в дизайн сайта, наглядно и красиво представить табличные данные.

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

Table { width: 100%; } .tbl-medium { width: 60%; } .tbl-small { width: 200px; }

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу

класс tbl-small .

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

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

Таблица

...

В данном примере для всех таблиц на странице задано выравнивание по центру.

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3).

Пример 3. Цвет фона

Таблица

Вид соединения
Вид соединения	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	I_s9
Плотное	P9

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

Если нам требуется сделать зебру - так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов и (пример 4).

Пример 4. Создание зебры

Таблица

Интервалы размеров, мм	Допуск IT, мкм, для квалитетов
Интервалы размеров, мм	5	6	7	8
До 3	4	6	10	14
Св. 3 до 6	5	8	12	18
Св. 6 до 10	6	9	15	22
Св. 10 до 18	8	11	18	27
Св. 18 до 30	9	13	21	33
Св. 30 до 50	11	16	25	39
Св. 50 до 80	13	19	30	46

Результат данного примера показан на рис. 2.

Рис. 2. Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

Table { border-spacing: 3px; /* Расстояние между ячеек */ } thead th { background: #e08156; /* Цвет фона заголовка */ color: #333; /* Цвет текста */ } td, th { padding: 5px; /* Поля в ячейках */ background: #4c715b; /* Цвет фона ячеек */ color: #f5e8d0; /* Цвет текста */ }

Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Границы и рамки

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border , которое применяется к элементам ( или ). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой - воспользоваться свойством border-collapse со значением collapse . В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table , а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

Таблица

O	X	X
O	O	X
X	X	O

Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom , border-left и другие подобные. Применять границы к элементам , , и нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

Таблица

Вид соединения	Поля допусков ширины шпоночного паза
Вид соединения	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	I_s9
Плотное	P9

Результат данного примера показан на рис. 5.

Рис. 5. Таблица с горизонтальными линиями

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент , он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

Таблица

Заголовок 1	Ячейка 1	Ячейка 2
Заголовок 2	Ячейка 3	Ячейка 4

В данном примере содержимое выравнивается по левому краю, а содержимое - по центру. Результат примера показан ниже (рис. 6).

Рис. 6. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top , как показано в примере 9.

Пример 9. Выравнивание содержимого ячеек по вертикали

Таблица

Вид соединения	Поля допусков ширины шпоночного паза
Вид соединения	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	I_s9
Плотное	P9

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Привет, друзья!

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

Оформлять будем, конечно же, с помощью CSS. Научимся делать «зебру» - не только горизонтальную, но и вертикальную. Поехали!

Пример красивой таблицы

Как видим, оформление коснулось всех основных аспектов:

Заголовки отличаются от остальных строк.
Строки чередуются цветом для более удобного восприятия.
В столбцах так же чередуется цвет. Это помогает не потерять нужный столбец при движении вверх/вниз.
Если навести мышку на строку, та подсветится. Это удобно для громоздких таблиц.

Что же, основые моменты определили, давайте пытаться реализовать.

Структура не полная, HTML предусматривает дополнительные теги, но решение, показанное на картинка, покрывает пожалуй более 99% всех случаев.

Итак, у нас есть таблица table, заголовок thead и тело tbody. В свою очередь thead и tbody содержат строки - tr. Строки разбиваются на ячейки - th и td. Формально, для ячейки подходят оба тега, но семантически верно для заголовков использовать th, для остального - td.

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

Исходный код таблицы:

Язык	Переводы
русский	один	два	три	четыре
английский	one	two	three	four
немецкий	eins	zwei	drei	vier

Пожалуй, остановлюсь на тегах colgroup и col . Теги нужны для описания стилей колонок таблицы. Формально, колонок нет - есть строки и ячейки. Из-за этого теги и не используются. Но в нашем случае они необходимы для того, чтобы не прописывать вручную классы каждой ячейке.

Оформление заголовка

Настало время небольшой CSS-магии. Определим стили для ячеек-заголовков. Пусть они будут фиолетовые, с жирным шрифтом и текстом, выровненным по левому краю:

Table.zebra thead th { background-color: rgba(204, 204, 255, 0.4); font-weight: bold; text-align: left; }

Возможно, кто-то спросит, почему я задал цвет не в виде rgb() или более привычного #CCCCFF? Всё просто: без полупрозрачности цвета будут перекрываться и получится совсем не то, что нам нужно. Просто посмотрте на рисунок:

Чередование фона строк

Раньше (да и сейчас порой) можно было встретить в HTML-коде такое:

нечет чёт

Программно подставляется соответствующий класс для чётной и нечётной строк. Представьте, что каждую строку нужно «помечать» соответствующим образом. Дичь? А то! И ладно это формирует скрипт, но представьте, что таблица большая, строки добавляются/удаляются вручную. Смекаете, куда клоню? При добавлении новой строки в середину таблицы всем остальным за ней придётся вручную менять название класса, чтобы не сбить чересполосицу.

К счастью, есть CSS, благодаря которому это делается не просто, а очень просто. Делаем!

/* нечётные строки таблицы - красные */ table.zebra tbody tr:nth-child(odd) { background-color:rgba(255, 0, 0, 0.2); } /* чётные строки - зелёные */ table.zebra tbody tr:nth-child(even) { background-color:rgba(0, 255, 0, 0.2); }

И всё. Изи)

Главное, учтите, что нумерация начинается с нуля, поэтому к первой строке таблицы будет применён стиль для чётной строки even .

Чередование фона столбцов

Здесь всё аналогично, только «чередовашки» описываем для элементов col:

Table.zebra col:nth-child(odd) { background-color:rgba(255, 255, 255, 0.2); } table.zebra col:nth-child(even) { background-color:rgba(0, 0, 0, 0.1); }

Чётные строки будут чёрные, нечётные - белые. Не забываем про полупрозрачность!

Выделение строки при наведении мышкой

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

Table.zebra tbody tr:hover { background-color:rgba(255, 255, 0, 0.2); }

Вот и всё. Окончательный вариант . Для сохранения файла себе просто нажмите Ctrl-S на открывшейся странице. Там ничего не подсасывается, не нужны сторонние библиотеки и прочее, только голый HTML со стилями.

PS: «Нафига это нужно?» - спросит пытливый читатель. В самом деле, для трех строк и пяти столбцов не много ли чести? Но представьте, что строк тридцать, плюс десяток столбцов, и подобные труды уже не кажутся излишеством. В конце концов, посмотрите таблицы в phpMyAdmin. Очевидно, что без такой раскраски работать было бы крайне неудобно.

Дополнение

Вариант для тех, кого полностью устраивает функциональность редактора CMS. Качаем .

Отличия: стили применяются к таблицам (тег table ), «вертикальная» линовка вынесена на th /td . Но! Редактор CMS должен генерировать thead и tbody . Это означает, что colgroup /col более не нужны, но не отменяет необходимость «правильного кода» со стороны движка.

Можно усложнить ещё немного, предположить, что первая строка всегда является заголовком, когда нужно убрать из css упоминания о tbody/thead, а для первой строки определить:

Table tr:first-child

Table thead tr

В общем, изгаляться можно всяко, только потребуется больше кода.

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

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

Граница таблицы

Стиль оформления таблицы CSS всегда подразумевает игру с границей (рамкой). Все таблицы по умолчанию не обводятся рамкой. То есть она равна 0 пикселям. Но это можно исправить при помощи свойства border.

Можно указать внешнюю рамку для всей таблицы:

table { border: 3px solid black; }

Благодаря этой строчке у всех таблиц на сайте, где используется этот стиль, будет черная рамка. Обратите внимание, что граница только по краям, но не внутри таблицы. Для ячеек и строк рамка задается иначе.

th, td {border: 3px solid black;}

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

Слово solid обозначает сплошное оформление. Указывать можно и другие значения.

Чаще всего используется именно сплошная рамка, поскольку она смотрится более привлекательно и не отвлекает внимания от основного контента сайта.

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

table {border-top: 1px solid red; }

Так можно задать рамку только для верхней части таблицы. Аналогично и для любых других сторон, просто вместо top пишем: right, left или bottom.

Заголовок таблицы

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

Этот заголовок отображается так же, как стандартно в книгах (например "Таблица 1").

Указать можно и расположение этого заголовка свойством caption-side (top или bottom). Выравнивание слева или справа задается свойством text-align.

Фон таблицы

Фоном таблицы может быть какой-нибудь цвет или рисунок. Цвет задается свойством background-color. Названия свойств полностью соответствуют употребляющимся в речи. Это облегчает запоминание во много раз.

Цвет можно указывать как названием, так и различными кодировками. Кроме этого, можно указать следующее:

Transparent - прозрачность элемента.
Inherit - цвет такой же, как и у родительского элемента.
Initial - значение по умолчанию.

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

Кроме этого, фоном может быть изображение. Для этого в стиле прописывается свойство background-image. Путь указывается вот так:

Путь до файла может быть как относительным, так и абсолютным.

Более сложную заливку можно делать градиентом:

linear-gradient();
radial-gradient();
repeating-linear-gradient() и repeating-radial-gradient() - повтор градиента.

Фон ячеек

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

Кроме чередования, можно указывать и номер конкретного столбца или строки. Например вот так:

tr:nth-child (even) { ... } - указание чередования строк;
tr:nth-child (1) { ... } - указание свойства конкретной строки;
td:nth-child (even) { ... } - указание чередования столбцов;
td:nth-child (1) { ... } - указание свойства конкретного столбца.

Кроме чередования и номеров, можно указывать - первый (td:first-child) или последний (td:last-child).

Промежуток между ячейками

В CSS оформление таблиц позволяет убрать промежутки между ячейками. По умолчанию они есть. Например, если задать рамку в таблице без настроек расстояния между границами, то будет вот такой результат.

Согласитесь, выглядит не очень красиво и не удобно для чтения. У пользователей будет в глазах рябить из-за этого. Убрать эти промежутки можно, прописав в стиле таблицы вот такую строчку:

border-collapse: collapse

Но бывает и так, что расстояние, наоборот, нужно увеличить. Причем размер промежутков можно указать как между столбцами, так и между строками. Для этого указываем следующее значение (вместо collapse):

border-collapse:separate

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

border-spacing: 20px.

Если нужно указать разное расстояние между строками и колонами, то указывается два значения:

border-spacing:10px20px.

Разница в браузерах

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

Выше приведен пример толщины рамки для цифровых значений.

Стили рамок также сильно отличаются.

Поэтому при разработке всегда смотрите результат в разных браузерах.

Совсем продвинутые разработчики могут в зависимости от браузера подключать совершенно разные CSS файлы. А кто-то делает проверки в каждом или каком-нибудь конкретном стиле (классе).

Больше всего проблем возникает с тенями.

CSS: оформление таблиц, примеры

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

Приведем примеры различных таблиц. На рисунке выше показано использование наклона и игра с и границ.

Многим будет интересен пример красивого аккуратного оформления, которое не будет резать глаза пользователям. Такой вариант уместен практически в любой ситуации.

Края можно делать скругленными. Смотрится довольно красиво.

Заключение

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

Главное при оформлении - не переборщить с эффектами. Всё нужно делать в меру. На первых порах верстальщики любят экспериментировать и используют сразу все свои знания. В итоге таблицы оказываются перенасыщенными свойствами. Старайтесь избегать этих ошибок.

Более того, некоторые параметры могут мешать друг другу. Например, незачем указывать цвет фона таблицы, если при этом еще там установлен фоновый рисунок, который будет перекрывать указанный цвет.

Многие веб мастера уверены, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли использовать таблицы CSS? Если да, то как?

Как создать таблицу CSS

Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению.

Основными элементами структуры являются строки. Строка определяется явно, а столбцы зависят от того, как заданы строки и ячейки.

Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.

Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS.

Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.

Table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption }

Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side:

#caption {caption-side: top} #caption {caption-side: bottom}

Несложно догадаться, как создать таблицу CSS опираясь на приведенный список. Вот пример таблицы.

#table {display: table;} .row {display: table-row;} .cell {display: table-cell;}

Если посмотреть на код HTML примера, то можно легко различить структуру таблицы (используются элементы div и span с классами и ID вместо table , td и tr).

Совсем небольшой код CSS представляет элементы div и span в виде таблицы.

В дополнение к выше приведенным свойствам модель таблицы CSS включает значение inline-table , которая определяет новую таблицу как и display: table , но в рамках контекста встроенного в HTML код формата.

Столбцы и их группировка

Так как ячейки таблицы являются потомками строк таблицы, то для формирования столбцов имеет смысл использовать некоторые свойства. Модель таблицы CSS позволяет применять следующие свойства для столбцов и их группировки:

border — обычное свойство, пока свойство border-collapse не используется для элемента таблицы;
background — обычное свойство, пока строка и ячейка имеют прозрачный фон;
width — установка ширины столбца;
visibility — если имеет значение collapse (единственное доступное значение), то ячейка столбца не будет выводиться (она объединяется с другими столбцами и ширина таблицы выравнивается).

Стек таблицы CSS

Различные элементы таблицы имеют разный уровень в стеке для обеспечения возможности использования разных фонов на разных слоях.

Данные слои можно посмотреть на представленном рисунке.

таблица - самый нижний слой
группа столбцов
столбцы
группа строк
строки
ячейки - самый верхний слой

Фон слоя будет виден только если выше лежащий слой имеет прозрачный фон.

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

Алгоритм шаблона таблицы

Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов . Алгоритм выбирается с помощью свойства table-layout и двух значений:

fixed (фиксированная) — ширина шаблона определяется не содержанием, а установкой ширины таблицы, ячеек, рамок и расстоянием между ячейками;
auto (автоматическая)— ширина таблицы устанавливается исходя из ширины столбцов и рамок.

Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML.

Если вы явно определяете ширину таблицы, то следует использовать фиксированную модель расчета ширины.

По умолчанию высота ячейки устанавливается минимально необходимой для вывода содержания. Но вы можете явно определить высоту ячейки. Все ячейки в строке будут иметь высоту ячейки с максимальным значением.

Свойство vertical-align определяет выравнивание содержания в строке

baseline
bottom
middle
sub, super, text-top, text-bottom, <длина>, <процент>

Последняя группа значений применяется не для ячеек, а для текста в них. Ячейки в данном случае будут выравниваться в соответствии со значением baseline .

Рамки таблицы CSS

Есть три интересных свойства для рамок таблиц:

border-collapse — может иметь значения collapse , separate , или inherit
border-spacing — может иметь значения <расстояние_по_горизонтали>, <расстояние_по_вертикали>, или inherit . Определяет дистанцию между рамками ячеек.
empty-cells — может иметь значения show , hide , или inherit . Если ячейка пустая или имеет свойство visibility: hidden , то содержание не будет выводиться по умолчанию. Установка свойства empty-cells: show приведет к выводу фона и рамки для пустой ячейки.

Нужно ли использовать таблицы CSS?

Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа.

Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов div и кода CSS, то выявляются следующие недостатки таблиц:

Дополнительное кодирование — таблицы HTML требуют дополнительного кодирования структуры в сравнении с элементами div . Но и таблицы CSS требуют использования дополнительных классов и идентификаторов.
Жесткая структура — таблицы HTML очень жестко привязаны к содержанию . Порядок ячеек должен быть таким, каким он будет выводиться. Но такое же ограничение накладывается и на таблицы CSS/
Вывод в браузерах — браузеры выполняют несколько проходов по структуре HTML таблиц. Но и для CSS таблиц ситуация будет аналогичной.

В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах.

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

Заключение

Таблицы CSS достаточно просто освоить и использовать. Но они не имеют явных преимуществ перед таблицами HTML, за исключением более семантического кода.

Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах?

Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.

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

Форматирование таблиц

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border:

Table { border-collapse: collapse; /*убираем пустые промежутки между ячейками*/ border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/ }

Границы ячеек заголовка каждого столбца задаются для элемента th:

Th {border: 1px solid grey;}

Границы ячеек тела таблицы задаются для элемента td:

Td {border: 1px solid grey;}

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

Th, td {border: 1px solid grey;}

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

Table {border: 3px solid grey;}

Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */ table {border-top: 3px solid grey; } /* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */ td {border-bottom: 1px solid grey;}

Подробнее о свойстве border вы можете прочитать .

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или % , например:

Table {width: 600px;} th {width: 20%;} td:first-child {width: 30%;}

Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов и . Фиксировать высоту с помощью свойства height не рекомендуется.

Th, td {padding: 10px 15px;}

3. Как задать фон таблицы

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

4. Столбцы таблицы

Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега

. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:

с помощью тега

Можно задать фон для любого количества столбцов;

с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);

с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

Подробнее про CSS-селекторы вы сможете прочитать .

5. Как добавить таблице заголовок

Добавить заголовок в таблицу можно с помощью тега , а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align . Наследуется.

...

Таблица № 1
Company	Q1	Q2	Q3	Q4

caption { caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px; }

Рис. 2. Пример отображения заголовка под таблицей

6. Как убрать промежуток между рамками ячеек

Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.

Синтаксис

Table {border-collapse: collapse;}
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.

Синтаксис

Table {border-collapse: separate; border-spacing: 10px 20px;} table {border-collapse: separate; border-spacing: 10px;} Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.

Company	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

table { border: 1px solid #69c; border-collapse: separate; empty-cells: hide; } th, td {border: 2px solid #69c;}

Рис. 5. Пример скрытия пустой ячейки таблицы

9. Компоновка макета таблицы с помощью свойства table-layout

Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.

Синтаксис

Table {table-layout: fixed;}

10. Лучшие макеты таблиц

1. Горизонтальный минимализм

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

Employee	Salary	Bonus	Supervisor
Stephen C. Cox	$300	$50	Bob
Josephin Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text-align: left; } th { font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; } td { color: #669; padding: 9px 8px; transition: .3s linear; } tr:hover td {color: #6699ff;}

При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td .

Td { border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; }/*остальной код - как в примере выше*/

Добавление эффекта:hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.

Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:hover td {background: #e8edff;}

2. Вертикальный минимализм

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

Th { font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; } td { border-right: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px; }

3. «Коробочный» стиль

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

Th { font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; } td { background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; } tr:hover td {background: #ccddff;}

Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.

Table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } th { font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border-left: 1px solid #9baff1; color: #039; padding: 8px; } td { background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px; }

4. Горизонтальная зебра

Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.

Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:nth-child(2n) {background: #e8edff;}

5. Газетный стиль

Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку.

Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; } td { color: #669; padding: 7px 17px; } tr:hover td {background: #ccddff;}

Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; padding: 10px; } td { color: #669; border-top: 1px dashed #fff; padding: 10px; background:#ccddff; } tr:hover td {background: #99bcff;}

Table {border: 1px solid #6cf;} th { font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid #fff; padding: 20px; } td { color: #669; border-right: 1px dashed #6cf; padding: 10px 20px; }

6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

Jpg") no-repeat; background-position: 100% 55px; } th { font-weight: normal; color: #339; padding: 10px 12px; } td { background: url("https://сайт/images/back..png"); background: transparent; }