В HTML для создания таблиц существует набор семантических тегов, с помощью которых формируется таблица. Один раз напишите «ручками» описание таблицы и это само запомнится навсегда.
| Тег | Описание тега | |
|---|---|---|
| <table> | тег, позволяющий создать контейнер таблицы | |
| <tr> | тег для создания строки (ряда) таблицы, используемый совместно с <td> или <th> | |
| <td> | тег обычной ячейки таблицы | |
| <th> | тег ячейки-заголовка таблицы | |
| <col> | тег, позволяющий создать колонки для таблицы | |
| <colgroup> | тег, который группирует колонки | |
| <thead> | тег для верхнего колонтитула таблицы | |
| <tbody> | тег основной части таблицы | |
| <tfoot> | тег для нижнего колонтитула таблицы | |
| <caption> | используйте этот тег, чтобы задать общий заголовок для таблицы | |
| атрибуты тегов | ||
| colspan | показывает количество ячеек в строке для объединения по горизонтали | |
| rowspan | показывает количество ячеек в столбце для объединения по вертикали | |
| span | количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1 | |
| border | ширина границ таблицы в пикселях, по умолчанию: 0 – в таком случае обводка таблицы не видна | |
| cellpadding | отступ от границ ячеек до их содержимого | |
| cellspacing | отступ между границами ячеек | |
На самом деле — все очень просто и этих инструментов вполне хватает для того, что конструировать таблицы любой монструозности. )
Подсказка: Для новой таблицы значения по умолчанию указаны ниже:
- display: table;
- border-collapse: separate;
- box-sizing: border-box;
- text-indent: initial;
- white-space: normal;
- line-height: normal;
- font-weight: normal;
- font-size: medium;
- font-style: normal;
- color: -internal-quirk-inherit;
- text-align: start;
- border-spacing: 2px;
- border-color: grey;
- font-variant: normal;
Mexanik
Чтобы добавить визуальные эффекты, используйте CSS-стили – с их помощью можно как увеличить размер обводки границ, так и задать цвет фона, размер и шрифт текста.
Создание HTML-таблицы – это дело нескольких минут. Главное – разобраться с базовыми понятиями и попрактиковаться на нескольких примерах. В последующем создание таблицы не будет вызывать у вас никаких проблем.
Создадим таблицу с первыми тремя местами в топ-250 лучших фильмов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<table> <thead> <tr> <th>Место</th> <th>Оценка</th> <th>Название фильма</th> <th>Год выхода</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>9.1</td> <td>Зелёная миля</td> <td>1999</td> </tr> <tr> <td>2</td> <td>9.1</td> <td>Побег из Шоушенка</td> <td>1994</td> </tr> <tr> <td>3</td> <td>8.6</td> <td>Властелин колец: Возвращение Короля</td> <td>2003</td> </tr> </tbody> </table> |
<tfoot>
Тег нужен для строки «Итого» — некой строки с итогом данных таблицы. В таблице может быть только один блок .
Создание HTML-таблицы – это дело нескольких минут. Главное – разобраться с базовыми понятиями и попрактиковаться на нескольких примерах. В последующем создание таблицы не будет вызывать у вас никаких проблем.
Браузер всегда отрисовывает <tfoot> внизу таблицы, даже если этот блок идёт в разметке не последним (хоть это и не очень логично).
Если по какой-то причине вы не использовали в таблице <thead> или <tbody>, то футер будет отрисован после всех <tr>.
<По семантике этот тег похож на <footer>, только в пределах таблицы.
Добавим в нашу таблицу строку со средней ценой всех телефонов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<table> <thead> <tr> <th>Модель</th> <th>Цена</th> </tr> </thead> <tbody> <tr> <td>iPhone 12 Pro</td> <td>$999</td> </tr> <tr> <td>iPhone 12</td> <td>$799</td> </tr> <tr> <td>iPhone 12 mini</td> <td>$699</td> </tr> </tbody> <tbody> <tr> <td>Xiaomi Mi 10</td> <td>$768</td> </tr> <tr> <td>Xiaomi Black Shark 3 128 Gb</td> <td>$529</td> </tr> </tbody> <tfoot> <tr> <td>Средняя цена:</td> <td>$758.8</td> </tr> </tfoot> </table> |
<caption>
Если нужно подписать таблицу, дать ей определение, то можно использовать парный тег <caption>. В него помещается общая информация о таблице. Подробнее в статье про <caption>.
Например, для нашей таблицы прекрасно подошло бы описание «Цены на флагманские модели iPhone и Xiaomi». Добавим его в разметку (часть данных опущена для краткости):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table> <caption>Цены на флагманские модели iPhone и Xiaomi</caption> <thead> <tr> <th>Модель</th> <th>Цена</th> </tr> </thead> <tbody> <!-- Данные по iPhone --> </tbody> <tbody> <!-- Данные по Xiaomi --> </tbody> <tfoot> <tr> <td>Средняя цена:</td> <td>$758.8</td> </tr> </tfoot> </table> |
Атрибуты
Помимо глобальных атрибутов при работе с таблицами вам могут очень пригодиться атрибуты colspan и rowspan. Оба атрибута предназначены для объединения ячеек. colspan нужен для объединения ячеек из 2 или более столбцов, а rowspan для объединения ячеек из 2 или более рядов.
Разделим описание телефонов на производителя и модель. Производитель будет повторяться, объединим ячейки с его названием во всех рядах. Добавим один заголовок «Производитель», а в первые <tr> каждого из <tbody> — название модели, и применим атрибут rowspan. Теперь эти ячейки занимают собой пространство в 3 и 2 ряда соответственно.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<table> <caption>Цены на флагманские модели iPhone и Xiaomi</caption> <thead> <tr> <th>Производитель</th> <th>Модель</th> <th>Цена</th> </tr> </thead> <tbody> <tr> <td rowspan="3">iPhone</td> <td>12 Pro</td> <td>$999</td> </tr> <tr> <td>12</td> <td>$799</td> </tr> <tr> <td>12 mini</td> <td>$699</td> </tr> </tbody> <tbody> <tr> <td rowspan="2">Xiaomi</td> <td>Mi 10</td> <td>$768</td> </tr> <tr> <td>Black Shark 3 128 Gb</td> <td>$529</td> </tr> </tbody> <tfoot> <tr> <td>Средняя цена:</td> <td>$758.8</td> </tr> </tfoot> </table> |
Но теперь в итоговой строке количество ячеек не совпадает с общим числом колонок в таблице. Растянем первую ячейку на две колонки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<table> <caption>Цены на флагманские модели iPhone и Xiaomi</caption> <thead> <tr> <th>Производитель</th> <th>Модель</th> <th>Цена</th> </tr> </thead> <tbody> <tr> <td rowspan="3">iPhone</td> <td>12 Pro</td> <td>$999</td> </tr> <tr> <td>12</td> <td>$799</td> </tr> <tr> <td>12 mini</td> <td>$699</td> </tr> </tbody> <tbody> <tr> <td rowspan="2">Xiaomi</td> <td>Mi 10</td> <td>$768</td> </tr> <tr> <td>Black Shark 3 128 Gb</td> <td>$529</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Средняя цена:</td> <td>$758.8</td> </tr> </tfoot> </table> |
Подсказки
Не обошлось и здесь без маленьких хитростей, так сказать «life hack»ов.
💡 У таблицы нет встроенных стилей для отображения границ ячеек. Не удивляйтесь, если, написав разметку, вы не увидите рамки. Используйте CSS-свойство border.
Задать границы элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому задавайте их тегам <table>, <th> или <td>.
💡 Внимательно считайте количество ячеек в строках таблицы. Оно должно быть одинаковым. Особенно важно это делать, если растягиваете ячейки по горизонтали или вертикали. Не удивляйтесь, если снизу таблицы или сбоку в одной из строк внезапно будет торчать ячейка, нарушая красоту вашей таблицы. Вы просто где-то забыли удалить лишнюю ячейку.
💡 Средствами CSS можно создать конструкцию, визуально максимально похожую на таблицу, но лучше так не делать. Важно не только внешнее сходство, но и смысловая нагрузка. Проще всего добиться совпадения смысла и визуального сходства, используя теги из этой статьи.
💡 Ширина таблицы по умолчанию подстраивается под контент внутри, если не задавать дополнительные CSS-свойства.
Это приводит к определённым сложностям на адаптивных сайтах. Если контент не помещается на маленький экран, то таблица не сжимается, у неё появляется горизонтальный скролл.
У этой проблемы есть несколько потенциальных решений: скрывать не первостепенную информацию для пользователей мобильных устройств или перестраивать отображение таблицы, например, при помощи свойства display.
На практике Алёна Батицкая советует :
🛠 Частый дизайнерский приём — подсветка строк таблицы через одну. Это помогает считывать длинные таблицы, глазу есть за что зацепиться.
Например, сделаем каждую вторую строку с коричневым фоном. Для этого понадобится всего одно CSS-правило с псевдоклассом :nth:
|
1 2 3 |
tr:nth-child(odd) { background-color: #663613; } |
На всякий случай подстрахуемся и ограничим область раскрашивания только телом таблицы, исключим шапку и подвал.
|
1 2 3 |
tbody tr:nth-child(odd) { background-color: #663613; } |
Можно сделать так, чтобы строка с заголовками колонок прилипала при прокрутке длинной таблицы. Это удобно, если данных много и пользователь может просто забыть, в какой колонке какие данные.
Это довольно просто сделать при помощи position. Имейте в виду, что нельзя применить это свойство к тегам <thead> или <tr>, поэтому применим его к <th>.
|
1 2 3 4 5 6 |
th { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; } |
Не забудьте добавить position для родителя. Заодно подстрахуемся и сделаем прилипающими только заголовки в шапке таблицы.
|
1 2 3 4 5 6 7 8 9 10 |
table { position: relative; } thead th { position: sticky; position: -webkit-sticky; top: 0; z-index: 1; } |
Задайте фон заголовкам, чтобы текст ячеек не был виден при прокрутке. А чтобы избавиться от линий между ячейками, зададим для всей таблицы свойство border:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
table { position: relative; border-collapse: collapse; } thead th { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: #FF8630; } |
длдж
|
1 2 3 4 |
table { position: relative; border-collapse: collapse; } |