Как сделать таблицу с помощью html

Таблицы

Как устроены таблицы в HTML и как их правильно верстать.

Время чтения: 15 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

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

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

Начальные условия:	Знание основ HTML (читайте Введение в HTML — Introduction to HTML).
Цель:	Общее знакомство с таблицами HTML.

Что такое таблица ?

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

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

A swimming timetable showing a sample data table

Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

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

Как работает таблица?

Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.

Personal pronouns

Субъект	Объект
Единствен. числ.	1 Лицо		Я	меня
	2 Лицо		ты	тебя
	3 Лицо	♂	он	его
		♀	она	её
		o	оно	его
Множ.числ.	1 Лицо		мы	нас
	2 Лицо		вы	вас
	2 Лицо		они	их

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

Оформление таблиц

Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.

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

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

Примечание: Посмотрите также таблицу personal_pronouns с применённым к ней стилем, чтобы получить представление о том, как она выглядит.

Когда не надо использовать таблицы HTML?

HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе Вёрстка на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.

Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :

Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders (en-US)), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, , , , или ) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.

Упражнение: ваша первая таблица

Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.

Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
Содержимое любой таблицы заключается между двумя тегами : (en-US). Добавьте их в тело HTML.
Самым маленьким контейнером в таблице является ячейка, она создаётся элементом (‘td’ — сокращение от ‘table data’). Введите внутри тегов table следующее:

td>Hi, I'm your first cell.td>

td>Hi, I'm your first cell.td> td>I'm your second cell.td> td>I'm your third cell.td> td>I'm your fourth cell.td>

tr> td>Hi, I'm your first cell.td> td>I'm your second cell.td> td>I'm your third cell.td> td>I'm your fourth cell.td> tr>

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

Hi, I’m your first cell. I’m your second cell. I’m your third cell. I’m your fourth cell.

Second row, first cell. Cell 2. Cell 3. Cell 4.

Примечание: Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).

Добавление заголовков с помощью элементов

Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как «Person» и «Age» в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:

table> tr> td> td> td>Knockytd> td>Flortd> td>Ellatd> td>Juantd> tr> tr> td>Breedtd> td>Jack Russelltd> td>Poodletd> td>Streetdogtd> td>Cocker Spanieltd> tr> tr> td>Agetd> td>16td> td>9td> td>10td> td>5td> tr> tr> td>Ownertd> td>Mother-in-lawtd> td>Metd> td>Metd> td>Sister-in-lawtd> tr> tr> td>Eating Habitstd> td>Eats everyone's leftoverstd> td>Nibbles at foodtd> td>Hearty eatertd> td>Will eat till he explodestd> tr> table>

Теперь как выглядит таблица:

Knocky Flor Ella Juan

Breed Jack Russell Poodle Streetdog Cocker Spaniel

Age 16 9 10 5

Owner Mother-in-law Me Me Sister-in-law

Eating Habits Eats everyone’s leftovers Nibbles at food Hearty eater Will eat till he explodes

Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.

Упражнение: заголовки

Попробуем улучшить эту таблицу.

Примечание: Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).

Для чего нужны заголовки?

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

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

Заголовки дают дополнительное преимущество — вместе с атрибутом scope (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно

Слияние нескольких строк или столбцов

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

Исходная разметка выглядит так:

table> tr> th>Animalsth> tr> tr> th>Hippopotamusth> tr> tr> th>Horseth> td>Maretd> tr> tr> td>Stalliontd> tr> tr> th>Crocodileth> tr> tr> th>Chickenth> td>Cocktd> tr> tr> td>Roostertd> tr> table>

Но результат не такой, как хотелось бы:

Animals

Hippopotamus

Horse Mare

Stallion

Crocodile

Chicken Cock

Rooster

Нужно, чтобы «Animals», «Hippopotamus» и «Crocodile» распространялись на два столбца, а «Horse» и «Chicken» — на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты colspan и rowspan , которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, colspan=»2″ распространяет ячейку на два столбца.

Воспользуемся colspan и rowspan чтобы улучшить таблицу.

Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.

Затем используйте атрибут colspan чтобы распространить «Animals», «Hippopotamus» и «Crocodile» на два столбца.

Наконец, используйте атрибут rowspan чтобы распространить «Horse» и «Chicken» на две строки.

Сохраните код и откройте его в браузере, чтобы увидеть улучшения.

Примечание: Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).

