Здравствуйте, сегодня я расскажу вам, как сделать в html объединение ячеек в таблице по горизонтали и по вертикали.
Заморачиваться особо не будем, я создам простую таблицу из трех рядов и четырех ячеек в каждом ряде. Для них заданы простейшие стили, чтобы все отображалось корректно.
table{
border-collapse: collapse;
}
td{
border: 1px solid black;
width: 60px;
height: 50px;
}
Объединение ячеек по горизонтали
Начнем с этого, потому что этот прием проще. Допустим, вы хотите в первом ряду четыре ячейки объединить в одну. Это можно сделать с помощью атрибута colspan:
- Прописываем нужной ячейке атрибут
colspan= “число ячеек, которые нужно объединить” - Удаляем все лишние ячейки
Например:
Смотрите на этот кусок кода. Поскольку для первой ячейки в ряде задан colspan 4, по сути, она займет место четырех ячеек, а значит, следующие 3 в ряде нужно удалить, в них просто нет необходимости теперь.
Если же их не удалить, то в ряде образуется целых 7 ячеек и конечно он станет намного шире, чем следующие два.
Теперь удаляем их и видим, что все прекрасно отображается.
Объединение по вертикали
Это немного сложнее и осуществляется по такой же технологии, только используется атрибут под названием rowspan и удалять нужные ячейки нужно в столбце, а не ряде, что немного усложняет задачу, но на самом деле все просто, если вы быстро поймете суть.
Давайте объединим последние ячейки в ряде 2 и 3. Для этого последней клетке в ряде 2 запишем rowspan = “2”. Теперь нужно в ряде 3 удалить последнюю ячейку. Если этого не делать, то опять же, будут вылезать лишние ячейки, что будет сильно портить внешний вид нашей таблицы.
Объединение по обеим сторонам
Одной ячейке можно задать оба атрибута. Давайте тоже посмотрим, как это работает. Объединим в одну ячейку 2 первые клетки ряда 2, и две первые – ряда 3. Итого 4 клетки объединим в одну.
В таком случае ячейка во втором ряде получат оба этих атрибута, во втором ряде удаляется следующая за ней ячейка, в третьем – первые две.
Таким образом, можно создавать таблицы любой сложности, об их оформлении я уже немного рассказал в этой статье, сегодня же моей целью было показать вам трюк с объединением и я надеюсь, это у меня получилось и вы что-то поняли. Если есть вопросы, задавайте в комментарии.