Объединение ячеек

Объединение ячеек по горизонтали или вертикали используется в случае сложных табличных данных, для этого применяются атрибуты colspan и rowspan у элемента <td> или <th>. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, colspan="3" объединяет три ячейки, поэтому в следующей строке должно быть три элемента <td> или два <td>, из которых один охватывает две ячейки. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки (рис. 1).

Появление дополнительной ячейки в таблице

Рис. 1. Появление дополнительной ячейки в таблице

Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 1.

Пример 1. Объединение ячеек по вертикали и горизонтали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Объединение ячеек</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
   }
   td {
    border: 1px solid #333; /* Параметры границ */
    padding: 4px; /* Поля в ячейках */
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td rowspan="2">Вид соединения</td>
    <td colspan="2">Поля допусков ширины шпоночного паза</td>
   </tr>
   <tr>
    <td>Вал</td>
    <td>Втулка</td>
   </tr>
   <tr>
    <td>Свободное</td>
    <td>H9</td>
    <td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td>
    <td>N9</td>
    <td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td>
    <td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2.

Таблица с объединёнными ячейками