Стилизация столбцов

И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы и (en-US) . Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде :nth-child() (en-US) было бы слишком утомительно.

Возьмём простой пример:

table> tr> th>Data 1th> th style="background-color: yellow">Data 2th> tr> tr> td>Calcuttatd> td style="background-color: yellow">Orangetd> tr> tr> td>Robotstd> td style="background-color: yellow">Jazztd> tr> table>

Data 1 Data 2

Calcutta Orange

Robots Jazz

table> colgroup> col /> col style="background-color: yellow" /> colgroup> tr> th>Data 1th> th>Data 2th> tr> tr> td>Calcuttatd> td>Orangetd> tr> tr> td>Robotstd> td>Jazztd> tr> table>

Мы определяем два «стилизующих столбца». Мы не применяем стиль к первому столбцу, но пустой элемент ввести необходимо — иначе к первому столбцу не будет применён стиль.

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

colgroup> col style="background-color: yellow" span="2" /> colgroup>

Подобно colspan и rowspan , span принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.

Упражнение: colgroup и col

Теперь попробуйте сами.

Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.

Mon Tues Wed Thurs Fri Sat Sun

1st period English German Dutch

2nd period English English German Dutch

3rd period German German Dutch

4th period English English Dutch

Заново создайте таблицу, проделав указанные ниже действия.

Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).

Итог

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

Found a content problem with this page?

Edit the page on GitHub.

Report the content issue.

View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как правильно верстать HTML-таблицы: подробное руководство

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

Что же представляют собой HTML-таблицы и как их создать – во всем этом разбираемся в сегодняшней статье.

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

Откройте HTML-документ и пропишите туда следующее:

Давайте попробуем добавить в наш тег немного информации – например, простой текстовый фрагмент «Моя первая таблица». В коде это будет выглядеть так:

Моя первая таблица

А вот как этот фрагмент отображается в браузере:

Выглядит довольно странно, да? Мы вроде бы создали таблицу, а на экране видим лишь текст, который будто просто написан в теге . Все это потому, что нужно добавить строки и столбцы, а уже потом в них прописать текстовый фрагмент – только тогда таблица примет оригинальный вид. Но и это еще не все, предварительно нам нужно добавить обводку для таблицы, иначе чуда не произойдет.

Мы можем использовать CSS-стили либо просто прописать в HTML-файле тег и добавить в него следующее:

table

У нас появится маленькая точка внизу:

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как создать строки таблицы

Моя первая таблица

В результате видим все ту же картину с маленькой точкой:

Пропишите следующий код:

Моя первая таблица

Моя первая таблица А вот и столбец

А вот и новая строка И еще один столбец

Третья строка! И последний столбец!

Просто прописываем в теге пару строчек кода:

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

table

И, вуаля, перед нами отображается полноценная таблица с привычными границами:

table

Теперь наша таблица растянута:

Width со значением 100% растягивает таблицу на всю ширину страницы. Также вы можете указывать значения в пикселях, например width: 500px – в таком случае на любом экране таблица примет указанную ширину. Аналогичным образом можно присвоить и высоту – в пикселях или в процентах.

Заголовок столбцов и строк, объединение ячеек

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

Данный тег лучше всего применять для выделения ячейки-заголовка. Если необходимо визуальное форматирование, то воспользуйтесь стилями для обычных ячеек.

Давайте для примера добавим тег с надписью «Заголовок» в еще одну строку таблицы:

Заголовок

Моя первая таблица А вот и столбец

А вот и новая строка И еще один столбец

Третья строка! И последний столбец!

В итоге получаем следующее:

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

Заголовок

Вот как это выглядит на экране:

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

Заголовок

Моя первая таблица А вот и столбец

А вот и новая строка И еще один столбец

Третья строка!

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

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

С базовыми правилами создания таблицы мы разобрались, теперь давайте пойдем немного дальше – первым делом обсудим общий заголовок, который присваивается сверху или снизу таблицы. Он задается с помощью тега , а его размещение корректируется с помощью свойства caption-side: значение top – для вывода до таблицы, bottom – после.

Заголовок может потребоваться в следующих случаях:

чтобы показать пользователям краткое содержимое таблицы – такой подход будет полезен, когда на странице много таблиц;

тег влияет на оптимизацию страницы – его любят поисковики.

