Стилизация таблиц с помощью CSS

Стилизация таблиц с помощью CSS

Когда вы создаете таблицу 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;
}

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*