FrontendBook | HTML Таблицы

HTML Таблицы

Таблица HTML определяется с помощью тега «table». Каждая строка таблицы определяется тегом «tr». Заголовок таблицы определяется тегом «th». По умолчанию заголовки таблиц выделяются жирным шрифтом и располагаются по центру. Данные/ячейка таблицы определяются с помощью тега «td».

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

Ячейки таблицы

Каждая ячейка таблицы определяется тегами <td> и </td>. Элемент td означает табличные данные. Все, что находится между <td> и </td>, является содержимым ячейки таблицы.

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

Строки таблицы

Каждая строка таблицы начинается с тега <tr> и заканчивается тегом </tr>. Тег tr обозначает строку таблицы. В таблице может быть сколько угодно строк; просто убедитесь, что количество ячеек одинаково в каждой строке. Бывают случаи, когда в строке может быть меньше или больше ячеек, чем в другой.

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

Иногда вы хотите, чтобы ваши ячейки были ячейками заголовка таблицы. В этих случаях используйте тег <th> вместо тега <td>:

Тег <th> обозначает заголовок таблицы.

По умолчанию текст в элементах <th> выделяется жирным шрифтом и располагается по центру, но вы можете изменить это с помощью CSS.

HTML Элементы Таблицы

Теперь резюмируя статью можно выделить следующие теги таблицы:

Элемент Описание
table Определяет таблицу
th Определяет ячейку заголовка в таблице
tr Определяет строку в таблице
td Определяет ячейку в таблице
caption Определяет заголовок таблицы
colgroup Указывает группу из одного или нескольких столбцов в таблице для форматирования
col Указывает свойства столбца для каждого столбца в элементе colgroup
thead Группирует содержимое заголовка в таблице
tbody Группирует содержимое тела в таблице
tfoot Группирует содержимое нижнего колонтитула в таблице