Отступы и Интервалы Таблицы HTML
Таблицы HTML позволяют настраивать внутренние отступы каждой ячейки и промежутки между ячейками.
Таблица HTML - Внутренний Отступ Ячейки
Внутренний отступ ячейки — это пространство между краями ячейки и её содержимым. По умолчанию он равен 0. Добавьте отступ с помощью свойства CSS padding. Вы также можете задать каждую сторону отдельно с помощью padding-top, padding-bottom, padding-left и padding-right.
Все стороны
15 пикселей отступа со всех сторон ячеек.
Prompt
Таблица с рамками с отступом (padding) 15px внутри всех ячеек с помощью CSS-свойства padding на 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;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Каждая сторона
Разный отступ сверху, снизу, слева и справа.
Prompt
Таблица с рамками, задающая отступ (padding) отдельно для каждой стороны ячеек: 10px сверху, 20px снизу, 30px слева, 40px справа, с примером таблицы.
Результат: полная 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;
}
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Таблица HTML - Интервал между Ячейками
Интервал между ячейками — это пространство между ячейками. По умолчанию он равен 2 пикселям. Измените его с помощью свойства CSS border-spacing на элементе table.
Пример
30 пикселей пространства между ячейками.
Prompt
Таблица с рамками с промежутком 30px между ячейками с помощью CSS-свойства border-spacing на элементе table, с примером таблицы.
Результат: полная 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;
}
table {
border-spacing: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>