HTML для начинающих:Объединение ячеек таблицы.Комбинированные таблицы

Уроки HTML для начинающих.
Таблица HTML (урокN3)

И так в этом уроке (N3) мы с Вами научимся делать комбинированные таблицы.А точнее разберём ещё 2 атрибута таблицы ROSPAN и COLSPAN

кол-во строк	<rowspan="#">	Указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1)
кол-во столбцов	<colspan="#">	Указывает кол-во столбцов, которое объединено в одной ячейке. (по умолчанию=1)

И так,давайте запомним: если нам нужно объединить вертикальные столбцы, берем атрибут COLSPAN,
а если нам нужно объединить в одной ячейке несколько рядов,то берем ROWSPAN
Поехали!))

ячейка 1	ячейка 2	ячейка 3
ячейка 4, занимающая три столбца

Верхний ряд ячеек надеюсь Вы не забыли,мы делали в первом нашем уроке здесь.

<tr> 
<td>ячейка 1</td> 
<td>ячейка 2</td> 
<td>ячейка 3</td> 
</tr> 

Рассмотрим теперь нижнюю строчку.Я уже говорила,что атрибут COLSPAN занимает столько же места, сколько и верхние ячейки.(в нашем примере)

<tr> 
<td colspan=3> 4 ячейка, занимающая три столбца </td> 
</tr>

Обратите внимания как просто,у нас в верхнем ряду 3 ячейки,значит и COLSPAN=3.А теперь части таблицы совместим.
Я всегда в уроках добавляю border=5,чтобы Вам было лучше видно)).

<table border=5>
<tr> 
<td>ячейка 1</td> 
<td>ячейка 2</td> 
<td>ячейка 3</td> 
</tr>
<tr> 
<td colspan=3> 4 ячейка, занимающая три столбца </td> 
</tr>
</table>

И вот итог:

ячейка 1	ячейка 2	ячейка 3
4 ячейка, занимающая три столбца

Ещё пример(посложнее-проверка на понимания урока)):
Я ещё и добавила тег style="text-align:center это мы с Вами проходили во втором уроке здесь

<table border="5" style="text-align:center">
<tr>
<td colspan="3"> ячейка 1</td>
</tr>
<tr>
<td> ячейка 2</td>
<td> ячейка 3</td>
<td> ячейка 4</td>
</tr>
<tr>
<td colspan="3"> ячейка 5</td>
</tr>
</table>

И вот что у нас получилось:

ячейка 1
ячейка 2	ячейка 3	ячейка 4
ячейка 5

---

А сейчас расмотрим атрибут ROWSPAN,я уже говорила,что он обьединяет в одной ячейке несколько рядов.

<tr> 
<td rowspan=3> ячейка 1, занимающая три ячейки</td> 
</tr> 

а это наши три ячейки (обратите внимания:3 ряда)

<tr> 
<td>ячейка 1</td> 
</tr>
<tr> 
<td>ячейка 2</td> 
</tr>
<tr> 
<td>ячейка 3</td> 
</tr> 

теперь части таблицы совместим.

<table border="5" style="text-align:center">
<tr> 
<td rowspan=3> ячейка 1, занимающая три ячейки</td> 
<td>ячейка 2</td> 
</tr>
<tr> 
<td>ячейка 3</td> 
</tr>
<tr> 
<td>ячейка 4</td> 
</tr>
</table>

И вот что у нас получилось:

ячейка 1, занимающая три ячейки	ячейка 2
	ячейка 3
	ячейка 4

Ещё пример(посложнее-проверка на понимания урока)):

<table border="5">
<tr>
<td> ячейка1</td>
<td> ячейка2</td>
<td> ячейка3</td>
</tr>
<tr>
<td> ячейка4</td>
<td> ячейка5</td>
<td> ячейка6</td>
</tr>
<tr>
<td> ячейка7</td>
<td> ячейка8</td>
<td> ячейка9</td>
</tr>
</table>

вот так это выглядет:

ячейка1	ячейка2	ячейка3
ячейка4	ячейка5	ячейка6
ячейка7	ячейка8	ячейка9

Теперь объединим в таблице размером 3x3 второй столбец.
Для этого в первой строке в ячейке 2 пропишем rowspan=”3”, а во второй и третьей строках удалим ячейки 5 и 8.

<table border="5" style="text-align:center">
<tr>
<td> ячейка1</td>
<td rowspan="3"> ячейка 2</td>
<td> ячейка3</td>
</tr>
<tr>
<td> ячейка4</td>
<td> ячейка6</td>
</tr>
<tr>
<td> ячейка7</td>
<td> ячейка9</td>
</tr>
</table>

И вот что получаем:

ячейка1	ячейка 2	ячейка3
ячейка4		ячейка6
ячейка7		ячейка9

---

На этом урок заканчивается))Что не понятно пишите,будем разбераться вместе.

• Атрибуты таблицы. ЗДЕСЬ.
• Все цвета интернета ЗДЕСЬ
• Подобрать HTML код в ручную ЗДЕСЬ



Понравился пост - добавь в закладки, чтобы не потерять:

Похожие по тематике посты - еще почитать:

.