Как сделать таблицу в html

HTML: Создание таблицы

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

 
Первый заголовок
Второй заголовок
 
строка 1, ячейка 1
строка 1, ячейка 2
 
строка 2, ячейка 1
строка 2, ячейка 2
 
 

Таблица внутри таблицы

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

 
Первый заголовок
Второй заголовок
 
строка 1, ячейка 1
строка 1, ячейка 2
 
строка 2, ячейка 1
 
строка 2, ячейка 2 
Первый заголовок
Второй заголовок
 
строка 1, ячейка 1
строка 1, ячейка 2
 
строка 2, ячейка 1
строка 2, ячейка 2
 
 
 
 
 

В итоге у нас получилась таблица внутри ячейки другой таблицы, то есть таблица внутри таблицы.

С этой темой смотрят:

• Добавление рамки и заголовка к таблице в html
• Объединение ячеек в html таблице
• HTML тег
• Оформление таблиц

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

1.7. HTML-таблицы

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

Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.

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

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

Создание таблиц в HTML

• Содержание:
• 1. Как создать таблицу
• 2. Как создать строки (ряды) таблицы
• 3. Как сделать ячейку заголовка столбца таблицы
• 4. Как сделать ячейку тела таблицы
• 5. Как добавить подпись (заголовок) к таблице
• 6. Группирование строк и столбцов таблицы и
• 7. Группировка разделов таблицы , и
• 8. Как объединить ячейки таблицы
• 9. Атрибуты элементов таблицы
• 10. Пример создания таблицы

1. Как создать таблицу

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

Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:

 текст заголовкатекст заголовка данныеданные 

7. Группировка разделов таблицы

Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами и для указания каждой части таблицы.

Элемент группирует основное содержимое таблицы. Используется в сочетании с элементами и .

 
 
 
№ п/п
 
Наименование товара
 
Ед. изм.
 
Количество
 
Цена за ед. изм., руб.
 
Стоимость, руб.
 
 
 
 
ИТОГО:
1168,80
 
 
 
 
1.
 
Томаты свежие
кг
15,20
69,00
1048,80
 
 
2.
 
Огурцы свежие
кг
2,50
48,00
120,00
 
 
 

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

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

 
 
№ п/п
 
Наименование товара
 
Ед. изм.
 
Количество
 
Цена за ед. изм., руб.
 
Стоимость, руб.
 
 
1.
 
Томаты свежие
кг
15,20
69,00
1048,80
 
 
2.
 
Огурцы свежие
кг
2,50
48,00
120,00
 
 
ИТОГО:
1168,80
 

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы

Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .

Атрибут	Описание, принимаемое значение
colspan	Количество ячеек в строке для объединения по горизонтали.	Возможные значения: число от 1 до 999.
headers	Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.	.	.
rowspan	Количество ячеек в столбце для объединения по вертикали.	Возможные значения: число от 1 до 999.
span	Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1. Принимаемые значения: любое целое положительное число.

10. Пример создания таблицы

 
Меню ресторана "Ромашка"
 
Кухня
 
Холодные блюда
 
Горячие блюда
 
Десерты
 
 
Салаты
 
Закуски
 
Первые блюда
 
Вторые блюда
 
 
Русская
 
Винегрет
 
Язык с хреном
 
Щи с квашеной капустой
 
Вареники с картошкой
 
Печеные яблоки с медом
 
 
Оливье
 
Студень говяжий
 
Рассольник домашний
 
Караси запеченые в сметане
 
Блинчатый пирог
 
 
Сельдь под "шубой"
 
Судак заливной
 
Мясная солянка
 
Котлеты "Пожарские"
 
Пирожное "Картошка"
 
 
Испанская
 
Севиче из гребешков
 
Эмпанадас
 
Хлебный суп с чесноком
 
Паэлья с морепродуктами
 
Чуррос
 
 
Тимбал из авокадо и тунца
 
Ахотомате
 
Астурийская фабада
 
Свиное раксо
 
Альмойшавена
 
 
Фасоль с ветчиной
 
Чанфайна
 
Рыбный суп с манными клецками
 
Тортилья картофельная
 
Бунуэлос
 
 
Французская
 
Вогезский салат
 
Рийет из курицы
 
Баклажанный крем-суп "Ренуар"
 
Картофель огратен
 
Бриоши
 
 
Салат "Панзанелла"
 
Делисьез из сыра
 
Французский тыквенный суп
 
Гратин из птицы
 
Лигурийский лимонный пирог
 
 
Тар-тар
 
Маринованный лосось
 
Суп "Конти"
 
Тартифлетт
 
Саварен "Триумф"
 
 

