Атрибут colspan тега <td> — об'єднання комірок рядка

Атрибут colspan визначає об'єднання стовпців у один рядок.

Значення атрибута вказує на те, скільки стовпчиків буде об'єднано.

правити

Загальний опис

правити

Нотатка

colspan="0" вказує браузеру, що об'єднати треба групу стовпчиків.

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<td colspan="number">

Атрибут colspan може отримувати єдине значення:

number

Задає число стовпців, яке осередок даних повинно охоплювати. Значення атрибута повинно бути невід'ємним цілим числом. Не рекомендується використовувати значення понад 1000, тому що вони можуть бути обрізані до цього числа. Значення за замовчуванням 1.

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p>Приклад використання атрибута "colspan"</p>
<table>
<caption>Графік роботи</caption>
<thead>
  <tr>
    <th>День тиждня</th>
    <th>Роботчий час</th>
    <th>Обідня перерва</th>
  </tr>
</thead>
<tr>
  <td>Понеділок</td>
  <td colspan="1">8:00 - 16:00</td>
</tr> 
<tr>
  <td>Вівторок</td>
  <td>9:00 - 17:00</td>
  <td>13:00 - 14:00</td>
</tr>
<tr>
  <td  colspan="3">Середа</td>
</tr> 
<tr>
  <td>Четверг</td>
  <td>9:00 - 18:00</td>
  <td>13:30 - 14:30</td>
</tr> 
<tr>
  <td  colspan="2">П'ятниця</td>
  <td>12:00 - 13:30</td>
</tr> 
</table>

table,th,td{
  border: 1px solid grey;
  text-align:center;
} 

td{
   padding:10px;
 
}
th,td{
   padding:10px;
}
caption{
  font-size:20px;
}

<table>
  <caption>Графік роботи</caption>
  <tr>
    <th>День</th>
    <th colspan="2">Робочий час</th>
  </tr>
  <tr>
    <th scope="row">Понеділок</th>
    <td>9:00</td>
    <td>18:00</td>
  </tr>
  <tr>
    <th scope="row">Субота</th>
    <td colspan="2">вихідний</td>
  </tr>
</table>

table { border-collapse: collapse; }
th, td { border: 1px solid #999; padding: 6px 12px; text-align: center; }
th[scope="row"] { text-align: left; }
caption { padding-bottom: 6px; font-weight: 600; }