HTML: Объединение ячеек в таблице

Смежные ячейки в таблице могут объединяться по горизонтали или вертикали с целью размещения большего объема данных. Например, в таблице из четырех строк и четырех столбцов все ячейки в первой строке можно объединить и поместить в этой строке красивый заголовок. Возможно также объединение нескольких строк или столбцов.

Для объединения ячеек по горизонтали, то есть объединение идущих друг за другом ячеек в строке таблицы, используется атрибут colspan, в значении задается число смежных ячеек в строке, которое вы хотите объединить.

Для объединения ячеек по вертикали, то есть объединение расположенных друг под другом ячеек в столбце таблицы, используется атрибут rowspan, в значении задается число смежных ячеек столбца, которое вы хотите объединить:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>

    <h4>Объединим две ячейки в строке таблицы:</h4>
    <table border="1">
      <tr>
        <th>Имя</th><th colspan="2">Телефон</th>
      </tr>
      <tr>
        <td>Петя Иванов</td><td>123 45 67</td><td>234 56 78</td>
      </tr>
    </table>
	 
    <h4>Объединим две ячейки в столбце таблицы:</h4>
    <table border="1">
      <tr>
        <th>Имя</th><td>Петя Иванов</td>
      </tr>
      <tr>
        <th rowspan="2">Телефон</th><td>123 45 67</td>
      </tr>
      <tr><td>234 56 78</td></tr>
    </table>

  </body>
</html>

Попробовать »

С этой темой смотрят: