Что такое table в html
Перейти к содержимому

Что такое table в html

  • автор:

HTML тег

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

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

Синтаксис

Тег

парный, содержимое записывается между открывающим (

) и закрывающим (

) тегами.

Пример

html> html> head> title>Заголовок документа title> head> body> table border="1" style="border-collapse:collapse;"> tr> th>Месяц th> th>Число th> tr> tr> td>Июнь td> td>10.06.2018 td> tr> tr> td>Июль td> td>15.07.2018 td> tr> table> body> html>

Результат

tableexample1

Атрибуты

Атрибут Значение Описание
align left
center
right
Устанавливает выравнивание содержимого колонки.
Не поддерживается в HTML5.
background background Задает фоновый рисунок в таблице.
Не поддерживается в HTML5.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Задает цвет фона таблицы.
Не поддерживается в HTML 5.
border 1
0
Задает толщину рамки в пикселях.
Не поддерживается в HTML 5.
cellpadding pixels Задает расстояние между границей ячейки и ее содержимым.
Не поддерживается в HTML 5.
cellspacing pixels Задает расстояние между ячейками.
Не поддерживается в HTML 5.
cols cols Задает число колонок в таблице.
Не поддерживается в HTML 5.
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Указывает браузеру, как отображать границы вокруг таблицы.
Не поддерживается в HTML 5.
height height Задает высоту таблицы.
rules none
groups
rows
cols
all
Сообщает браузеру, где отображать границы между ячейками.
Не поддерживается в HTML 5.
sortable sortable Указывает, что данные в таблице могут быть отсортированы. Это логический атрибут.
Не поддерживается в спецификации HTML 5.1.
summary text Дает краткое описание таблицы.
Не поддерживается в HTML 5.
width pixels Задает ширину таблицы.
Не поддерживается в HTML 5.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега :

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Что такое table в html

align Определяет выравнивание таблицы. background Задаёт фоновый рисунок в таблице. bgcolor Цвет фона таблицы. border Толщина рамки в пикселях. bordercolor Цвет рамки. cellpadding Отступ от рамки до содержимого ячейки. cellspacing Расстояние между ячеек. cols Число колонок в таблице. frame Сообщает браузеру, как отображать границы вокруг таблицы. rules Сообщает браузеру, где отображать границы между ячеек. summary Краткое описание таблицы. width Ширина таблицы. Устаревшие атрибуты

Устаревшие атрибуты — это атрибуты элементов HTML, которые были частью предыдущих версий HTML, но больше не поддерживаются в последних версиях стандарта. Использование таких атрибутов не рекомендуется, поскольку они противоречат современной идеологии HTML и могут не поддерживаться последними версиями браузеров.

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

Пример

Таблица размеров обуви

Таблица размеров обуви
Россия Великобритания Европа Длина ступни, см
34,5 3,5 36 23
35,5 4 36⅔ 23–23,5
36 4,5 37⅓ 23,5
36,5 5 38 24
37 5,5 38⅔ 24,5
38 6 39⅓ 25
38,5 6,5 40 25,5
39 7 40⅔ 25,5–26
40 7,5 41⅓ 26
40,5 8 42 26,5
41 8,5 42⅔ 27
42 9 43⅓ 27,5
43 9,5 44 28
43,5 10 44⅔ 28–28,5
44 10,5 45⅓ 28,5–29
44,5 11 46 29
45 11,5 46⅔ 29,5
46 12 47⅓ 30
46,5 12,5 48 30,5
47 13 48⅔ 31
48 13,5 49⅓ 31,5

Результат данного примера показан на рис. 1.

Вид таблицы

Рис. 1. Вид таблицы

Спецификация

Спецификация Статус
HTML Living Standard Живой стандарт
HTML 4.01 Specification Заменённая рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

3 12 1 3.5 1 1

В таблице браузеров применяются следующие обозначения.

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

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

См. также

  • Организация данных с помощью таблиц
  • Подсветка строк и колонок таблицы
  • Структура таблицы
  • Таблицы
  • Таблицы
  • Таблицы в Bootstrap 5
  • Таблицы в HTML

Элемент table

Элемент table (от англ. «table» ‒ «таблица») вставляет таблицу в (X)HTML-документ. Если таблица (без определённых настроек) вставляется в строку с текстом, то такая таблица, а так же текст, идущий после таблицы, переводится на новую строку.

Если при вёрстке страниц используются таблицы в качестве элементов макета документа (так называемая «табличная вёрстка»), то таким таблицам необходимо задавать атрибут « role » со значением « presentation » ( role=»presentation» ), который помогает техническим средствам (например, программам чтения с экрана) правильно распознавать и извлекать (воспроизводить) данные из такой таблицы. Если наоборот необходимо явно указать, что таблица не является частью макета страницы, то такой таблице задают атрибут « border » с пустым значением или со значением « 1 ».

Тег HTML таблица

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

HTML контент таблицы

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

Ниже представлены 2 варианта HTML таблиц.

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

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

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

 


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

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

Сложная HTML таблица

Подпись таблицы

Ячейка колонтитула 1 Ячейка колонтитула 2 Ячейка колонтитула 3
Ячейка колонтитула 4 Ячейка колонтитула 5 Ячейка колонтитула 6
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4

HTML код сложной таблицы

 
Подпись таблицы





Ячейка колонтитула 1
Ячейка колонтитула 2
Ячейка колонтитула 3


Ячейка колонтитула 4
Ячейка колонтитула 5
Ячейка колонтитула 6


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

Ячейка 4

Поддержка браузерами

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
Да Да Да Да Да

Атрибуты

Устаревшие атрибуты тега table

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(226,112,017), rgb(0, 40, 129).
HTML hex: #1a2a2c, #eee.
HTML colorname: black, yellow;

Определяет какие внешние границы будут отображены:
void — все границы скрыты;
above — только верхняя граница;
below — только нижняя граница;
lhs — только левая граница;
rhs — только правая граница;
vsides — вертикальные границы;
hsides — горизонтальные границы;
box или border — все границы.

В HTML5 используйте CSS.

Определяет какие внутренние границы будут отображены:
none — все скрыты;
groups — границы групп;
rows — границы строк;
cols — границы колонок;
all — все;

В HTML5 используйте CSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *