Таблицы могли показаться достаточно сложными в Уроке по 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 интервала.
Страницы в тему:
- Следующая страница: Списки описаний
- Предыдущая страница: Мета-теги
- Таблицы (Урок по HTML для начинающих )
- Таблицы: столбцы, верхние и нижние колонтитулы (Внушительный урок по HTML)
- HTML-тег: table
- HTML-тег: tr
- HTML-тег: th
- HTML-тег: td
Примеры CSS
- Ячейки заголовка
- Объединение ячеек 1: атрибут rowspan
- Объединение ячеек 2: атрибут colspan