Ячейка часть таблицы html

Создание таблиц в HTML. Все о HTML таблицах

В HTML для создания таблиц используются теги группы table. К ним относятся:

Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

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

Чтобы создать простую таблицу HTML достаточно 3 тега: , и .

Далее необходимо определить строки и ячейки — структуру таблицы.

Пример простой таблицы HTML

Исходный код простой таблицы HTML

 


Ячейка 1
Ячейка 2
Ячейка 3

Ячейка 4
Ячейка 5
Ячейка 6

Ячейка 7
Ячейка 8
Ячейка 9

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

Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.

Пример HTML таблицы с заголовком th

Volkswagen AG Daimler AG BMW Group
Audi Mercedes-Benz BMW
Skoda Mercedes-AMG Mini
Lamborghini Smart Rolls-Royce

Исходный код таблицы HTML с заголовками th

 


Volkswagen AG
Daimler AG
BMW Group

Audi
Mercedes-Benz
BMW

Skoda
Mercedes-AMG
Mini

Lamborghini
Smart
Rolls-Royce

Объединение ячеек в таблице HTML

В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Читайте также:  Создание графического приложения python

Чтобы объединить ячейки по горизонтали используйте атрибут colspan , у ячейки или , где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan , у ячейки или , где x — количество ячеек для объединения.

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

Пример HTML таблицы с объединением ячеек

Исходный код таблицы HTML с объединенными ячейками

 


Nissan

Модель
Комплектация
Наличие

Nissan Qashqai
VISIA
+

TEKNA
+

Nissan X-Trail
ACENTA
+

CONNECTA
-

Колонтитулы и подпись в HTML таблицах

HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.

По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.

По необходимости к таблице можно добавить подпись. Для этого используйте тег .

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway
Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
Наличие + + +
Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.)
Топливо бензин бензин дизель
Норма токсичности Евро-6 Евро-6 Евро-5

Исходный код таблицы с колонтитулами и подписью

 
Комплектации Renault Sandero Stepway


Характеристика
SUTA 09H 6R
SUTA 09HR6R
SUTA 15H 5R


Наличие
+
+
+


Мощность двигателя
0,9 (90 л.с.)
0,9 (90 л.с.)
1,5 (90 л.с.)

Топливо
бензин
бензин
дизель

Норма токсичности
Евро-6
Евро-6
Евро-5

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .

Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).

Оба тега могут определять стили для одной или нескольких колонок. Атрибут span , указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Характеристика
1.5 (90 л.с.) 1.2 (115 л.с.) 1.5 (90 л.с.) Мощность двигателя
дизель бензин дизель Топливо
АКП6 (EDC) АКП6 (EDC) АКП6 (EDC) Трансмиссия

Исходный код таблицы HTML c и

 






ZEN 2E2C AL A
ZEN 2E2C J5 A
INTENSE 2E3C AL A
Характеристика

1.5 (90 л.с.)
1.2 (115 л.с.)
1.5 (90 л.с.)
Мощность двигателя

дизель
бензин
дизель
Топливо

АКП6 (EDC)
АКП6 (EDC)
АКП6 (EDC)
Трансмиссия

Таблицы в макете страниц сайта

На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).

Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.

Источник

Таблицы

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

Сниппет с таблицей расписания поездов на странице поисковой выдачи Google

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

Если вы не используете ни один из этих тегов, то браузер самостоятельно добавит при отрисовке таблицы.

Скопировать ссылку «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.

Источник

Оцените статью