Таблицы CSS
Некоторые свойства CSS широко используются для оформления HTML-таблиц. Ниже описано каждое из них.
В этой главе мы рассмотрим, как оформлять таблицы, включая изменение цветов заголовков и строк.
Свойства оформления таблиц
Вот свойства 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. Остальной текст написан черным цветом.
Слияние границ
Свойство border-collapse определяет, будут ли границы таблицы объединены в одну границу или разделены.
Ширина и высота таблицы
У таблицы также есть свойства width и height. Как видите, мы используем эти свойства в нашем стиле. Свойство width мы используем для всей таблицы, а свойство height — для заголовков. Эти свойства можно задавать в пикселях и процентах.
Горизонтальное выравнивание текста в таблице
Теперь о горизонтальном выравнивании текста в таблице. Как вы уже знаете, ранее мы использовали свойство text-align для задания положения текста. В нашем примере, как видите, мы используем свойство text-align для заголовка. Для этого мы используем "text-align: center". Вы можете прочитать нашу предыдущую главу, чтобы узнать, как его использовать.
Отступы в таблице
Чтобы управлять пространством между границей и содержимым в таблице, используйте свойство 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> по нижнему краю:
Пример вертикального выравнивания содержимого элементов <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>Адаптивные таблицы
Чтобы сделать таблицу адаптивной, оберните ее в контейнер и примените к этому контейнеру overflow-x: auto.
Пример создания адаптивной таблицы:
Пример создания адаптивной таблицы
<!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 можно применять к таблицам?