Вы здесь: Главная > HTML > Таблицы: rowspan и colspan

Таблицы: rowspan и colspan

Опубликовано автором

Таблицы могли показаться достаточно сложными в Руководстве для начинающих по HTML. Визуализировать двумерную сетку из одномерных строк кода может быть довольно сложно.

Ну, это становится ещё сложнее. Все благодаря атрибутам rowspan и colspan.

Следующий код аналогичен приведённому на странице таблиц в Руководстве для начинающих по HTML:

<table>
    <tr>
        <th>Заголовок столбца 1</th>
        <th>Заголовок столбца 2</th>
        <th>Заголовок столбца 3</th>
    </tr>
    <tr>
        <td>Строка 2, ячейка 1</td>
        <td colspan="2">Строка 2, ячейка 2, также охватывающая строку 2, ячейку 3</td>
    </tr>
    <tr>
        <td rowspan="2">Строка 3, ячейка 1, также охватывающая строку 4, ячейку 1</td>
        <td>Строка 3, ячейка 2</td>
        <td>Строка 3, ячейка 3</td>
    </tr>
    <tr>
        <td>Строка 4, ячейка 2</td>
        <td>Строка 4, ячейка 3</td>
    </tr>
</table>

 

Ячейки заголовка

Первое отличие заключается в том, что теги td теги первой строки были заменены на теги th.

В то время как td является стандартной ячейкой данных, th ─ это ячейка заголовка.

Как и в случае с td элементами, они должны быть заключены внутри tr элементов.

Охватывающие столбцы и строки

Атрибуты colspan и rowspan используют в некоторых тегах как атрибуты td.

Если вы посмотрите на этот код в браузере, вы увидите, что во второй строке теперь две ячейки вместо трёх, причём вторая ячейка охватывает второй и третий столбцы.

Атрибут colspan означает “диапазон столбца” и будет охватывать ячейку на указанное количество ячеек. В данном примере это означает, что нет необходимости в третьем td элементе — две ячейки объединены в одну.

Атрибут rowspan похож на colspan, но он будет охватывать строки, а не столбцы.

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

Как и в случае с более простой таблицей размером 3×4, состоящей из 12 ячеек, числа в этих таблицах с объединёнными ячейками также должны суммироваться. Хотя в этом примере всего 10 ячеек и 2 интервала.

Страницы в тему:

Примеры CSS

Добавить комментарий