Шапка страницы таблицей html

Таблицы

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

Данная таблица содержит три строки, в каждой строке по три ячейки. В браузере она отобразится так:

По умолчанию таблица в браузере отображается без границ и отступов. Эти свойства прописываются через CSS.

Таблица с шапкой и подвалом

Вы можете сделать в таблице шапку и подвал, для этого используйте такую конструкцию:

 
 
 
Ячейка в шапке таблицы
 
Ячейка в шапке таблицы
 
Ячейка в шапке таблицы
  
 
 
Ячейка в подвале таблицы
 
Ячейка в подвале таблицы
 
Ячейка в подвале таблицы
  
 
 
Ячейка таблицы
 
Ячейка таблицы
 
Ячейка таблицы
  
Ячейка таблицы
 
Ячейка таблицы
 
Ячейка таблицы
  
Ячейка таблицы
 
Ячейка таблицы
 
Ячейка таблицы
  
 
 

Шапка таблицы лежит в контейнере thead , ячейки в шапке прописываются с помощью тега

.

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

Подвал таблицы лежит в контейнере tfoot . Несмотря на то, что подвал в коде идет сразу после шапки, браузер отобразит его в самом низу таблицы, т.е. после контейнера tbody .

Основное содержимое таблицы принято прописывать в контейнере tbody .

Объединение ячеек по горизонтали

Для того, чтобы объединить несколько ячеек в строке таблицы необходим атрибут colspan . Допустим в нашей таблице мы хотим объединить две ячейки в шапке, для этого для первой ячейки записываем атрибут colspan со значением два: , и удаляем ячейку, идущую после этой:

 
 
 
Ячейка в шапке таблицы
 
Ячейка в шапке таблицы
  
 
 
Ячейка в подвале таблицы
 
Ячейка в подвале таблицы
 
Ячейка в подвале таблицы
  
 
 
Ячейка таблицы
 
Ячейка таблицы
 
Ячейка таблицы
  
Ячейка таблицы
 
Ячейка таблицы
 
Ячейка таблицы
  
Ячейка таблицы
 
Ячейка таблицы
 
Ячейка таблицы
  
 
 

Объединение ячеек по вертикали

Чтобы объединить ячейки по вертикали, используется атрибут rowspan . Допустим в теле таблицы нам нужно объединить первую ячейку первой строки с первой ячейкой второй строки, для этого для первой ячейки в первой строке нужно записать , и удалить первую ячейку во второй строке:

 
 
 
Ячейка в шапке таблицы
 
Ячейка в шапке таблицы
 
Ячейка в шапке таблицы
  
 
 
Ячейка в подвале таблицы
 
Ячейка в подвале таблицы
 
Ячейка в подвале таблицы
  
 
 
Ячейка таблицы
 
Ячейка таблицы
 
Ячейка таблицы
  
Ячейка таблицы
 
Ячейка таблицы
  
Ячейка таблицы
 
Ячейка таблицы
 
Ячейка таблицы
  
 
 

Видео к уроку

Источник

HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

EMIL	TOBIAS	LINUS

8:00
9:00
10:00
11:00
12:00
13:00

MON	TUE	WED	THU	FRI
8:00
9:00
10:00
11:00
12:00

DECEMBER

HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.

Example

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a element:

Example

Align Table Headers

By default, table headers are bold and centered:

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

To left-align the table headers, use the CSS text-align property:

Example

Header for Multiple Columns

You can have a header that spans over two or more columns.

Name		Age
Jill	Smith	50
Eve	Jackson	94

To do this, use the colspan attribute on the element:

Example

You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.

Table Caption

You can add a caption that serves as a heading for the entire table.

Monthly savings

Month	Savings
January	$100
February	$50

To add a caption to a table, use the tag:

Example

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник