Як зробити в html об’єднання осередків в таблиці

Привіт, сьогодні я розповім вам, як зробити в html об'єднання осередків в таблиці по горизонталі і по вертикалі.

За кілька років в інтернеті я знайшов для себе ряд корисних сайтів і сервісів, які не мають прямого відношення до сайтобудування і взагалі темі цього блогу, але я просто хотів би порекомендувати їх і вам:

Кешбек сервіси. такі як Epn.bz і Летішопс. Перший дозволить заощадити до 15% на Аліекспресс, а другий скупитися з Кешбек більш ніж в 1000 інтернет-магазинів. Пошук авіаквитків, просто відмінний сервіс - Aviasales.ru. Шукає по сотням сайтів і видає всі варіанти авіаквитків, можна вибирати найдешевші або ті, де менше час у дорозі. Також у них відмінне моб. додаток і браузерні плагін.

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

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 видалити останній осередок. Якщо цього не робити, то знову ж таки, будуть вилазити зайві осередки, що буде сильно псувати зовнішній вигляд нашої таблиці.

Об'єднання по обидва боки

Однією осередку можна задати обидва атрибута. Давайте теж подивимося, як це працює. Об'єднаємо в одну клітинку 2 перші клітини ряду 2, і дві перші - ряду 3. Разом 4 клітини об'єднаємо в одну.

В такому випадку осередок у другому ряді отримають обидва цих атрибута, в другому ряді видаляється наступна за нею осередок, в третьому - перші дві.