Як об’єднати осередки в HTML-таблиці горизонтально і вертикально colspan і rowspan, HTML, XML,

Як об'єднати осередки в HTML-таблиці горизонтально

У HTML-таблиці кожен осередок обмежується набором тегіві, між якими розміщується вміст. Якщо ви не додаєте в тегдодаткові атрибути або стилі CSS , то кожен осередок за умовчанням займатиме рівно один стовпець.

Для HTML об'єднання осередків необхідно додати в рядок менше осередків, ніж до інших рядків і додати атрибут colspan=" " всередині тегакомірки, яку необхідно розтягнути.

Розглянемо простий приклад HTML-таблиці з двома рядками та двома стовпцями (чотири комірки). Її HTML-код виглядає так:

Далі, якщо потрібно об'єднати два осередки у верхньому рядку, використовуйте атрибутcolspan=" "наступним чином:

Осередок у верхньому рядку тепер охоплює два стовпці. Оскільки вона займає простір двох осередків, у першому ряду є лише один елемент td.

Можна з'єднати осередки таблиці HTML у будь-якій її області з будь-якою кількістю стовпців. Одним із найбільш корисних застосувань об'єднання осередків по горизонталі є створення заголовків таблиці. Якщо таблиця має стовпці n, помістіть атрибут colspan="n" в першу комірку верхнього ряду і видаліть інші комірки з цього ряду.

Як об'єднати осередки в HTML-таблиці по вертикалі: rowspan

Якщо потрібно, щоб осередок охоплював кілька рядків, слід додати атрибут rowspan=" " всередині тегатого осередку, який необхідно розтягнути по вертикалі. У кожному рядку під рядком, де починається розтягнута комірка, потрібно видалити одну комірку, щоб таблиця була вирівняна. Наприклад, коли ви розтягуєте комірку на трирядки, необхідно видалити по одному осередку в наступних двох рядках.

Розглянемо простий приклад HTML-таблиці з чотирма осередками, розділеними на два рядки та два стовпці. HTML-код:

Щоб здійснити HTML table об'єднання осередків по вертикалі, додайте для першого осередку верхнього рядка атрибут rowspan="2" , а потім видаліть одну з осередків у нижньому рядку. HTML-код тепер виглядатиме так:

Можна комбінувати горизонтальне та вертикальне об'єднання осередків в одній таблиці, як показано на малюнку зліва. Один осередок навіть може охоплювати кілька рядків і стовпців, як показано на малюнку праворуч. HTML-код для кожної таблиці наведений нижче:

Використання вертикально об'єднаних осередків

Об'єднання осередків по вертикалі HTML в одному стовпці можна використовувати, якщо потрібно створити заголовок для групи рядків, що примикають до цього стовпця. Це також допоможе розділити групи рядків за типом.

При поданні даних на сайті в табличному форматі, чим краще ви організуєте дані по підгрупах, тим простіше користувачам аналізувати та обробляти ці дані. Розділювачі простору допомагають нам аналізувати речі ефективніше. Також можна використовувати для стовпців колірний код, щоб їх було простіше візуально ідентифікувати:

Переклад статей «Комбінація Cells Horizontally в HTML Table Colspan», «How to Combine Cells Vertically в HTML Table: Rowspan» був підготовлений дружною командою проекту Сайтобудування від А до Я.