Colspan и Rowspan

Структура HTML-разметки означает, что в некоторых строках может быть четыре ячейки, три ячейки, две ячейки и т. Д. Для того, чтобы это действительно функционировало, вам нужно использовать атрибуты colspan и rowspan (значение этих атрибутов всегда целые числа). Использовать эти атрибуты может быть довольно сложно, поэтому вам может понадобиться немного терпения.

Давайте воспользуемся примером из предыдущей главы и в первой строке будет только две ячейки вместо трех, а также добавим вторую ячейку третьей и четвертой строк.

<table border="1" width="100%">
	<tr>
		<td colspan="2">Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
	</tr>
	<tr>
		<td>Row 2, cell 1</td>
		<td>Row 2, cell 2</td>
		<td>Row 2, cell 3</td>
	</tr>
	<tr>
		<td>Row 3, cell 1</td>
		<td rowspan="2">Row 3, cell 2</td>
		<td>Row 3, cell 3</td>
	</tr>
	<tr>
		<td>Row 4, cell 1</td>
		<td>Row 4, cell 3</td>
	</tr>
</table>

Как вы можете видеть, я удалила третью ячейку в строке 1 и добавила атрибут colspan к первой ячейке в строке 1. Вы должны знать, когда создаете ячейки, которые охватывают столбцы, что span всегда начинается справа.

Чтобы создать ячейку, охватывающую ряды, вы должны помнить, что при разборе на ряды span всегда берет место снизу. Это означает, что вы должны удалить ячейку в следующих строках, иначе таблица не будет выглядеть так, как вы хотели, так как span вытеснит ячейку, которая была снизу.