Урок 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 должна быть еще одна ячейка объединенная с первой ячейкой.

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