body < margin: 0; background: #F4F1F8; >table < border-collapse: collapse; line-height: 1.1; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8); color: #0C213B; >caption < font-family: annabelle, cursive; font-weight: bold; font-size: 2em; padding: 10px; color: #F3CD26; text-shadow: 1px 1px 0 rgba(0,0,0,.3); >caption:before, caption:after < content: "\274B"; color: #A9E2CC; margin: 0 10px; >th < padding: 10px; border: 1px solid #A9E2CC; >td < font-size: 0.8em; padding: 5px 7px; border: 1px solid #A9E2CC; >.first

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

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

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

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

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

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

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

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

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Исходный код простой таблицы 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 таблицы с объединением ячеек

Nissan
Модель	Комплектация	Наличие
Nissan Qashqai	VISIA	+
	TEKNA	+
Nissan X-Trail	ACENTA	+
	CONNECTA	—

Исходный код таблицы 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

На заре интернета таблицы были инструментом вёрстки страниц: с их помощью люди создавали многоколоночные сайты, сложные композиции, вложенные меню и многие другие полезные штуки. Ранний интернет (где-то до года 2005–2007-го) в буквальном смысле держался на таблицах.

Потом в CSS появились параметры для позиционирования элементов, и началась эра вёрстки на , потом придумали CSS Grid, и понеслось. Но начиналось всё именно с табличной вёрстки.

Прочитайте нашу подборку о CSS Grid

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

Как сделать таблицу в HTML

За таблицы в вёрстке отвечает такой набор тегов:

Теперь разберём каждый тег отдельно:

Сделаем простую таблицу из двух строк, по 3 ячейки в каждой. В коде это выглядит громоздко, но на деле всё получится компактно:

    Первая ячейка в первой строке Привет! Это журнал «Код».     Первая ячейка во второй строке Подписывайтесь, ставьте лайки.  

Таким способом можно сделать таблицу любого размера — хоть 100 строк по 500 ячеек в каждой.

Обратите внимание, что браузер нарисовал таблицу невидимой. Это не всегда так. Раньше браузеры рисовали таблицы с чётко видимыми границами, и некоторые браузеры делают так до сих пор. Чтобы таблица выглядела одинаково у всех, смотрите следующий раздел.

Настраиваем внешний вид

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

• сделаем синие границы;
• толщина границ — 2 пикселя;
• расстояние между ячейками — 10 пикселей.

В этом примере мы прописали стили «инлайном», то есть прямо внутри кода. Но также можно было вынести эти же стили CSS-файл или в таблицу стилей в начале документа. Тогда это выглядело бы так:

Также можно было бы указать, что это оформление для какой-то конкретной таблицы на странице (а не для всех, как сейчас). Тогда можно было бы сказать таблице class=»kakoi-to» , а в стилях сказать table.kakoi-to <. >— и прописать в фигурных скобках все нужные параметры оформления.

Ещё можно можно настроить стили у каждой ячейки отдельно. Например, в первой строке у 2 и 3 ячейки сделать жёлтый фон:

   Первая ячейка в первой строке Привет! Это журнал «Код». 

Или можно было бы сказать , а в стилях прописать .highlighted — это имеет смысл делать, если у вас в таблице будет много выделенных ячеек или вы захотите потом обращаться к ним через JavaScript.

Чтобы сделать видимые границы у всех ячеек, добавим параметр border:

Сразу стали видны расстояния между ячейками, которые мы прописывали в стилях.

Видно, что между ячейками расстояние есть, а внутри ячеек текст как будто зажат. Чтобы дать тексту внутри ячеек подышать, используют padding:

Заголовки в таблице

За заголовок в таблице отвечает отдельный тег :

  Первый заголовок Второй И третий   Первая ячейка в первой строке Привет! Это журнал «Код».     Первая ячейка во второй строке Подписывайтесь, ставьте лайки.  

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

  Первый заголовок Второй И третий 

Объединение ячеек

Если нужно, чтобы содержимое занимало сразу несколько ячеек, используют параметр colspan для горизонтальных ячеек и rowspan — для вертикальных. В качестве параметра для них просто указываем количество ячеек, которые нужно с ними объединить:

    Первый заголовок Второй И третий    Объединили первые ячейки Привет!     Подписывайтесь, ставьте лайки.  

Что можно размещать в ячейках

Ячейки — это контейнеры для содержимого, куда можно класть всё:

• текст,
• картинки,
• видео,
• песни,
• другие таблицы.

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

    Подписывайтесь,    

Чтобы этого не было, можно задать общую ширину таблицы:

И после этого указать, что картинка может занимать 100% доступной ширины ячейки, а не всего экрана:

Что дальше

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

Стей тюнед и всё такое.

А если хотите научиться верстать по-современному, почитайте вот этот цикл: