Урок 4.5: Объединение ячеек в таблице

Для обхединения ячеек в таблице, у тега <td> есть два атрибута. Это colspan и rowspan.

colspan - объединение ячеек расположенных по горизонтали.

rowspan - объединение ячеек расположенны по вертикали.

Параметр для этих атрибутов - указание количество объединяемых ячеек.

Пример - горизонтальное объединение ячеек

<html>  <head>   <title>Объединение ячеек</title>  </head>  <body>   <table border="1">    <tr>     <td colspan="2">Ячейка 1 и ячейка 2</td>     <!-- Тут была ячейка 2, теперь она объединена с ячейкой 1 -->     <td>Ячейка 3</td>    </tr>    <tr>     <td>Ячейка 4</td>     <td>Ячейка 5</td>     <td>Ячейка 6</td>    </tr>   </table>  </body> </html>

Результат объединения ячеек по горизонтали

Объединение ячеек по горизонтали

Пример - вертикальное объединение ячеек

<html>  <head>   <title>Объединение ячеек</title>  </head>  <body>   <table border="1">    <tr>     <td rowspan="2">Ячейка 1 и ячейка 4</td>     <td>Ячейка 2</td>     <td>Ячейка 3</td>    </tr>    <tr>     <!-- Тут была ячейка 4, теперь она объединена с ячейкой 1 -->     <td>Ячейка 5</td>     <td>Ячейка 6</td>    </tr>   </table>  </body> </html>

Результат объединения ячеек по вертикали

Объединение ячеек по вертикали

Важно: при объединении ячеек нельзя указывать в коде эти ячейки. Это приведет к нарушению правильного отображения таблицы.

Пример неправильного объединения ячеек

<html>  <head>   <title>Объединение ячеек</title>  </head>  <body>   <table border="1">    <tr>     <td colspan="2">Ячейка 1</td>     <td>Ячейка 2</td>     <td>Ячейка 3</td>    </tr>    <tr>     <td>Ячейка 4</td>     <td>Ячейка 5</td>     <td>Ячейка 6</td>    </tr>   </table>  </body> </html>

Результат неправильного объединения ячеек

Неправильное объединение ячеек


Как видите при неправильном объединении, в таблице, под ячейкой 3 появилось пустое место, так называемая скрытая ячейка. Это произошло из-за того, что браузер воспринимает это так: между ячейкой 1 и ячейкой 2 должна быть еще одна ячейка объединенная с первой ячейкой.

<< Заголовки  в таблице | Перечень уроков | Цвета в таблице >>