HTML: Объединение ячеек внутри строк и столбцов

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

В HTML-разметке объединить ячейки в столбцах или строках можно с помощью специальных атрибутов colspan и rowspan. Их значениями является количество ячеек справа (для colspan) или снизу (для rowspan), которые нужно объединить с текущей. Отсчёт начинается с текущей ячейки, к которой применено свойство. Например, если стоит значение colspan="2", то будет объединена текущая ячейка с соседней.

Разметка для примера выше без учёта объединения ячеек будет следующей:

<table>
    <thead>
        <tr>
            <th>Товар</th>
            <th>Цена</th>
            <th>Количество</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Чай</td>
            <td>Нет на складе</td> <!-- ячейка, которую хотим объединить -->
            <td></td>
        </tr>
    </tbody>
</table>

Для того, чтобы объединить ячейки, нужно сделать два действия:
1. В главную ячейку (которую будем объединять с другими) поместить атрибут colspan со значением, равным количеству объединяемых ячеек справа.
2. Удалить лишние ячейки из строки.

<table>
    <thead>
        <tr>
            <th>Товар</th>
            <th>Цена</th>
            <th>Количество</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Чай</td>
            <td colspan="2">Нет на складе</td>
        </tr>
    </tbody>
</table>

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

Задание

Добавьте таблицу с 2 строчками и 3 столбцами. Во второй строке объедините первые две ячейки, используя атрибуты. Первая строка должна быть заголовком таблицы