Вёрстка таблиц — HTML-теги TABLE, TR, TD, TH. Курс по HTML (9 из 20)

Курс по HTML — http://zero2hero.org/course/details/html

Вёрстка табличных данных.

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

Таблица — это довольно сложный по структуре тег, но вы быстро с ним справитесь.
Сама таблица обозначается тегом table.
У таблицы есть строки, а в каждой строке есть ячейки.
По умолчанию считается, что в каждой строке одинаковое число ячеек. Прямо как в Экселе или Google Spreadsheets.

Итак, пишем тег table
Внутри него пишем тег для создания одной строки — tr, что означает table row, “строка таблицы”
А вот внутри строки нужно создать один или несколько элементов для ячеек — c помощью тега td, что означает, table data cell, “ячейка данных”.

Всё, внутри ячейки может быть любой текст или картинка.

Давайте создадим таблицу 3х3 — две строки по три ячейки.

Чаще всего у таблиц первая строка является заголовком, где написаны обозначения столбцов.
Они выделены жирным.
Мы можем выделить текст в них жирным с помощью какого тега? C помощью тега b.

Но для ячейки заголовка есть специальный тег — th, что означает table header cell — “ячейка заголовка”.
Давайте сделаем ячейки первой строки не просто ячейками данных, а заголовками.

И последний фокус с таблицами.
Когда работаешь с таблицей в Excel, какие-то ячейки можно сгруппировать, и тогда они становятся как бы одной ячейкой.
В HTML тоже так можно.
Вы просто указываете в атрибуте ячейки, сколько соседних ячеек к ней добавить, а также в каком направлении — по горизонтали или по вертикали.
Например, если мы укажем в заголовке в первой ячейке атрибут rowspan=“3”, это означает, что три ячейки вправо теперь слепляются вместе. Лишнией ячейки теперь нужно удалить.

Если же мы укажем colspan=“2”, то это означает что 2 ячейки вниз слепляются в одну.
Вот так просто. Теперь вы умеете верстать таблицы.

Видео Вёрстка таблиц — HTML-теги TABLE, TR, TD, TH. Курс по HTML (9 из 20) канала Zero to Hero