Урок 11: Ещё о таблицах

Название Ещё о таблицах может звучать немного вызывающе. Если вы уже можете создавать таблицы, то уже абсолютно ничто в HTML не может смутить вас.

Что же ещё?

При создании таблиц используются два атрибута: colspan и rowspan.

Colspan — сокращение отcolumn span/охват столбцов». Colspan используется в тэге <td> для специфицирования того, сколько столбцов охватывает данная ячейка:

Пример 1:


			<table border="1">
				 <tr>
				<td colspan="3">Cell 1</td>
				 </tr>
				 <tr>
				<td>Cell 2</td>
				<td>Cell 3</td>
				<td>Cell 4</td>
				 </tr>
			</table>
	

будет выглядеть в браузере:

Cell 1
Cell 2 Cell 3 Cell 4

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

Пример 2:


			<table border="1">
				 <tr>
				<td colspan="2">Cell 1</td>
				<td>Cell 2</td>
				 </tr>
				 <tr>
				<td>Cell 3</td>
				<td>Cell 4</td>
				<td>Cell 5</td>
				 </tr>
			</table>
	

будет выглядеть в браузере:

Cell 1 Cell 2
Cell 3 Cell 4 Cell 5

А как насчёт rowspan?

Как вы уже могли догадаться, rowspan специфицирует, сколько рядов охватывает данная ячейка:

Пример 3:


			<table border="1">
				 <tr>
				<td rowspan="3">Cell 1</td>
				<td>Cell 2</td>
				 </tr>
				 <tr>
				<td>Cell 3</td>
				 </tr>
				 <tr>
				<td>Cell 4</td>
				 </tr>
			</table>
	

будет выглядеть в браузере:

Cell 1 Cell 2
Cell 3
Cell 4

В этом примере rowspan имеет значение3в ячейке Cell 1. Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два). Cell 1 и Cell 2 при этом остаются в одном ряду, а Cell 3 и Cell 4 образуют отдельные ряды.

Удивлены? Ладно, это не так сложно. Неплохо будет нарисовать таблицу на бумаге до начала работы в HTML.

Неудивительно? Тогда вернитесь к началу и создайте пару таблиц с использованием colspan и rowspan.