Таблицы
Как устроены таблицы в HTML и как их правильно верстать.
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Иногда для простоты восприятия контент нужно оформить в виде таблицы.
Таблица состоит из строк и столбцов и предназначена для структурирования данных. Часто в таблицах размещают однотипные данные. Пример таблицы из школьных лет — классный журнал. Каждая строка это ученик. Колонки — даты. Напротив каждой фамилии можно проставить оценку за урок, прошедший в конкретную дату.
В HTML для создания таблиц существует набор семантических тегов:
Пример
Скопировать ссылку «Пример» Скопировано
Создадим таблицу с первыми тремя местами в топ-250 лучших фильмов:
Место Оценка Название фильма Год выхода 1 9.1 Зелёная миля 1999 2 9.1 Побег из Шоушенка 1994 3 8.6 Властелин колец: Возвращение Короля 2003 table> thead> tr> th>Местоth> th>Оценкаth> th>Название фильмаth> th>Год выходаth> tr> thead> tbody> tr> td>1td> td>9.1td> td>Зелёная миляtd> td>1999td> tr> tr> td>2td> td>9.1td> td>Побег из Шоушенкаtd> td>1994td> tr> tr> td>3td> td>8.6td> td>Властелин колец: Возвращение Короляtd> td>2003td> tr> tbody> table>
Все три тега, перечисленные в этом разделе, не имеют дефолтных стилей и не влияют на внешний вид таблицы. Только на семантику.
Если вы не используете ни один из этих тегов, то браузер самостоятельно добавит при отрисовке таблицы.
Скопировать ссылку «caption» Скопировано
Если нужно подписать таблицу, дать ей определение, то можно использовать парный тег . В него помещается общая информация о таблице. Подробнее в статье про .
Например, для нашей таблицы прекрасно подошло бы описание «Цены на флагманские модели iPhone и Xiaomi». Добавим его в разметку (часть данных опущена для краткости):
Цены на флагманские модели iPhone и Xiaomi Модель Цена Средняя цена: $758.8 table> caption>Цены на флагманские модели iPhone и Xiaomicaption> thead> tr> th>Модельth> th>Ценаth> tr> thead> tbody> tbody> tbody> tbody> tfoot> tr> td>Средняя цена:td> td>$758.8td> tr> tfoot> table>
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
Помимо глобальных атрибутов при работе с таблицами вам могут очень пригодиться атрибуты colspan и rowspan . Оба атрибута предназначены для объединения ячеек. colspan нужен для объединения ячеек из 2 или более столбцов, а rowspan для объединения ячеек из 2 или более рядов.
Цены на флагманские модели iPhone и Xiaomi Производитель Модель Цена iPhone 12 Pro $999 12 $799 12 mini $699 Xiaomi Mi 10 $768 Black Shark 3 128 Gb $529 Средняя цена: $758.8 table> caption>Цены на флагманские модели iPhone и Xiaomicaption> thead> tr> th>Производительth> th>Модельth> th>Ценаth> tr> thead> tbody> tr> td rowspan="3">iPhonetd> td>12 Protd> td>$999td> tr> tr> td>12td> td>$799td> tr> tr> td>12 minitd> td>$699td> tr> tbody> tbody> tr> td rowspan="2">Xiaomitd> td>Mi 10td> td>$768td> tr> tr> td>Black Shark 3 128 Gbtd> td>$529td> tr> tbody> tfoot> tr> td>Средняя цена:td> td>$758.8td> tr> tfoot> table>
Но теперь в итоговой строке количество ячеек не совпадает с общим числом колонок в таблице. Растянем первую ячейку на две колонки:
Цены на флагманские модели iPhone и Xiaomi Производитель Модель Цена iPhone 12 Pro $999 12 $799 12 mini $699 Xiaomi Mi 10 $768 Black Shark 3 128 Gb $529 Средняя цена: $758.8 table> caption>Цены на флагманские модели iPhone и Xiaomicaption> thead> tr> th>Производительth> th>Модельth> th>Ценаth> tr> thead> tbody> tr> td rowspan="3">iPhonetd> td>12 Protd> td>$999td> tr> tr> td>12td> td>$799td> tr> tr> td>12 minitd> td>$699td> tr> tbody> tbody> tr> td rowspan="2">Xiaomitd> td>Mi 10td> td>$768td> tr> tr> td>Black Shark 3 128 Gbtd> td>$529td> tr> tbody> tfoot> tr> td colspan="2">Средняя цена:td> td>$758.8td> tr> tfoot> table>
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 У таблицы нет встроенных стилей для отображения границ ячеек. Не удивляйтесь, если, написав разметку, вы не увидите рамки. Используйте CSS-свойство border .
💡 Внимательно считайте количество ячеек в строках таблицы. Оно должно быть одинаковым. Особенно важно это делать, если растягиваете ячейки по горизонтали или вертикали. Не удивляйтесь, если снизу таблицы или сбоку в одной из строк внезапно будет торчать ячейка, нарушая красоту вашей таблицы. Вы просто где-то забыли удалить лишнюю ячейку.
💡 Средствами CSS можно создать конструкцию, визуально максимально похожую на таблицу, но лучше так не делать. Важно не только внешнее сходство, но и смысловая нагрузка. Проще всего добиться совпадения смысла и визуального сходства, используя теги из этой статьи.
💡 Ширина таблицы по умолчанию подстраивается под контент внутри, если не задавать дополнительные CSS-свойства.
Это приводит к определённым сложностям на адаптивных сайтах. Если контент не помещается на маленький экран, то таблица не сжимается, у неё появляется горизонтальный скролл.
У этой проблемы есть несколько потенциальных решений: скрывать не первостепенную информацию для пользователей мобильных устройств или перестраивать отображение таблицы, например, при помощи свойства display .
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Частый дизайнерский приём — подсветка строк таблицы через одну. Это помогает считывать длинные таблицы, глазу есть за что зацепиться.
Например, сделаем каждую вторую строку с коричневым фоном. Для этого понадобится всего одно CSS-правило с псевдоклассом :nth — child ( ) :
tr:nth-child(odd) background-color: #663613;>tr:nth-child(odd) background-color: #663613; >
На всякий случай подстрахуемся и ограничим область раскрашивания только телом таблицы, исключим шапку и подвал.
tbody tr:nth-child(odd) background-color: #663613;>tbody tr:nth-child(odd) background-color: #663613; >
🛠 Можно сделать так, чтобы строка с заголовками колонок прилипала при прокрутке длинной таблицы. Это удобно, если данных много и пользователь может просто забыть, в какой колонке какие данные.
th position: -webkit-sticky; position: sticky; top: 0; z-index: 1;>th position: -webkit-sticky; position: sticky; top: 0; z-index: 1; >
Не забудьте добавить position : relative для родителя. Заодно подстрахуемся и сделаем прилипающими только заголовки в шапке таблицы.
table position: relative;> thead th position: sticky; position: -webkit-sticky; top: 0; z-index: 1;>table position: relative; > thead th position: sticky; position: -webkit-sticky; top: 0; z-index: 1; >
Задайте фон заголовкам, чтобы текст ячеек не был виден при прокрутке. А чтобы избавиться от линий между ячейками, зададим для всей таблицы свойство border — collapse : collapse :
table position: relative; border-collapse: collapse;> thead th position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: #FF8630;>table position: relative; border-collapse: collapse; > thead th position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: #FF8630; >
Хотя в целом поддержка хорошая, не во всех браузерах будет работать это позиционирование в таблицах. Подробнее смотрите на Can I use.
Создание таблицы в HTML
В языке разметки HTML таблицы используются не только для представления каких-либо данных в виде строк и столбцов, но и как средство форматирования страниц и задания расположения различных элементов.
Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.
Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные — в правый.
Итак, как сделать таблицу в HTML?
Создадим простейшую таблицу, содержащую три ячейки одной строки с помощью приведенного ниже кода:
| Столбец 1 | Столбец 2 | Столбец 3 |
В окне браузера только что созданная таблица выглядит следующим образом:
Таблица начинается с тега
. Всё содержимое таблицы описывается сверху вниз по строкам, каждая из которых начинается с тега
.
Ячейки строки описываются слева направо с помощью тегов
. В ячейку вы можете поместить как текст, так и графические файлы и даже другие таблицы.
Границы и рамки
| Столбец 1 | Столбец 2 | Столбец 3 |
Цвет фона и текста
- background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
- bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.
Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег .
| Ячейка 1 | |
| Ячейка 3 | Ячейка 4 |
Отступы таблицы в HTML
- cellspacing — расстояние между границами соседних ячеек;
- cellpading — расстояние между содержимым и границей ячейки.
| Ячейка 1 | |
| background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3 | Ячейка 4 |
Визуальное отображение данного кода в браузере таково:
Выравнивание таблицы в HTML
Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное ( align ) и вертикальное ( valign ) выравнивание текста в таблице HTML.
Параметр align может иметь следующие значения:
- left — выравнивание по левой границе;
- right — выравнивание по правой границе;
- center — выравнивание по центру.
Параметр valign может иметь такие значения:
- bottom — выравнивание по нижней границе;
- top — выравнивание по верхней границы;
- middle — выравнивание посередине.
Как сделать таблицу по центру в HTML? С помощью упомянутого значения center .
Вставка изображения в HTML таблицу
 | Содержимое 2 ячейки |
