HTML: Объединение ячеек внутри строк и столбцов
В таблицах часто нужно объединять строки или столбцы. Это помогает объединить различную информацию. Например, если в складской таблице нет товара, то нет смысла указывать многие из полей — тогда можно их объединить и написать, что товара нет на складе:
Товар | Цена | Количество |
---|---|---|
Чай | Нет на складе |
В 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 столбцами. Во второй строке объедините первые две ячейки, используя атрибуты. Первая строка должна быть заголовком таблицы
Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.