Атрибут colspan тега <th> — об'єднання по горизонталі

HTML

<p>Приклад використання атрибута "colspan"</p>
<table border = "1">
		<tr>
			<th colspan = "3">Канцелярські товари</th>
			<th colspan = "2">Товари для дому</th>
		</tr>
		<tr>
			<td>Ручка</td>
			<td>Олівець</td>
			<td>Зошит</td>
			<td>Диван</td>
			<td>Стіл</td>
		</tr>
		<tr>
			<td>Папір</td>
			<td>Клей</td>
			<td>Альбом</td>
			<td>Ліжко</td>
			<td>Крісло</td>
		</tr>
	</table>

CSS

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

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

HTML

<table class="ok">
    <caption>Правильно: у кожному рядку зайнято рівно три колонки</caption>
    <tr>
        <th rowspan="2" scope="col">Місто</th>
        <th colspan="2" scope="colgroup">Населення</th>
    </tr>
    <tr>
        <th scope="col">2001</th>
        <th scope="col">2021</th>
    </tr>
    <tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr>
    <tr><td>Львів</td><td>725 000</td><td>717 000</td></tr>
</table>

<table class="bad">
    <caption>Помилка: colspan додали, а зайвий заголовок не прибрали</caption>
    <tr>
        <th>Місто</th>
        <th colspan="2">Населення</th>
        <th>Населення</th>
    </tr>
    <tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr>
    <tr><td>Львів</td><td>725 000</td><td>717 000</td></tr>
</table>

<table class="ok">
    <caption>colspan="0" — не «до кінця рядка», а рівно одна колонка</caption>
    <tr><th colspan="0">Разом</th><th>2001</th><th>2021</th></tr>
    <tr><td>Дві області</td><td>3 336 000</td><td>3 669 000</td></tr>
</table>

CSS

table {
    margin-bottom: 24px;
    border-collapse: collapse;
}

caption {
    margin-bottom: 6px;
    font-weight: 600;
    text-align: left;
}

td,
th {
    padding: 6px 10px;
    border: 1px solid #b9c6d8;
}

th {
    background: #eef3fb;
}

.bad caption {
    color: #c0392b;
}

.bad th {
    background: #fdeeee;
}

.bad {
    outline: 2px dashed #d64545;
    outline-offset: 3px;
}