Html table несколько tbody

Таблицы

Как устроены таблицы в 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.

Источник

How to Add Multiple Elements in the Same Table

The HTML element defines the body content of an HTML table and creates a separate semantic block in it.

Create HTML

table> thead> tr> th>Day th> th>Month th> th>Order th> tr> thead> tbody> tr> td>1-10 td> td>June td> td>20pcs td> tr> tr> td>11-20 td> td>June td> td>20pcs td> tr> tr> td>21-30 td> td>June td> td>20pcs td> tr> tbody> tbody> tr> td>1-10 td> td>Jule td> td>50pcs td> tr> tr> td>11-20 td> td>Jule td> td>50pcs td> tr> tr> td>21-31 td> td>Jule td> td>50pcs td> tr> tbody> tbody> tr> td>1-10 td> td>August td> td>100pcs td> tr> tr> td>11-20 td> td>August td> td>100pcs td> tr> tr> td>21-31 td> td>August td> td>100pcs td> tr> tbody> table>

Add CSS

• Style the elements of the by specifying the width, border-bottom, and font-weight properties.
• Add the :nth-child(odd) pseudo-class to the and set the background and border properties for it.
• Add the :nth-child(even) pseudo-class to the and set the background and border properties for it.

thead th < width: 150px; border-bottom: solid 1px #000; font-weight: bold; > tbody:nth-child(odd) < background: #a8e3b6; border: solid 1px #000; > tbody:nth-child(even) < background: #c9d1cb; border: solid 1px #000; >

Example of adding multiple elements in the same table:

html> html> head> title>Title of the document title> style> table, table th, table td < border: 1px solid #cccccc; > thead th < width: 150px; border-bottom: solid 1px #000; font-weight: bold; > tbody:nth-child(odd) < background: #a8e3b6; border: solid 1px #000; > tbody:nth-child(even) < background: #c9d1cb; border: solid 1px #000; > style> head> body> table> thead> tr> th>Day th> th>Month th> th>Order th> tr> thead> tbody> tr> td>1-10 td> td>June td> td>20pcs td> tr> tr> td>11-20 td> td>June td> td>20pcs td> tr> tr> td>21-30 td> td>June td> td>20pcs td> tr> tbody> tbody> tr> td>1-10 td> td>Jule td> td>50pcs td> tr> tr> td>11-20 td> td>Jule td> td>50pcs td> tr> tr> td>21-31 td> td>Jule td> td>50pcs td> tr> tbody> tbody> tr> td>1-10 td> td>August td> td>100pcs td> tr> tr> td>11-20 td> td>August td> td>100pcs td> tr> tr> td>21-31 td> td>August td> td>100pcs td> tr> tbody> table> body> html>

Result

Источник

Html table несколько tbody

Тег (от англ. table body — тело таблицы) предназначен для хранения одной или нескольких строк таблицы.

 1 2 3 4 5 6 7 8 9 10 11 12 13

table> thead> . thead> tfoot> . tfoot> tbody> tr> td>. td> tr> tbody> table> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>TBODYtitle> head> body> table width="600" border="1"> tbody align="right"> tr> td>Ячейка 1td> td>Ячейка 2td> tr> tbody> table> body> html> 

 
 
Это шапка таблицы
  
Это подвал таблицы
  
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4