Давайте добавим в таблицу и посмотрим, что из этого выйдет. Для примера возьмем фразу «Таблица обо всем»:

Таблица обо всем

С помощью стилей мы можем задать отступы либо изменить жирность заголовка – это поможет вам улучшить визуальную часть. Для отступов используйте CSS-стили margin или padding, а жирность задается свойством font-weight или тегом .

Группирование строк и столбцов таблицы

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

Еще один важный тег – . Он формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре. С его помощью можно задавать свойства столбцов для каждого столбца в пределах элемента .

Давайте добавим к уже существующей таблице данные теги:

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

Тело таблицы

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

Тело таблицы располагается после заголовка и шапки .

Шапка и подвал таблицы

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

Общая сводка по HTML-таблицам

Давайте закрепим полученную информацию. Вот теги, которые мы использовали при построении HTML-таблиц:

Чтобы добавить визуальные эффекты, используйте CSS-стили – с их помощью можно как увеличить размер обводки границ, так и задать цвет фона, размер и шрифт текста.

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

Создать таблицу HTML

Создать таблицу на сайте можно при помощи тега table. Далее представлен самый примитивный вариант создания таблицы с помощью HTML:

Значение [1,1] Значение [1,2] Значение [2,1] Значение [2,2]

Представленная таблица для сайта HTML имеет две строки и два столбца.

Вложенные теги таблицы

Таблица может содержать в себе следующие базовые теги:

caption – представляет собой заголовок таблицы;

thead – «заголовок» таблицы. Представляет собой строку (или несколько), которые располагаются вверху таблицы. Должен располагаться сразу после тега table;

tbody – позволяет разбивать таблицу на отдельные блоки, имеющие различное оформление, которое задается с помощью стилей;

tfoot – «подвал» таблицы. Одна или несколько строк, которые располагаются внизу таблицы. Должен быть описан до тега tbody;

tr – является контейнером для строки таблицы;

td – определяет столбцы таблицы.

Атрибуты тега table

К основным атрибутам тега table относятся:

align – выравнивание таблицы (center, right, left);

background – позволяет задать фоновое изображение для таблицы (принимает значение url. Например, background=”tableBackground.png”);

bgcolor – позволяет определить цвет фона для таблицы (может принимать значение названия цвета, например, blue, или цвет в шестнадцатеричном формате, например, #fa8e47);

border – задает толщину рамки вокруг таблицы (принимает значение в пикселях, например, border=3);

width/height – определяет ширину/высоту таблицы (в пикселях или процентах).

Пример HTML-таблицы

Применим описанные выше теги и атрибуты к нашей таблице:

Пример таблицы HTML – «Нубекс» Первая ячейка в заголовке Вторая ячейка в заголовке Первая ячейка в подвале Вторая ячейка в подвале Заголовок 1 Заголовок 2 Ячейка [1,1] Ячейка [1,2] Ячейка [2,1] Ячейка [2,2]

Выглядит это следующим образом:

Первая ячейка в заголовке Вторая ячейка в заголовке

Первая ячейка в подвале Вторая ячейка в подвале

Заголовок 1 Заголовок 2

Ячейка [1,1] Ячейка [1,2]

Ячейка [2,1] Ячейка [2,2]

CSS-стили для таблицы

Теперь рассмотрим стили, которые можно применить к нашей таблице, чтобы значительно уменьшить избыточность кода:

border-style – определяет стиль рамки (может принимать значения solid, dashed, dotted и др.);

border-width – задает толщину рамки (в пикселях);

padding – отступ от внешней границы таблицы (в пикселях);

width/height – задает ширину/высоту таблицы (строки, столбца, ячейки) в пикселях или процентах;

color – устанавливает цвет текста указанного элемента;

border-color – цвет рамки;

background-color – цвет фона элемента.

Указанные выше атрибуты стилей являются основными и наиболее часто применяемы на практике.

Пример определения стилей для таблицы:

.table, th, td < border-style:solid; border-width:2px; padding:5px; >th < height:28px; background-color:#fa8e47; color:white; border-color:#ccc; >td < border-color:#ccc; >.trColor

В конструкторе сайтов «Нубекс» вставка таблиц сведена к элементарным операциям, которые под силу любому. Для получения подробной информации читайте статью: Создать таблицу на сайте.

Читать:
Как натянуть ремень гидроусилителя на уаз буханка