Применение языка 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 таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Чтобы объединить ячейки по горизонтали используйте атрибут 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 таблицы

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

Необходимые условия

Прежде чем приступить к данному разделу, вы должны ознакомиться с основами HTML — смотрите Введение в HTML (Introduction to HTML).

Примечание: Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Thimble.

Руководства

Данный раздел содержит следующие статьи:

Эта статья поможет вам начать работу с таблицами HTML, познакомив с самыми базовыми понятиями — строками и ячейками, заголовками, слиянием строк или столбцов, а также с тем, как объединять все ячейки столбца для оформительских целей.

Во второй статье данного раздела мы рассмотрим более продвинутые возможности таблиц HTML — заголовки/подписи, а также разбиение строк таблицы на три части: «голову» (head), «тело» (body) и нижний колонтитул (footer) — а также исследуем, как можно представлять таблицы для людей, имеющих проблемы со зрением.

Проверка знаний

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

Found a content problem with this page?

This page was last modified on 26 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник