Таблицы CSS
HTML-таблицы можно значительно улучшить с помощью CSS.
Пример
Таблица, оформленная с объединёнными границами, отступами, чередующимися строками и цветным заголовком.
<style> объедините границы таблицы, сделайте её на всю ширину, задайте th/td светлые границы и внутренний отступ с текстом, выровненным по левому краю, затените чётные строки светло-серым, а строке заголовка задайте зелёный фон с белым текстом. Добавьте таблицу с колонками Компания, Контакт, Страна и несколькими строками.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<table>
<tr><th>Company</th><th>Contact</th><th>Country</th></tr>
<tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr>
<tr><td>Berglunds snabbkop</td><td>Christina Berglund</td><td>Sweden</td></tr>
<tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr>
<tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr>
</table>
</body>
</html>
Границы таблицы CSS
Свойство border задаёт ширину, стиль и цвет границ таблицы.
Это сокращённая запись для border-width, border-style (обязательно) и border-color.
Пример
Сплошная граница 1px задана для элементов <table>, <th> и <td>.
<style> задайте элементам <table>, <th> и <td> сплошную границу 1px. Добавьте небольшую таблицу с заголовком и двумя строками данных.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
Цвет границы таблицы CSS
Вы также можете задать цвет границ таблицы.
Пример
Сплошная зелёная граница 1px задана для элементов table, th и td.
<style> задайте элементам <table>, <th> и <td> сплошную зелёную границу 1px. Добавьте небольшую таблицу с заголовком и двумя строками данных.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid green;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
Почему двойные границы?
В примерах выше у таблиц двойные границы. Это происходит потому, что элементы <table>, <th> и <td> имеют собственные отдельные границы. В следующем примере показано, как их убрать.
Объединение границ таблицы CSS
Свойство border-collapse определяет, объединяются ли границы таблицы в одну границу или остаются раздельными, как в стандартном HTML.
Оно может принимать следующие значения:
separate— значение по умолчанию. Каждая ячейка показывает свои собственные границы.collapse— границы объединяются в одну там, где это возможно.
Пример
Установка border-collapse: collapse убирает двойные границы.
<style> задайте table, th и td сплошную границу 1px и установите border-collapse таблицы в collapse, чтобы двойные границы объединились в одну. Добавьте небольшую таблицу.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
Внутренний отступ таблицы CSS
Чтобы управлять расстоянием между границей и содержимым ячеек, используйте свойство padding на элементах <td> и <th>.
Пример
Каждая ячейка получает внутренний отступ 10px.
<style> задайте table/th/td сплошную границу 1px с объединёнными границами, а th и td — внутренний отступ 10px. Добавьте таблицу с колонками Имя, Фамилия и Сбережения и несколькими строками.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
Расстояние между границами CSS
Свойство border-spacing задаёт расстояние между границами соседних ячеек.
Примечание: Это работает только когда border-collapse установлено в separate.
Пример
Ячейки расположены на расстоянии 15px друг от друга.
<style> задайте table/th/td сплошную границу 1px, а на таблице установите border-collapse в separate и border-spacing в 15px. Добавьте небольшую таблицу.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
}
table {
border-collapse: separate;
border-spacing: 15px;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
Внешняя граница таблицы CSS
Если вы хотите границу только вокруг таблицы, а не внутри неё, задайте свойство border только на элементе <table>.
Пример
Только у таблицы есть граница; у ячеек её нет.
<style> задайте только элементу <table> сплошную границу 1px (без границы на th или td). Добавьте небольшую таблицу.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border: 1px solid;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>