Назначение и создание HTML таблиц, строк и ячеек: table, tr, td и th.

Помощь проекту:
WMR: R288272666982
WMZ: Z293550531456
Яндекс.Деньги: 410011531129223

Блог: http://zametkinapolyah.ru/
Рубрика HTML: http://zametkinapolyah.ru/verstka-sajtov/html
Текстовая версия: http://zametkinapolyah.ru/verstka-sajtov/palitra-cveta-v-html-kody-html-cvetov-cvet-teksta-ssylki-fona-v-html.html
Паблик блога в ВК: https://vk.com/zametkinapolyah
Тематическая группа в ВК: https://vk.com/zametkipohtml

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

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


Создать HTML таблицу не так уж и сложно. Тег, создающий таблицу - table (парный с обязательным закрывающим тегом). Элемент TABLE является блочным, но он не занимает
по ширине всю доступную область, как это происходит с другими блочными элементами. Ширина элемента TABLE зависит от контента.
Элемент TABLE является контейнером для элементов, формирующих содержимое таблицы: для строк, ячеек, шапки, тела и подвала таблицы. Тег tr формирует строки таблицы. Например, чтобы создать таблицу из трех строк.

Стоит заметить, что tr - это парный тег с опциональным закрывающим тегом, но опциональностью пользоваться не стоит. Сам элемент tr блочный.

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

Содержимое ячеек может быть любым (хоть блочные элементы, хоть строчные). В HTML ячейки могут быть заглавными, для создания такой ячейки вместо td слеудет использовать th. Содержимое ячейки th обычно по умолчанию отображается браузером жирным шрифтом и выравнивается по центру.
Элементы TD и TH - блочные, а теги являются парными с опциональными закрывающими тегами.
Обратите внимание: при создании HTML таблицы следует соблюдать иерархию вложенности (table является контейнером для tr, а сам tr является контейнером для th или td).