Расширим Ячейку1 на два столбца

Расширим Ячейку1 на два столбца, задав ей атрибут colspan в значении 2. При этом она вытеснит ячейки справа и таблица развалится:

<table>

       <tr>

                   <td colspan="2">Ячейка 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>

Таблица развалилась (Ячейка3 вылезла справа):

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

Расширим Ячейку1 на два столбца без разваливания таблицы

Чтобы поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек справа от нашей (это Ячейка2 или Ячейка3 - без разницы):

<table>

       <tr>

                   <td colspan="2">Ячейка 1</td>

                   <td>Ячейка 2</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
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Расширим Ячейку1 на 3 столбца без разваливания таблицы

Расширим Ячейку1 на 3 столбца, задав ей атрибут colspan в значении 3. При этом удалим еще одну ячейку справа, чтобы таблица не развалилась:

<table>

       <tr>

                   <td colspan="3">Ячейка 1</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
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Блок 2. Как объединить строки

Кроме атрибута colspan существует также аналогичный атрибут rowspan, который расширяет ячейки по вертикали.

Расширим Ячейку1 на два ряда

Расширим Ячейку1 на два ряда, задав ей атрибут rowspan в значении 2. При этом она вытеснит ячейки из ряда под ней и таблица развалится:

<table>

       <tr>

                   <td rowspan="2">Ячейка 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>

Таблица развалилась (Ячейка6 вылезла справа):

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

Расширим Ячейку1 на два ряда без разваливания таблицы

Чтобы поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек из второго ряда (и это не обязательно Ячейка4, которая находится непосредственно под нашей Ячейкой1, можно удалять любую, я удалил ячейку с номером 5):

<table>

       <tr>

                   <td rowspan="2">Ячейка 1</td>

                   <td>Ячейка 2</td>

                   <td>Ячейка 3</td>

       </tr>

       <tr>

                   <td>Ячейка 4</td>

                   <td>Ячейка 6</td>

       </tr>

       <tr>

                   <td>Ячейка 7</td>

                   <td>Ячейка 8</td>

                   <td>Ячейка 9</td>

       </tr>

</table>

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

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

Расширим Ячейку1 на 3 ряда без разваливания таблицы

Теперь расширим нашу ячейку не на два ряда, а на 3, задав ей rowspan в значении 3. При этом удалим одну из ячеек из третьего ряда (ячейку 7, 8 или 9 - без разницы), чтобы таблица не развалилась:

<table>

       <tr>

                   <td rowspan="3">Ячейка 1</td>

                   <td>Ячейка 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

Расширим еще и Ячейку2 на 2 столбца

Расширим еще и Ячейку2 на 2 столбца в дополнение к первой ячейке. Для этого Ячейке2 добавим colspan в значении 2. При этом удалим Ячейку3, чтобы таблица не развалилась:

<table>

       <tr>

                   <td rowspan="3">Ячейка 1</td>

                   <td colspan="2">Ячейка 2</td>

       </tr>

       <tr>

                   <td>Ячейка 4</td>

                   <td>Ячейка 6</td>

       </tr>

       <tr>

                   <td>Ячейка 7</td>

                   <td>Ячейка 9</td>

       </tr>

</table>

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

Ячейка 1	Ячейка 2
	Ячейка 4	Ячейка 6
	Ячейка 7	Ячейка 9

 

 

Задачи для решения