Спецификация 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 для элементов
Th, td {padding: 10px 15px;}
3. Как задать фон таблицы
По умолчанию фон таблицы
и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:
заливка ,
,
.
4. Столбцы таблицы
Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега
с помощью тега
Можно задать фон для любого количества столбцов;
с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.
Подробнее про CSS-селекторы вы сможете прочитать .
5. Как добавить таблице заголовок
Добавить заголовок в таблицу можно с помощью тега
| Company | Q1 | Q2 | Q3 | Q4 |
|---|
Рис. 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 | |
| 50.2 | 40.63 | 45.23 |
Рис. 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 |
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами 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; }
Оформление таблиц с помощью 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.
Заголовок таблицы
Заголовок таблицы можно указать при помощи тега
Этот заголовок отображается так же, как стандартно в книгах (например "Таблица 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 тег