В предыдущей статье с HTML-тегами для создания своего сайта (ссылка) были рассмотрены теги для вёрстки таблицы. Отдельно был отмечен момент, что ячейки таблицы можно объединять. В этой небольшой статье постараюсь понятно описать этот момент.
Создание таблицы.
И так, создадим простую небольшую таблицу, состоящую из 4-х строк и 3-х столбцов. Первая строка будет с ячейками, содержащими оглавления к столбцам (тег <td></td>).
Как объединить ячейки?
Для объединения ячеек есть два атрибута, которые прописываются в тегах <td></td> и <th></th> – это rowspan="", объединяющий строки столбца, и colspan="", объединяющий столбцы в строке. В качестве значения указывается число объединяемых строк/столбцов. На словах не очень понятно, но на деле чуть-чуть понятнее :)
Попробуем, как это работает на деле. При объединении 2-х строк 1-го столбца и 2-х столбцов 1-ой строки справа вылезает две ячейки, которых, по сути, не должно быть.
Решается это очень легко. Нужно просто удалить 2-ю ячейку 1-го столбца и 1-ю ячейку 3-го столбца. В результате соединяются ячейки, и справа ничего не выступает.
Вот таким образом можно сделать необычную таблицу. Например, если вам в первом столбце нужна одна объединенная ячейка, то нужно оставить только тег <tr></tr> с атрибутом rowspan="3" (потому что у нас 3 строки), а остальные удалить. Разумеется, у вас может быть совершенно иная таблица. Здесь главное разобраться, как это работает, а для этого нужно практиковаться. Попробуйте сами объединить другие ячейки.
⤵
Возможно, что-то непонятно описано в этой статье, поэтому вы можете задать вопрос в комментариях 💬
Материалы из статьи: https://disk.yandex.ru/d/UMLD35DEe_hxuA📎
Читайте также: