Как объединить ячейки таблицы
Короткий ответ
colspan растягивает ячейку на несколько столбцов, rowspan — на несколько строк:
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid silver; padding: 6px 12px; text-align: center; }
</style>
<table>
<tr><th colspan="2">Schedule</th></tr>
<tr><td rowspan="2">Monday</td><td>Math</td></tr>
<tr><td>Music</td></tr>
<tr><td>Tuesday</td><td>Art</td></tr>
</table>Как считать ячейки
В каждой строке сумма столбцов должна быть одинаковой. Ячейка с colspan="2" считается за две. Ячейка с rowspan="2" занимает место и в следующей строке, поэтому там пишут на одну <td> меньше — как строка «Music» в примере.
Итоговая строка
Типичный случай — подпись «Итого» во всю ширину, кроме последней колонки:
<style>
table { border-collapse: collapse; }
td { border: 1px solid silver; padding: 6px 12px; }
</style>
<table>
<tr><td>Tea</td><td>2</td><td>$6</td></tr>
<tr><td>Coffee</td><td>1</td><td>$5</td></tr>
<tr><td colspan="2"><b>Total</b></td><td><b>$11</b></td></tr>
</table>Частая ошибка
Ставят rowspan, но не убирают ячейку в следующей строке. Лишняя <td> выталкивается за пределы таблицы, и появляется «рваный» столбец справа:
<style>
td { border: 1px solid silver; padding: 6px 12px; }
</style>
<table>
<tr><td rowspan="2">Monday</td><td>Math</td></tr>
<tr><td>Extra</td><td>Music</td></tr>
</table>Функции из этого ответа
- <td>, <th> — Ячейки таблицы: `<td>` — с данными, `<th>` — заголовочная.
- <table> — Таблица из строк `<tr>` и ячеек.
- border-collapse — Раздельные у ячеек таблицы рамки или слитые в одну линию.