Ранее, в разделе "Начинаем изучать HTML таблицы" мы уже познакомились с элементами, позволяющими отобразить данные в табличном виде. И уже там таблицы могли показаться достаточно сложными конструкциями. Ведь может оказаться не так просто визуально увидеть двухмерную сетку в одномерных строках кода.
Что ж, на самом деле все еще сложнее. И виноваты в этом атрибуты rowspan и colspan.
Следующий код похож на тот, что приведен в уроке "Начинаем изучать HTML таблицы":
<table border="1">
<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>
Однако, внимательно присмотревшись, вы заметите и изменения, произошедшие внутри тега table. Во-первых, мы заменили теги td первой строки на теги th. В то время как тег td – стандартная ячейка данных, тег th – ячейка-заголовок. Как и в случае тега td, эти теги должны находиться внутри тега tr.
Мы также в некоторых тегах td использовали атрибуты colspan и rowspan. Если вы посмотрите этот код в браузере, то увидите, что теперь на второй строке в таблице вместо трех ячеек всего две – вторая ячейка захватывает второй и третий столбцы. Атрибут colspan будет объединять столько ячеек, какое значение ему присвоено. Это значит, что в нашем примере необходимость в третьем теге td отпала, так как две ячейки сливаются в одну.
Атрибут rowspan аналогичен атрибуту colspan за исключением того, что он позволяет объединять строки, а не столбцы. Тут также объединяемые ячейки нужно удалять.
Закончим изучение HTML таблиц мы в уроке "Заканчиваем изучать HTML таблицы".
