Когда вы создаете таблицу HTML без каких-либо стилей или атрибутов, браузеры отображают их без каких-либо границ и разделителей. Стилизация таблицы с помощью CSS может значительно улучшить ее внешний вид и тем самым, улучшить читабельность данных в таблице.
В следующих разделах будет показано, как управлять компоновкой и представлением элементов таблицы с помощью CSS для создания элегантных и согласованных таблиц.
Добавление рамок в таблицы
Свойство CSS border - лучший способ определить рамки для таблиц.
В следующем примере будет установлена черная рамка для элементов <table>, <th> и <td>.
table, th, td { border: 1px solid black; }
Складывание рамок таблицы (border-collapse)
Если вы видели результаты предыдущего примера, вы заметили, что каждая ячейка таблицы имеет отдельные рамки, а также есть некоторое пространство между границами соседних ячеек таблицы. Это происходит потому, что рамки ячеек таблицы по умолчанию разделены. Но вы можете свернуть (или сложить) отдельные рамки таблицы в одну, используя свойство CSS border-collapse.
CSS-свойство border-collapse выбирает модель границы таблицы.
Он может принять одно из двух значений collapse (сложенные) или separate (разделенные).
- Разделенная модель - это модель границ таблицы HTML по умолчанию, в которой каждая смежная ячейка имеет свои собственные определенные границы.
- В модели сложенных границ соседние ячейки таблицы имеют общие границы.
Правила стиля в следующем примере свернут границы ячейки таблицы, а также применят однопиксельную черную границу к элементам таблицы и ячейки таблицы.
table { border-collapse: collapse; } table, th, td { border: 1px solid black; }
Вы также можете удалить пространство между границами ячеек таблицы, установив значение свойства border-spacing равным 0. Однако это только удаляет пространство, но не объединяет границы, как при установке для свойства border-collapse значения collapse. В результате вы получите толщину рамки равной двукратному размеру заданной.
Управление макетом таблицы
По умолчанию таблица расширяется и сжимается для размещения данных, содержащихся в ней. По мере заполнения данных внутри таблицы, она продолжает расширяться, пока есть место. Однако иногда необходимо установить фиксированную ширину таблицы, чтобы управлять макетом.
Вы можете сделать это с помощью свойства CSS table-layout. Это свойство определяет алгоритм, который будет использоваться для размещения ячеек таблицы, строк и столбцов. Доступны два алгоритма размещения таблиц: автоматический (auto) и фиксированный (fixed).
- auto - использует алгоритм автоматической раскладки таблицы. При использовании этого алгоритма ширина таблицы и ее ячеек зависит от содержимого ячейки.
- fixed - использует алгоритм фиксированной таблицы. При использовании этого алгоритма горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины таблицы, ширины столбцов и границ или расстояния между ячейками.
Правила стиля в следующем примере указывают, что таблица размечена с использованием алгоритма фиксированной разметки и имеет фиксированную ширину 300 пикселей.
table { width: 300px; table-layout: fixed; }
Отображение пустых ячеек
Свойство CSS empty-cells управляет отображением границ и фонов ячеек, которые не имеют видимого содержимого в таблице, использующей модель разделенных границ.
Это свойство может принимать одно из трех значений: показать (show), скрыть (hide) или наследовать (inherit).
Следующее правило стиля скрывает пустые ячейки в элементе таблицы.
table { border-collapse: separate; empty-cells: hide; }
Управление положением заголовка таблицы
Свойство CSS caption-side устанавливает вертикальное положение поля заголовка таблицы.
Следующее правило стиля размещает заголовки таблицы под родительской таблицей. Однако, чтобы изменить горизонтальное выравнивание текста заголовка, вы можете использовать свойство text-align.
caption { caption-side: bottom; }
Оставить комментарий