Таблицы в HTML

by anastasia ноября 24, 2019 0 комментариев Логическая группировка строк и столбцов Объединение ячеек таблицы Создание таблицы

Дорогие читатели! Сегодняшний урок посвящён простой, но очень важной теме: вы научитесь создавать таблицы в HTML-документах.

В ячейках таблицы могут находиться абсолютно любые элементы — так же, как и за её пределами.

Создание таблицы

Для создания таблицы используется парный тег <table>...</table>. Сама таблица находится внутри него. Каждая строка таблицы создаётся с помощью тега <tr>...</tr>. Ячейка заголовка создаётся тегом <th>...</th>, а ячейка содержимого — с помощью тега <td>...</td>. Также можно добавить подпись к таблице — вносится она внутрь тега <caption>...</caption>, который, в свою очередь, должен располагаться после открывающего тега создания таблицы, но до объявления первой строки.

Общая структура таблицы выглядит следующим образом:

<table>
    <caption>Подпись к таблице</caption>
    <tr> <!-- Тег строки -->
        <th>Заголовок 1</th> <!-- Тег ячейки в строке -->
        <th>Заголовок 2</th>
    </tr>
    <tr>
        <td>Содержимое 1</td>
        <td>Содержимое 2</td>
    </tr>
</table>

Ячейки строк или колонок можно логически группировать при помощи тега <colgroup>...</colgroup>. Он группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам, вместо того чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов <table> и <caption>...</caption>.

Логическая группировка строк и столбцов

Элемент <col> формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т. е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>.

Также в стандарте языка HTML была заложена группировка разделов таблицы на заголовки, содержимое и итоги; однако из-за устаревания этой группировки мы её пропустим.

Объединение ячеек таблицы

Для объединения ячеек таблицы используются атрибуты colspan и rowspan. Первый задаёт количество ячеек, объединённых по горизонтали, а второй — по вертикали. Они используются внутри тегов строки или столбца, например код <td colspan="3">Содержимое</td> объединит три ячейки по горизонтали в одну.