Как делается в html объединение ячеек в таблице?

Здравствуйте, сегодня я расскажу вам, как сделать в html объединение ячеек в таблице по горизонтали и по вертикали.

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

table{
	border-collapse: collapse;
}
td{
	border: 1px solid black;
	width: 60px;
	height: 50px;
}

Объединение ячеек по горизонтали

Начнем с этого, потому что этот прием проще. Допустим, вы хотите в первом ряду четыре ячейки объединить в одну. Это можно сделать с помощью атрибута colspan:

  1. Прописываем нужной ячейке атрибут colspan = “число ячеек, которые нужно объединить”
  2. Удаляем все лишние ячейки

Например:ячейки

Смотрите на этот кусок кода. Поскольку для первой ячейки в ряде задан colspan 4, по сути, она займет место четырех ячеек, а значит, следующие 3 в ряде нужно удалить, в них просто нет необходимости теперь.

Если же их не удалить, то в ряде образуется целых 7 ячеек и конечно он станет намного шире, чем следующие два. если не убрать клетки

Теперь удаляем их и видим, что все прекрасно отображается.по горизонтали

Объединение по вертикали

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

Давайте объединим последние ячейки в ряде 2 и 3. Для этого последней клетке в ряде 2 запишем rowspan = "2". Теперь нужно в ряде 3 удалить последнюю ячейку. Если этого не делать, то опять же, будут вылезать лишние ячейки, что будет сильно портить внешний вид нашей таблицы.по вертикали

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

Объединение по обеим сторонам

Одной ячейке можно задать оба атрибута. Давайте тоже посмотрим, как это работает. Объединим в одну ячейку 2 первые клетки ряда 2, и две первые – ряда 3. Итого 4 клетки объединим в одну.

В таком случае ячейка во втором ряде получат оба этих атрибута, во втором ряде удаляется следующая за ней ячейка, в третьем – первые две.двойное объединениеготово

Таким образом, можно создавать таблицы любой сложности, об их оформлении я уже немного рассказал в этой статье, сегодня же моей целью было показать вам трюк с объединением и я надеюсь, это у меня получилось и вы что-то поняли. Если есть вопросы, задавайте в комментарии.

Добавить комментарий