Границы Таблиц HTML
Таблицы HTML могут иметь границы разных стилей и форм.
Как Добавить Границу
Чтобы добавить границу, используйте свойство CSS border на элементах table, th и td.
Пример
Таблица с чёрной границей на таблице и ячейках.
Prompt
Таблица, оформленная с помощью CSS так, что table, th и td имеют сплошную чёрную рамку толщиной 1px, с примерной таблицей компаний.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Компания</th>
<th>Контакт</th>
<th>Страна</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Германия</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Мексика</td>
</tr>
</table>
</body>
</html>
Объединённые Границы Таблицы
Чтобы избежать двойных границ, установите свойство CSS border-collapse в значение collapse. Это объединяет границы в одну линию.
Пример
Таблица с объединёнными, однолинейными границами.
Prompt
Таблица со сплошными чёрными границами толщиной 1px и border-collapse, установленным в collapse, благодаря чему двойные границы сливаются в одинарные линии.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Компания</th>
<th>Контакт</th>
<th>Страна</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Германия</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Мексика</td>
</tr>
</table>
</body>
</html>
Стилизация Границ Таблицы
Если дать каждой ячейке цвет фона и сделать границу того же цвета, что и фон страницы, границы будут выглядеть невидимыми.
Пример
Ячейки с цветным фоном и подходящими белыми границами.
Prompt
Таблица, у которой границы белые (совпадают с фоном страницы), а каждая ячейка имеет цветной фон (#96D4D4), создавая эффект невидимых границ. Используется border-collapse collapse.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>
<body>
<table>
<tr>
<th>Компания</th>
<th>Контакт</th>
<th>Страна</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Германия</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Мексика</td>
</tr>
</table>
</body>
</html>
Скруглённые Границы Таблицы
Свойство border-radius придаёт границам скруглённые углы. Не указывайте table в селекторе, чтобы пропустить границу вокруг всей таблицы.
Таблица и ячейки со скруглением
Скруглённые углы на таблице и ячейках.
Prompt
Таблица со сплошными чёрными границами толщиной 1px и скруглёнными углами с помощью border-radius 10px на table, th и td.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Компания</th>
<th>Контакт</th>
<th>Страна</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Германия</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Мексика</td>
</tr>
</table>
</body>
</html>
Только ячейки со скруглением
Скруглённые углы только на ячейках, без внешней границы таблицы.
Prompt
Таблица, где только ячейки (th и td) имеют скруглённые чёрные границы толщиной 1px, без применения стилей к элементу table, из-за чего внешняя граница таблицы отсутствует.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Компания</th>
<th>Контакт</th>
<th>Страна</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Германия</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Мексика</td>
</tr>
</table>
</body>
</html>
Пунктирные Границы Таблицы
Свойство border-style задаёт внешний вид границы. Допустимые значения: dotted, dashed, solid, double, groove, ridge, inset, outset, none и hidden.
Пример
Ячейки с пунктирной границей.
Prompt
Таблица, ячейки которой используют пунктирную границу через свойство border-style, установленное в dotted на th и td.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
th, td {
border-style: dotted;
}
</style>
</head>
<body>
<table>
<tr>
<th>Компания</th>
<th>Контакт</th>
<th>Страна</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Германия</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Мексика</td>
</tr>
</table>
</body>
</html>
Цвет Границы
Свойство border-color задаёт цвет границы.
Пример
Ячейки с цветными границами.
Prompt
Таблица, у которой границы ячеек окрашены в #96D4D4 с помощью свойства border-color на th и td.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
th, td {
border-color: #96D4D4;
}
</style>
</head>
<body>
<table>
<tr>
<th>Компания</th>
<th>Контакт</th>
<th>Страна</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Германия</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Мексика</td>
</tr>
</table>
</body>
</html>