Таблицы в html

paulukevich

Содержание

1. Простая таблица
2. Границы таблицы
3. Заголовки таблицы
4. Объединение столбцов - colspan
5. Объединение строк - rowspan
6. Название таблицы - caption
7. Группировка строк - thead, tbody и tfoot
8. Оформление таблицы с помощью CSS
9. Адаптивная таблица
10. Заключение

Таблицы в HTML используются для представления информации в виде строк и столбцов. С их помощью можно создавать расписания, прайс-листы, списки товаров и другие структурированные данные.

Для создания таблицы используется тег <table>. Строки создаются тегом <tr>, обычные ячейки - <td>, а заголовочные - <th>.

Рассмотрим создание таблиц на примерах.

Простая таблица

Создадим таблицу из двух строк и трёх столбцов. Для создания таблицы используется тег <table>, для строк - <tr>, для ячеек - <td>.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Простая таблица</title>
</head>
<body>
<h2>Языки программирования</h2>
<table>
<tr><td>PHP</td><td>JavaScript</td><td>Python</td></tr>
<tr><td>Java</td><td>C++</td><td>Ruby</td></tr>
</table>
</body>
</html>

Посмотреть пример

Пример кода

Таблица содержит две строки и три столбца. По умолчанию видимые границы между ячейками отсутствуют.

Границы таблицы

Для отображения границ воспользуемся свойством CSS border. Свойство border-collapse: collapse объединяет соседние границы ячеек.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Границы таблицы</title>
</head>
<body>
<style>
table { border-collapse: collapse; }
td { border: 1px solid #333; padding: 10px; }
</style>
<table>
<tr><td>PHP</td><td>JavaScript</td><td>Python</td></tr>
<tr><td>Java</td><td>C++</td><td>Ruby</td></tr>
</table>
</body>
</html>

Посмотреть пример

Пример кода

У каждой ячейки появилась граница толщиной 1 пиксель, а текст отделён от границы внутренними отступами.

Заголовки таблицы

Заголовочные ячейки создаются тегом <th>. Для обозначения заголовков столбцов полезно указывать атрибут scope="col".

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовки таблицы</title>
</head>
<body>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 8px; }
</style>
<table>
<tr><th scope="col">Имя</th><th scope="col">Возраст</th><th scope="col">Город</th></tr>
<tr><td>Александр</td><td>25</td><td>Рига</td></tr>
<tr><td>Мария</td><td>28</td><td>Юрмала</td></tr>
</table>
</body>
</html>

Посмотреть пример

Пример кода

Первая строка содержит заголовки столбцов, а остальные строки - данные.

Объединение столбцов - colspan

Атрибут colspan позволяет одной ячейке занимать несколько столбцов.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Объединение столбцов - colspan</title>
</head>
<body>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 10px; }
</style>
<table>
<tr><th colspan="3">Понедельник</th></tr>
<tr><th>Время</th><th>Предмет</th><th>Кабинет</th></tr>
<tr><td>09:00</td><td>Математика</td><td>101</td></tr>
<tr><td>10:00</td><td>Информатика</td><td>205</td></tr>
</table>
</body>
</html>

Посмотреть пример

Пример кода

Ячейка с названием дня занимает сразу три столбца благодаря атрибуту colspan="3".

Объединение строк - rowspan

Атрибут rowspan позволяет одной ячейке занимать несколько строк.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Объединение строк - rowspan</title>
</head>
<body>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 10px; }
</style>
<table>
<tr><th>День</th><th>Предмет</th><th>Время</th></tr>
<tr><td rowspan="2">Понедельник</td><td>Математика</td><td>09:00</td></tr>
<tr><td>Информатика</td><td>10:00</td></tr>
<tr><td>Вторник</td><td>Физика</td><td>09:00</td></tr>
</table>
</body>
</html>

Посмотреть пример

Пример кода

Ячейка «Понедельник» объединяет две строки с помощью rowspan="2".

Название таблицы - caption

Тег <caption> добавляет название таблицы. Он размещается непосредственно внутри элемента <table>.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Название таблицы - caption</title>
</head>
<body>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 10px; }
caption { font-weight: bold; margin-bottom: 10px; }
</style>
<table>
<caption>Список товаров</caption>
<tr><th>Товар</th><th>Цена</th></tr>
<tr><td>Клавиатура</td><td>25 €</td></tr>
<tr><td>Мышь</td><td>15 €</td></tr>
</table>
</body>
</html>

Посмотреть пример

Пример кода

Над таблицей отображается её название «Список товаров».

Группировка строк - thead, tbody и tfoot

Для логического разделения таблицы используются <thead> (заголовок), <tbody> (основные данные) и <tfoot> (итоги).

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Группировка строк - thead, tbody и tfoot</title>
</head>
<body>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 10px; }
thead { background: #eee; }
tfoot { font-weight: bold; }
</style>
<table>
<thead><tr><th>Товар</th><th>Количество</th><th>Сумма</th></tr></thead>
<tbody>
<tr><td>Клавиатура</td><td>2</td><td>50 €</td></tr>
<tr><td>Мышь</td><td>3</td><td>45 €</td></tr>
</tbody>
<tfoot><tr><td colspan="2">Итого</td><td>95 €</td></tr></tfoot>
</table>
</body>
</html>

Посмотреть пример

Пример кода

Заголовки, данные и итоговая строка выделены в отдельные смысловые части.

Оформление таблицы с помощью CSS

С помощью CSS можно менять цвет заголовков, отступы и фон строк. Псевдокласс :nth-child(even) выделяет чётные строки, а :hover - строку под курсором.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Оформление таблицы с помощью CSS</title>
</head>
<body>
<style>
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 12px; text-align: left; }
th { background: #eee; }
tbody tr:nth-child(even) { background: #f5f5f5; }
tbody tr:hover { background: #e0f0ff; }
</style>
<table>
<thead><tr><th>Название</th><th>Категория</th><th>Цена</th></tr></thead>
<tbody>
<tr><td>Ноутбук</td><td>Электроника</td><td>750 €</td></tr>
<tr><td>Монитор</td><td>Электроника</td><td>200 €</td></tr>
<tr><td>Клавиатура</td><td>Аксессуары</td><td>35 €</td></tr>
</tbody>
</table>
</body>
</html>

Посмотреть пример

Пример кода

Чётные строки имеют другой фон, а при наведении курсора строка подсвечивается.

Адаптивная таблица

На небольших экранах широкая таблица может выходить за пределы страницы. Обернём её в блок с горизонтальной прокруткой.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная таблица</title>
</head>
<body>
<style>
.table-responsive { width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 600px; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }
</style>
<div class="table-responsive">
<table>
<tr><th>Модель</th><th>Процессор</th><th>Память</th><th>Накопитель</th></tr>
<tr><td>Компьютер 1</td><td>Intel Core i5</td><td>16 GB</td><td>512 GB SSD</td></tr>
<tr><td>Компьютер 2</td><td>AMD Ryzen 7</td><td>32 GB</td><td>1 TB SSD</td></tr>
</table>
</div>
</body>
</html>

Посмотреть пример

Пример кода

Если экран уже 600 пикселей, таблицу можно прокручивать по горизонтали.

Заключение

Мы научились создавать таблицы в HTML, добавлять заголовки, объединять ячейки, оформлять таблицы с помощью CSS и адаптировать их для мобильных устройств.

Таблицы следует использовать для представления табличных данных. Для построения макета страницы лучше подходят CSS Flexbox и Grid.