| Содержимое 3 ячейки | Содержимое 4 ячейки |
Дополнительными атрибутами в данном случае являются:
- width — ширина;
- height — высота;
- alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
- title — подпись к картинке;
- align — горизонтальное выравнивание;
- valign — вертикальное выравнивание.
Кроме того, облачив изображение в специальный тег , его можно использовать в качестве ссылки.
Объединение ячеек в HTML таблице
Объединение столбцов одной строчки выглядит так:
| Текст 2 | ||
| Текст 2 | Текст 3 | Текст 4 |
У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:
| Текст 1 | Текст 2 |
| Текст 3 | |
| Текст 4 |
Генераторы HTML таблиц
Разумеется, создавать HTML таблицы можно самостоятельно, прописывая вручную все теги HTML. Таблица в данном случае рискует быть составленной некорректно, поскольку человеческий фактор при работе с большими объёмами информации даёт о себе знать.
Уже давно существуют специальные генераторы таблиц HTML, которые призваны сэкономить ваше время. С их помощью вы можете легко создать таблицу с множеством настроек.
Одним из наиболее распространенных генераторов таблиц является сервис http://www.2createawebsite.com/build/table_generator.html . ОН является зарубежным, настроек для генерации таблицы здесь самые необходимые — количество столбцов, строк, ширина, размер, цвет границы.
Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:
Генератор таблиц html также имеет не слишком много настроек, однако цвет для фона и границы таблицы вы можете подобрать из палитры цветов.
Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:
Таким образом, таблица является не только важным статистическим элементом во всех сферах жизни, но и неотъемлемой частью веб-дизайна и вёрстки.
Если вы решили воспользоваться услугами генератора таблиц, стоит внимательно подойти к выбору подходящего вам сервиса, опробовав самые популярные из них и выбрав наилучший.