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

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

Товар Цена Количество
Чай Нет на складе

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

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

<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 столбцами. Во второй строке объедините первые две ячейки используя атрибуты. Первая строка должна быть заголовком таблицы


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.