Исполняемые доки HTML: Colspan и rowspan

Q: Что делает colspan в HTML?

colspan растягивает или на несколько столбцов: занимает место трех ячеек в своей строке. Тогда в этой строке нужно на две ячейки меньше, чем в остальных.

Q: Что делает rowspan в HTML?

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

Q: Можно ли использовать colspan и rowspan одновременно?

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

Q: Какое максимальное значение у colspan?

Браузеры ограничивают colspan значением 1000, а rowspan значением 65534. Для colspan значение 0 или значение, которое не начинается с цифры, считается равным 1.

colspan: одна ячейка на несколько столбцов

colspan="n" делает ячейку шириной в n столбцов. Тогда в ее строке на n - 1 ячеек меньше. Здесь итог занимает первые два столбца:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>colspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Pens</td><td>2</td><td>4.00</td></tr>
    <tr><td>Paper</td><td>1</td><td>6.50</td></tr>
    <tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
  </table>
</body>
</html>

В последней строке две ячейки, но первая считается за две, поэтому в сумме строка, как и остальные, дает три столбца.

rowspan: одна ячейка на несколько строк

rowspan="n" делает ячейку высотой в n строк. В строках ниже этот столбец пропускается, потому что его уже заполняет высокая ячейка:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
  </style>
</head>
<body>
  <table>
    <tr><th>Team</th><th>Member</th></tr>
    <tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
    <tr><td>Bob</td></tr>
    <tr><td>Cy</td></tr>
    <tr><td>Web</td><td>Dee</td></tr>
  </table>
</body>
</html>

В строках Bob и Cy только один <td>: столбец Team уже занят ячейкой «Design». В HTML это никак не отмечено, поэтому читайте таблицу с rowspan сверху вниз и держите в уме, какие столбцы еще заняты.

colspan и rowspan вместе: расписание

Одна ячейка может растягиваться в обе стороны. Классический пример это расписание, где некоторые занятия длятся два слота, а некоторые идут два дня:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timetable</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
    th, td { border: 1px solid #6b7280; padding: 8px 14px; }
    thead th { background: #e5e7eb; }
    .html { background: #fde68a; }
    .css { background: #bfdbfe; }
    .lab { background: #bbf7d0; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
      <tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
      <tr><th scope="row">11:00</th><td>Free</td></tr>
    </tbody>
  </table>
</body>
</html>

Посчитайте строку 10:00: заголовок времени, затем Mon занят ячейкой HTML из строки выше, затем Lab заполняет Tue и Wed. В 11:00 Mon снова свободен, а Lab все еще занимает Tue и Wed, поэтому в строке одна ячейка с данными.

Подсчет ячеек, чтобы таблица оставалась ровной

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrong count</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
    .extra { background: #fee2e2; }
  </style>
</head>
<body>
  <table>
    <caption>Wrong</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td><td class="extra">D</td></tr>
  </table>
  <table>
    <caption>Right</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
</body>
</html>

В неправильной таблице вторая строка забыла, что A занимает ее первый столбец, и D попадает в третий столбец, которого нет ни в одной другой строке. Исправление: удалить одну ячейку. Та же ошибка с colspan это оставить все исходные ячейки в строке с широкой ячейкой.

Нехватка ячейки это обратная проблема: строка заканчивается раньше и оставляет дыру в конце.

Сгруппированные заголовки через colspan

Заголовок может растягиваться над столбцами, которые он подписывает, поверх строки более конкретных заголовков. Отметьте его scope="colgroup", чтобы программы чтения с экрана применяли его ко всем столбцам под ним:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grouped headers</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
    thead th { background: #e5e7eb; }
  </style>
</head>
<body>
  <table>
    <colgroup><col></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" scope="col">City</th>
        <th colspan="2" scope="colgroup">January</th>
        <th colspan="2" scope="colgroup">July</th>
      </tr>
      <tr>
        <th scope="col">Low</th><th scope="col">High</th>
        <th scope="col">Low</th><th scope="col">High</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
      <tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
    </tbody>
  </table>
</body>
</html>

«City» занимает обе строки заголовков через rowspan="2", а каждый месяц занимает свои два столбца через colspan="2". Элементы <colgroup> задают группы столбцов, на которые ссылается scope="colgroup". Тогда программа чтения с экрана на ячейке Rome 31 может сказать «Rome, July, High, 31». Об остальной структуре таблицы читайте на странице таблица в HTML.

Объединяйте ячейки только ради настоящей структуры

Объединения усложняют чтение таблицы программой чтения с экрана, а также сортировку, фильтрацию и копирование в электронную таблицу. Используйте их там, где данные действительно сгруппированы (итог, заголовок над подстолбцами, занятие на два часа). Если таблице нужно много объединений, две простые таблицы часто понятнее.

Частые ошибки

Занятые ячейки не удалены. Ячейка с colspan="2" заменяет две ячейки; удалите одну из исходных.
Забытые строки под rowspan. В каждой из них должно быть на одну ячейку меньше.
colspan у <tr>. Он работает только у <td> и <th>.
Объединения ради раскладки, например строка-баннер в таблице, которая верстает страницу. Для раскладки используйте CSS grid.
colspan="100%" в значении «на всю ширину». Браузер читает только цифры в начале, поэтому эта ячейка занимает 100 столбцов и добавляет в таблицу пустые столбцы. Значение это целое число столбцов.

Часто задаваемые вопросы

Что делает colspan в HTML?

colspan растягивает <td> или <th> на несколько столбцов: <td colspan="3"> занимает место трех ячеек в своей строке. Тогда в этой строке нужно на две ячейки меньше, чем в остальных.

Что делает rowspan в HTML?

rowspan растягивает ячейку вниз на несколько строк: <td rowspan="2"> заполняет свою строку и строку под ней. В следующей строке этот столбец нужно пропустить, потому что его уже занимает ячейка сверху.

Можно ли использовать colspan и rowspan одновременно?

Да. <td colspan="2" rowspan="2"> занимает блок из двух столбцов на две строки. В каждой строке, через которую он проходит, нужно на две собственные ячейки меньше.

Почему в таблице торчит лишняя ячейка?

С учетом объединений в одной строке оказалось больше ячеек, чем в остальных. Обычно строка под rowspan все еще содержит ячейку для занятого столбца, или в строке с colspan остались все исходные ячейки. Удалите лишний <td>.

Какое максимальное значение у colspan?

Браузеры ограничивают colspan значением 1000, а rowspan значением 65534. Для colspan значение 0 или значение, которое не начинается с цифры, считается равным 1.

Связанные концепции

colspan и rowspan в HTML: как объединить ячейки таблицы