Основные свойства для стилизации таблиц в CSS
Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных.
После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид.
CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц.
Добавление границ (border) в таблицы
CSS-свойство border — лучший способ определить границы для таблиц и ячеек. В следующем примере будет установлена черная граница для элементов <table>, <th>, и <td>.
table, th, td {
border: 1px solid black;
}По умолчанию браузер рисует границу вокруг таблицы, а также вокруг всех ячеек с некоторым промежутком между ними, что приводит к двойной границе. Чтобы избавиться от этой проблемы, вы можете просто свернуть границы соседних ячеек (collapse) таблицы и создать чистые однострочные границы.
Давайте посмотрим на следующую иллюстрацию, чтобы понять, как граница применяется к таблице.
Свертывание границ таблиц
Существуют две разные модели для установки границ ячеек таблицы в CSS: раздельная (separate) и свернутая (collapse).
В раздельной модели границ, которая используется по умолчанию, каждая ячейка таблицы имеет свои собственные отдельные границы, тогда как в модели со свернутыми границами смежных ячеек таблицы имеют общую границу. Вы можете установить модель границы для HTML-таблицы, используя CSS-свойство
Следующие правила сворачивают границы ячеек таблицы и применяют черную границу в один пиксель.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}Вы также можете удалить пространство между границами ячеек таблицы, установив для CSS-свойства border-spacing значение 0. Однако это только удаляет пространство, но не объединяет границы, как при установке для свойства border-collapse значения collapse.
Регулировка пространства внутри таблиц
По умолчанию браузер создает ячейки таблицы, в которых довольно мало пространства.
Чтобы добавить больше пространства между содержимым ячейки таблицы и границами ячейки, вы можете просто использовать CSS-свойство padding. Давайте посмотрим следующий пример:
th, td {
padding: 15px;
}Вы также можете отрегулировать расстояние между границами ячеек, используя CSS-свойство border-spacing, если границы вашей таблицы разделены (по умолчанию).
Следующие правила применяют интервал 10 пикселей между всеми границами в таблице:
table {
border-spacing: 10px;
}Настройка ширины и высоты таблиц
По умолчанию таблица будет отображаться достаточно широкой и достаточно высокой, чтобы вместить все ее содержимое.
Однако вы также можете задать ширину и высоту таблицы, а также ее ячеек, явно используя CSS-свойства width и height. Правила в следующем примере устанавливают ширину таблицы равной 100% и высоту ячеек заголовка таблицы равной 40 пикселям.
table {
width: 100%;
}
th {
height: 40px;
}Управление макетом таблицы
Таблица расширяется и сжимается для размещения данных, содержащихся в ней. Это поведение работает по умолчанию. По мере заполнения данных внутри таблицы они продолжают расширяться, пока есть место. Однако иногда необходимо установить фиксированную ширину таблицы или столбца, чтобы управлять макетом.
Вы можете сделать это с помощью CSS-свойства table-layout. Это свойство определяет алгоритм, который будет использоваться для размещения ячеек таблицы, строк и столбцов. Это свойство принимает одно из двух значений:
- auto — использует алгоритм автоматической раскладки таблицы. С помощью этого алгоритма ширина таблицы и ее ячеек настраиваются в соответствии с содержимым. Это значение установлено по умолчанию.
- fixed — Использует алгоритм фиксированной таблицы. При использовании этого алгоритма горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины столбцов, границ и расстояния между ячейками.
В плане производительности это работает быстрее
В плане производительности это работает быстрееПравила в следующем примере указывают, что таблица HTML создана с использованием алгоритма фиксированной разметки и имеет фиксированную ширину 300 пикселей.
table {
width: 300px;
table-layout: fixed;
}Вы можете оптимизировать производительность рендеринга таблицы, указав значение fixed для свойства table-layout. Фиксированное значение этого свойства заставляет таблицу отображаться по одной строке за раз, предоставляя пользователям информацию быстрее, в то время как при установленном значении auto пользователь будет дожидаться загрузки всей таблицы, прежде чем браузер сможет посчитать размеры ячеек.
Выравнивание текста внутри ячеек таблицы
Вы можете выровнять текстовое содержимое внутри ячеек таблицы по горизонтали или по вертикали.
Горизонтальное выравнивание содержимого ячеек
Для горизонтального выравнивания текста внутри ячеек таблицы вы можете использовать свойство 
Вы можете выравнять текст по левому краю (left), правому краю (right), центру (center) или растянуть на всю ширину (justify).
Следующие правила будут выравнивать текст внутри элементов по левому краю.
th {
text-align: left;
}Текст внутри элементов <td> по умолчанию выравнивается по левому краю, тогда как текст внутри элементов <th> выравнивается по центру и по умолчанию отображается жирным шрифтом.
Вертикальное выравнивание содержимого ячеек
Аналогично, вы можете выровнять содержимое внутри элементов <th> и <td> по вертикали, используя CSS-свойство vertical-align. Вертикальное выравнивание по умолчанию — middle (по середине).
Следующие правила будут выравнивать текст по вертикали снизу внутри элементов.
th {
height: 40px;
vertical-align: bottom;
}Управление положением заголовка таблицы
Вы можете установить вертикальное положение заголовка таблицы с помощью CSS-свойства caption-side.
Надпись может быть размещена либо вверху, либо внизу таблицы. По умолчанию она устанавливается сверху.
caption {
caption-side: bottom;
}Чтобы изменить горизонтальное выравнивание заголовка таблицы (например, влево или вправо), вы можете просто использовать CSS-свойство text-align, также как вы делаете это с обычным текстом.
Обработка пустых ячеек
В таблицах, в которых используется раздельная модель границ (по умолчанию), вы также можете управлять отображением ячеек, которые не имеют видимого содержимого, с помощью CSS-свойства
Это свойство принимает значение show или hide. Значением по умолчанию является show, при котором пустые ячейки отображаются как обычные ячейки, но если указано значение hide, вокруг пустых ячеек не создаются границы или фон. Посмотрим пример, чтобы понять, как это работает:
table {
border-collapse: separate;
empty-cells: hide;
}Размещение неразрывного пробела ( ) внутри ячейки таблицы делает его непустым.
Следовательно, даже если эта ячейка выглядит пустой, значение hide не будет скрывать границы и фон.
Создание чередующихся строк в таблице
Установка разных цветов для фона чередующихся строк является популярной техникой для улучшения читаемости таблиц с большим объемом данных.
Вы можете использовать псевдокласс :nth-child() для этого эффекта.
Следующие правила будут выделять все нечетные строки в теле таблицы.
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}Чередующиеся строки в таблицах обычно выглядят примерно так:
Псевдокласс :nth-child() выбирает элементы на основе их положения в группе. В качестве аргумента он может принимать число, ключевое слово even (четное) или odd (нечетное) или выражение в форме xn+y, где x и y — целые числа (например, 1n, 2n, 2n + 1, …).
Создание адаптивной таблицы
Таблицы не являются адаптивными по умолчанию.
Однако для поддержки мобильных устройств вы можете добавить отзывчивость вашим таблицам, включив горизонтальную прокрутку на маленьких экранах. Для этого просто оберните вашу таблицу элементом <div> и примените стиль
<div>
<table>
... table content ...
</table>
</div>Стилизация таблиц с помощью CSS
Когда вы создаете таблицу HTML без каких-либо стилей или атрибутов, браузеры отображают их без каких-либо границ и разделителей. Стилизация таблицы с помощью CSS может значительно улучшить ее внешний вид и тем самым, улучшить читабельность данных в таблице.
В следующих разделах будет показано, как управлять компоновкой и представлением элементов таблицы с помощью CSS для создания элегантных и согласованных таблиц.
Добавление рамок в таблицы
Свойство CSS border — лучший способ определить рамки для таблиц.
В следующем примере будет установлена черная рамка для элементов <table>, <th> и <td>.
table, th, td {
border: 1px solid black;
}Складывание рамок таблицы (border-collapse)
Если вы видели результаты предыдущего примера, вы заметили, что каждая ячейка таблицы имеет отдельные рамки, а также есть некоторое пространство между границами соседних ячеек таблицы. Это происходит потому, что рамки ячеек таблицы по умолчанию разделены. Но вы можете свернуть (или сложить) отдельные рамки таблицы в одну, используя свойство CSS border-collapse.
блок 1
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;
}блок 3
Таблицы стилей CSS
« Предыдущая
Следующая глава »
Внешний вид таблицы HTML можно значительно улучшить с помощью CSS:
| Компания | Контакт | Страна |
|---|---|---|
| Альфред Футтеркисте | Мария Андерс | Германия |
| Берглундс снаббкёп | Кристина Берглунд | Швеция |
| Торговый центр Моктесума | Франсиско Чанг | Мексика |
| Эрнст Гендель | Роланд Мендель | Австрия |
| Островная торговля | Хелен Беннет | Великобритания |
| Кениглич Эссен | Филип Крамер | Германия |
| Винные погреба Смеющегося Вакха | Йоши Таннамури | Канада |
| Магазин Алиментари Риунити | Джованни Ровелли | Италия |
Границы таблицы
Чтобы указать границы таблицы в CSS, используйте свойство border .
В приведенном ниже примере указывается черная рамка для элементов
| и | :Пример стол, т, тд { Попробуйте сами » Обратите внимание, что таблица в приведенном выше примере имеет двойные границы. Это потому что и таблица, и элементы | и | имеют отдельные границы.Свернуть границы таблицы Свойство Пример Таблица
{ стол, т, тд
{ Попробуйте сами » Если вам нужна только рамка вокруг таблицы, укажите свойство Пример Таблица
{ Попробуйте сами » Ширина и высота стола Ширина и высота стола определяются В приведенном ниже примере ширина таблицы устанавливается равной 100 %, а высота | элементов до 50px:Пример Таблица
{ -й
{ Попробуйте сами » Горизонтальное выравнивание Свойство | или | . По умолчанию содержимое элементов | выравнивается по центру, а содержимое элементов | выравнивается по левому краю. В следующем примере текст в элементах | выравнивается по левому краю:Пример й
{ Попробуйте сами » Выравнивание по вертикали Свойство | или | . По умолчанию вертикальное выравнивание содержимого в таблице по середине (как для | и элементы | ). В следующем примере задается вертикальное выравнивание текста по нижнему краю для элементов | :Пример тд
{ Попробуйте сами » Заполнение таблицы Чтобы контролировать расстояние между границей и содержимым таблицы, используйте | и | :Пример й, тд
{ Попробуйте сами » Горизонтальные разделители
Добавьте свойство | и | для горизонтальных разделителей:Пример th, td { Попробуйте сами » Hoverable Table Используйте | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Имя | Фамилия | Сбережения |
|---|---|---|
| Питер | Гриффин | 100 долларов |
| Лоис | Гриффин | 150 долларов |
| Джо | Суонсон | 300 долларов |
Пример
tr:hover {background-color: #f5f5f5}
Попробуйте сами »
Полосатые таблицы
| Имя | Фамилия | Сбережения |
|---|---|---|
| Питер | Гриффин | 100 долларов |
| Лоис | Гриффин | 150 долларов |
| Джо | Суонсон | 300 долларов |
Для таблиц с полосами зебры используйте селектор nth-child() и добавьте цвет фона ко всем четным (или нечетным) строкам таблицы:
Пример
tr:nth-child(even) {background-color: #f2f2f2}
Попробуйте сами »
Цвет таблицы
В приведенном ниже примере указан цвет фона и цвет текста
| Имя | Фамилия | Сбережения |
|---|---|---|
| Питер | Гриффин | 100 долларов |
| Лоис | Гриффин | 150 долларов |
| Джо | Суонсон | 300 долларов |
Пример
th {
background-color: #4CAF50;
белый цвет;
}
Попробуйте сами »
Адаптивная таблица
Адаптивная таблица будет отображать горизонтальную полосу прокрутки, если экран слишком small для отображения всего содержимого:
Добавьте элемент-контейнер (например,
overflow-x:auto вокруг элемента
.. содержимое таблицы … Попробуйте сами »
Другие примеры
Сделайте красивый стол
Этот пример демонстрирует, как создать причудливую таблицу.
Установить положение заголовка таблицы
В этом примере показано, как расположить заголовок таблицы.
Проверьте себя с помощью упражнений!
Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 » Упражнение 6 »
Свойства таблицы CSS
| Собственность | Описание |
|---|---|
| граница | Задает все свойства границы в одном объявлении |
| обрушение границы | Указывает, должны ли быть свернуты границы таблицы |
| интервал между границами | Задает расстояние между границами соседних ячеек |
| сторона надписи | Задает размещение заголовка таблицы |
| пустые ячейки | Указывает, отображать ли границы и фон пустых ячеек в таблице. |
| таблица-макет | Устанавливает алгоритм компоновки, который будет использоваться для таблицы |
« Предыдущая
Следующая глава »
Таблица CSS — W3schools
by
Для отображения группы данных в табличной форме используется элемент HTML
| для определения заголовка таблицы и тег | для определения данных таблицы. Для применения стиля к HTML-таблице можно использовать несколько свойств CSS, что обеспечивает лучший внешний вид. Вот некоторые из этих свойств CSS:
. CS TABLE TABED SATED SET SET TABED SET. граница для таблицы HTML.Пример:
Вывод:
Объяснение: В приведенном выше примере «CITY», а именно: . Здесь ширина таблицы также определена как 50%. Сплошная черная рамка шириной 2 пикселя также добавляется к таблице с помощью свойства границы CSS.Свертывание границы таблицы CSS:Свойство CSS border-collapse можно использовать для свертывания всех границ таблицы только в одну границу. Пример:
Вывод:
Объяснение: В приведенном выше примере «CITY», а именно: . Здесь ширина таблицы также определена как 50%. Сплошная черная рамка шириной 2 пикселя также добавляется к таблице с помощью свойства границы CSS. Затем все границы сворачиваются в одну границу с помощью свойства CSS border-collapse.Заполнение таблицы CSS:Свойство CSS padding можно использовать для определения заполнения заголовка таблицы и данных таблицы. Пример:
Вывод:
Объяснение: В приведенном выше примере «CITY», а именно: . Здесь ширина таблицы также определена как 50%. Сплошная черная рамка шириной 2 пикселя также добавляется к таблице с помощью свойства границы CSS. Затем добавляется отступ размером 10 пикселей для каждой ячейки в таблице.Таблица CSS: Стилизация четных и нечетных ячеек:Мы можем стилизовать четные и нечетные ячейки таблицы, чтобы отображать разные цвета фона в четных и нечетных ячейках HTML-таблицы с помощью CSS. Пример:
Вывод: Объяснение: В приведенном выше примере создается таблица с тремя ячейками заголовка, а именно: «ИМЯ», «ВОЗРАСТ». |
|---|
