CSS Таблицы
Как стилизовать таблицы с помощью CSS: цвет, border-collapse, ширина, высота, выравнивание и отступы. Примеры.
Стандартные таблицы HTML, отображаемые браузером, выглядят просто: тонкие двойные рамки, тесные ячейки и отсутствие визуального разделения между строками. CSS превращает их в удобные и наглядные структуры данных. В этой главе рассматриваются свойства, важные для оформления таблиц: рамки, отступы, выравнивание и стилизация строк. В конце приведены типичные паттерны: разделители, подсветка при наведении, зебра-полосатость и горизонтальная прокрутка на небольших экранах.
Каждый пример ниже представляет собой полную, готовую к запуску страницу — откройте её, измените значение и сразу увидите результат.
Свойства для стилизации таблиц
Вот CSS-свойства, используемые для оформления таблицы. Свойства background-color и color задают цвет фона и текста соответственно. Свойство border-collapse объединяет рамки таблицы. Свойство text-align устанавливает горизонтальное выравнивание текста. Кроме того, для управления макетом можно использовать height, width и padding.
Пример стилизации таблицы:
Пример стилизации html-таблицы
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th {
text-align: center;
height: 50px;
}
tbody tr:nth-child(odd) {
background: #ffffff;
}
tbody tr:nth-child(even) {
background: #f4f4f4;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Результат
Разберём приведённый выше код.
Как видно, наша таблица состоит из двух основных разделов: секции <thead> для заголовков и секции <tbody> для строк данных. В таблице используются чёрные рамки, заданные с помощью свойства border. Вы можете выбрать любой цвет и стиль рамки.
Цвет таблицы
Строка заголовка (<thead>) окрашена в синий цвет с белым текстом. Синий фон задаётся свойством background-color, а белый текст — свойством color. Оба свойства применяются к селектору thead, поэтому все ячейки заголовка наследуют их. В ячейках тела таблицы используются стандартные настройки: чёрный текст на белом (или зебра-полосатом) фоне.
Объединение рамок
По умолчанию таблица отрисовывает две рамки между соседними ячейками — по одной для каждой ячейки — что создаёт видимый зазор и удвоенную линию. Свойство border-collapse управляет этим:
border-collapse: separate(по умолчанию) — рамки каждой ячейки остаются отдельными.border-collapse: collapse— объединяет соседние рамки в одну линию, создавая чистый сетчатый вид, использованный во всех примерах на этой странице.
Для таблиц с данными почти всегда стоит использовать collapse.
Ширина и высота таблицы
Используйте width для селектора table, чтобы управлять горизонтальным пространством — width: 100% заставляет таблицу заполнять контейнер, что является наиболее распространённым вариантом. Используйте height для th (или td), чтобы добавить строкам воздуха. Оба свойства принимают пиксели (50px) для фиксированного размера или проценты (100%) для размера относительно родителя. Обратите внимание: процентная height работает только при наличии известной высоты у родителя, поэтому для строк надёжнее использовать фиксированные значения.
Выравнивание текста в таблице
Свойство text-align задаёт горизонтальное выравнивание содержимого ячейки. По умолчанию браузеры выравнивают текст <th> по центру, а <td> — по левому краю. Поэтому text-align задают только для переопределения значений по умолчанию: например, text-align: center для th, чтобы заголовки оставались по центру, или text-align: right для выравнивания числовых столбцов по цифрам. В следующем разделе показан полный пример.
Отступы в таблице
Для управления пространством между рамкой и содержимым ячейки используйте свойство padding для элементов <td> и <th>:
Отступы в html-таблицах
td, th {
padding: 15px;
}Горизонтальное выравнивание с помощью text-align
С помощью CSS-свойства text-align можно задать горизонтальное выравнивание содержимого элементов <th> или <td>.
По умолчанию содержимое элементов <td> выравнивается по левому краю, а содержимое элементов <th> — по центру. В примере ниже содержимое элементов <th> и <td> выровнено по правому краю:
Пример выравнивания содержимого элементов <th> и <td> по правому краю:
Пример выравнивания содержимого элементов <th> и <td> по правому краю
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: right;
}
</style>
</head>
<body>
<h2>Horizontal alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Whatson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Вертикальное выравнивание с помощью vertical-align
С помощью CSS-свойства vertical-align можно задать вертикальное выравнивание содержимого элементов <th> или <td>.
По умолчанию содержимое как <th>, так и <td> выравнивается по вертикали по центру.
В примере ниже содержимое элементов <td> выровнено по нижнему краю:
Пример вертикального выравнивания содержимого элементов <td> по нижнему краю:
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
text-align: right;
padding-right: 10px;
}
</style>
</head>
<body>
<h2>Vertical alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$300</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Горизонтальные разделители
Добавив CSS-свойство border-bottom к элементам <td> и <th>, можно создать горизонтальные разделители.
Пример создания горизонтальных разделителей:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
</style>
</head>
<body>
<h2>Horizontal dividers example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Таблица с подсветкой при наведении
Использование CSS-псевдокласса :hover для элемента <tr> делает таблицу интерактивной при наведении курсора.
Пример создания таблицы с подсветкой при наведении:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
tr {
background-color: #f5f5f5;
}
th,
td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ccc;
}
tr:hover {
background-color: #cdcdcd;
}
</style>
</head>
<body>
<h2>Hoverable table example</h2>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Таблица с зебра-полосатостью
С помощью селектора nth-child() и свойства CSS background-color, применённого к нечётным (чётным) строкам таблицы, можно создать таблицу с чередующейся раскраской строк.
Пример создания таблицы с зебра-полосатостью:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Striped table example</h2>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$250</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Адаптивные таблицы
Широкая таблица может выходить за пределы узких экранов и нарушать макет страницы. Чтобы сделать таблицу адаптивной, оберните её в контейнер (здесь — <div>) и примените к этому контейнеру overflow-x: auto. Когда таблица шире viewport, контейнер показывает горизонтальную полосу прокрутки вместо растягивания страницы — строки остаются нетронутыми, а пользователь просто прокручивает вбок.
Пример создания адаптивной таблицы:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px 5px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Responsive table example</h2>
<div>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Связанные темы
- CSS border-collapse — объединение или разделение рамок ячеек.
- CSS nth-child() — выбор нечётных/чётных строк для зебра-полосатости.
- CSS :hover — подсветка строки под курсором.
- CSS vertical-align — выравнивание содержимого ячейки по верху, середине или низу.
- HTML Tables — разметка, к которой применяются эти стили.