В этой лекции можно узнать о том, как встроить таблицы на веб-страницу и как праильно расставить теги, чтобы Google показывал таблицу в виде сниппета. Также в лекции есть информация об устаревших тегах, и о том, чем их можно заменить.
Перед прочтением можно освежить знания о том, какими тегами размечается текст (материал лекции 2.2 Разметка текста), чтобы помнить о современных аналогах устаревших тегов.
Иногда для простоты восприятия контент нужно разместить в виде таблицы. Таблица состоит из строк и столбцов и предназначена для структурирования данных. Часто в таблицах размещают однотипные данные.
Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:
Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.
По ходу лекции можно постепенно создавать таблицу и сразу разбираться с нужными тегами и атрибутами. Первый и самый главный из них – тег <table>. С него всё начинается, и им всё заканчивается. Встречая этот тег в разметке браузер понимает что дальше будет таблица (по своей сути он чем-то похож на теги для списков).
Это парный тег, внутри которого можно будет дальше размещать строки и ячейки.
<table>
<!-- Здесь будет содержимое таблицы -->
</table>
Любая таблица в первую очередь состоит из строк. Чтобы в таблице появились строки нужно использовать парный тег <tr> (table row). Сколько нужно строк — столько нужно написать <tr> внутри <table>.
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Все теги до этого только создавали структуру, но данные туда добавлять не следует. Чтобы создать ячейку под данные нужен парный тег <td> (table data). Пишется столько <td> внутри <tr> сколько нужно ячеек таблицы.
Ячейки формируют из себя столбцы. В HTML нет специального тега для столбцов.
Ячейки теоретически могут существовать и без <tr>. Они будут выстраиваться в строку. Чтобы новые ячейки встали в новую строку как раз и используется <tr>.