Меню

Названия ячеек таблицы html

Названия ячеек таблицы html

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

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

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

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

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

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

    и
  • 8. Как объединить ячейки таблицы
  • 9. Атрибуты элементов таблицы
  • 10. Пример создания таблицы

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

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

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

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

Фигура 1. Внешний вид таблицы без форматирования css-свойствами

По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border :

Промежутки между ячейками таблицы убираются с помощью свойства table .

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width :

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения: padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду.

Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

2. Как создать строки (ряды) таблицы

3. Как сделать ячейку заголовка столбца таблицы

Элемент

создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством элементов . Для элемента доступны атрибуты colspan , rowspan , headers .

4. Как сделать ячейку тела таблицы

5. Как добавить подпись (заголовок) к таблице

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

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

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

С помощью атрибута style можно изменить основной цвет фона ячеек. Для элемента доступен атрибут span , задающий количество столбцов для объединения.

table_primerРис. 2. Выделение столбцов таблицы другим цветом с использованием элементов и

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

Элемент

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

и для указания каждой части таблицы.

Элемент

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

и .

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

и как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.

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

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

table_primer2Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

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

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

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

Атрибут Описание, принимаемое значение
colspan Количество ячеек в строке для объединения по горизонтали.

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

. .
rowspan Количество ячеек в столбце для объединения по вертикали.

Возможные значения: число от 1 до 999.
span Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.

Принимаемые значения: любое целое положительное число.

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

table-htmlРис. 4. Создание меню ресторана с помощью HTML-таблицы

Источник



HTML Таблицы

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

Элемент служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом .

Элемент (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.

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

Пример: Простая HTML-таблица

Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

Граница таблицы

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

Пример: Применение свойства border

Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

Одинарная рамка для таблицы

По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:

Пример: Применение свойства border-collapse

Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

Поля и интервалы таблицы

По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.

Пример использования padding и border-spacing:

Пример: Применение свойств padding и border-spacing

padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
border-spacing — это расстояние между ячейками (зеленый цвет)

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

Ширина таблицы

Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:

Пример: Применение свойства width

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

Объединение ячеек (colspan и rowspan)

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

Объединение столбцов

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

Пример: Применение атрибута colspan

Ячейка на два столбца
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Объединение строк

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

Пример: Применение атрибута rowspan

Ячейка на две строки Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

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

Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.

Пример: Применение тега

Это заголовок таблицы

Ячейка на две строки Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Теги группирования элементов таблиц

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

Основное содержимое (тело) таблицы должно находиться внутри элемента (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег (в одной таблице допускается не более одного тега ). В исходном коде тег ставится до тега . Кроме логического группирования одной из причин использования элементов и является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок ( ) и последнюю строку ( ), когда пользователь станет прокручивать вашу таблицу.

Пример: Теги , и

Это шапка таблицы
Это подвал таблицы
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4

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

  • Задача1
  • Задача2
  • Задача3
  • Задача4
  • Задача5
  • Задача6
  • Задача7

Объединение столбцов

Напиште разметку для таблицы, изображенной на рис.1.

Реши сам »

Ячейка на два столбца
Ячейка 1 Ячейка 2

Объединение строк

Напиште разметку для таблицы, изображенной на рис.1.

Реши сам »

Ячейка на три строки Ячейка 1
Ячейка 2
Ячейка 3

Убрать двойную рамку таблицы

По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.

Широкая таблица

Сделайте чтобы эта таблица отображалось полностью на всю ширину окна браузера вне зависимости от ее ширины.

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

Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.

Поле внутри ячеек

Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.

Объединение строк

Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.

Источник

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 является плохой идеей по следующим причинам :

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

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

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

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

Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент (‘tr’ — сокращение от ‘table row’). Попробуем, как это получится.

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

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).

«>» title=»Permalink to Добавление заголовков с помощью элементов

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

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

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

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 (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно

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

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

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

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

Animals
Hippopotamus
Horse Mare
Stallion
Crocodile
Chicken Cock
Rooster

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

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

  1. Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
  2. Затем используйте атрибут colspan чтобы распространить «Animals», «Hippopotamus» и «Crocodile» на два столбца.
  3. Наконец, используйте атрибут rowspan чтобы распространить «Horse» и «Chicken» на две строки.
  4. Сохраните код и откройте его в браузере, чтобы увидеть улучшения.

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

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

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

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

Data 1 Data 2
Calcutta Orange
Robots Jazz

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

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

Подобно 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 problem with this page?

  • Edit on GitHub
  • Source on GitHub
  • Report a problem with this content on GitHub
  • Want to fix the problem yourself? See our Contribution guide.

Last modified: Jul 23, 2021 , by MDN contributors

Источник

1.7. HTML-таблицы

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

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

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

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

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

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

    и
  • 8. Как объединить ячейки таблицы
  • 9. Атрибуты элементов таблицы
  • 10. Пример создания таблицы

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

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

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

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

Фигура 1. Внешний вид таблицы без форматирования css-свойствами

По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border :

Промежутки между ячейками таблицы убираются с помощью свойства table .

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width :

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения: padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду.

Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

2. Как создать строки (ряды) таблицы

3. Как сделать ячейку заголовка столбца таблицы

Элемент

создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством элементов . Для элемента доступны атрибуты colspan , rowspan , headers .

4. Как сделать ячейку тела таблицы

5. Как добавить подпись (заголовок) к таблице

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

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

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

С помощью атрибута style можно изменить основной цвет фона ячеек. Для элемента доступен атрибут span , задающий количество столбцов для объединения.

table_primerРис. 2. Выделение столбцов таблицы другим цветом с использованием элементов и

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

Элемент

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

и для указания каждой части таблицы.

Элемент

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

и .

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

и как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.

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

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

table_primer2Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

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

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

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

Атрибут Описание, принимаемое значение
colspan Количество ячеек в строке для объединения по горизонтали.

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

. .
rowspan Количество ячеек в столбце для объединения по вертикали.

Возможные значения: число от 1 до 999.
span Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.

Принимаемые значения: любое целое положительное число.

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

table-htmlРис. 4. Создание меню ресторана с помощью HTML-таблицы

Источник

Читайте также:  Виды административной ответственности коап таблица
Adblock
detector