Объединение ячеек table html: Объединение ячеек таблицы.

Тег в HTML, как сделать таблицу, примеры, свойства, объединение ячеек

Тег <table> позволяет сделать таблицу в HTML, то есть представить данные в табличном виде, состоящем из строк и столбцов, а также ячеек, содержащих данные. В ячейках можно разместить любую информацию: текст, изображения, видео и т.д. Таблицы имеют множество настроек границ и ячеек: цвета и прозрачность, группировка ячеек и столбцов, ширина, высота, отступы и т.д.

Содержание

1. Самая простая таблица
2. Атрибуты
3. Теги и разделы
4. Группировка столбцов
5. Объединение ячеек таблицы
6. Табличная верстка в CSS

Самая простая таблица

Самую простую таблицу можно составить из трех тегов: table, tr, td. tr – определяет строку, а td – ячейку. По умолчанию содержимое td элементов выравнивается влево.

Ниже показан пример такой таблицы. Из стилизации применено только атрибут border, чтобы сделать рамку, и строка-заголовок выделена жирным.

See the Pen
table простой пример by Андрей (@adlibi)
on CodePen.

Атрибуты

align

Отвечает за выравнивание таблицы на странице(left – по левому краю, right – по правому, center – по центру). Пример: <table align="left">.

background

определяет фоновый рисунок

bgcolor

Применяется для создания фона, например: <table bgcolor="red"> (фон красный).

border

Устанавливает границы таблицы

bordercolor

цвет границ

cellpadding

Создает отступы в таблице между краями ячеек и их содержимым. Пример: <table cellpadding=”4″>.

cellspacing

расстояние между границами ячеек

cols

Задает количество столбцов в таблице, ускоряя ее отображение в браузере.

frame

определяет, как отображать границы

height

высота таблицы

rules

где отображать границы между разными видами ячеек

summary

кратко описывает таблицу или ее предназначение. Признан устаревшим для HTML5.

width

Сообщает ширину таблицы браузеру

Теги и разделы

Приведем различные теги, применяемые при создании таблиц.

<caption> – название таблицы. На примере выделен красным цветом.

See the Pen
table caption by Андрей (@adlibi)
on CodePen.

<th> – заголовочная ячейка. Должна помещаться внутри <tr>. Обычно по умолчанию ее содержимое выделяется браузером жирным и центрируется. На примере первая строка оформлена через теги th.

• <thead> – группирует содержимое заголовочной части таблицы.
• <tbody> – группировка основного контента.
• <tfoot> -группирует футер (нижнюю часть).

На примере есть все эти 3 раздела. У первого задан цвет содержимого красный, у второго – синий, у третьего – зеленый.

See the Pen
table head foot by Андрей (@adlibi)
on CodePen.

Группировка столбцов

<colgroup> и <col> – позволяют задавать параметры для нескольких колонок сразу, что приводит к уменьшению кода и более ранней отрисовке элемента. При этом <colgroup> как раз позволяет устанавливать такие общие свойства, а <col> применяется внутри него, чтобы задать для колонки отличающиеся от общих свойства. <colgroup> разрешается использовать как одиночный тег, если он не содержит внутри себя тегов <col>. Их работу проще всего понять на примере. Мы задали для первых 2-х столбцов один цвет фона, а для следующего (третьего) – другой.

See the Pen
table colgroup by Андрей (@adlibi)
on CodePen.

Атрибут span для тега col позволяет установить количество колонок, к которым будут применяться параметры.

Объединение ячеек таблицы

Чтобы объединить две или более ячейки по вертикали в одну используйте атрибут colspan.

На примере ниже мы объединили во второй строке 2 столбца, применив <td colspan="2" и выделив их для наглядности желтым.

See the Pen
table colspan by Андрей (@adlibi)
on CodePen.

Для объединения ячеек по вертикали используйте rowspan. Ниже пример такого объединения с использованием атрибута <td rowspan="2".

See the Pen
table rowspan by Андрей (@adlibi)
on CodePen.

Табличная верстка в CSS

Нужно сказать, что применение табличных тегов HTML становится все реже в пользу применения инструкций CSS. В CSS верстка таблиц возможно с помощью специального свойства display, имеющего значения, полностью имитирующие различные элементы таблицы: ячейки, столбцы, заголовки и т.д. Кроме того существует мощный способ компоновки элементов CSS Flexbox, позволяющий выстраивать элементы в виде сетки. Все это позволяет при желании отказаться от тега table.

Объединение ячеек с display:table — HTML и CSS — Форумы SitePoint

mikey_w 31 октября 2015 г., 2:40

#1

Для шапки моего веб-сайта я использую display:table.

В этой таблице есть столбец-1 (70%) и столбец-2 (30%). Для первой строки это работает нормально, так как левая ячейка содержит название компании, а правая ячейка содержит контактную информацию, а наличие отдельных ячеек позволяет мне управлять вещами независимо.

Как только это заработало, я добавил вторую строку туда, где хотел разместить главное меню.

Однако это создает некоторые неприятные проблемы…

• Мне пришлось добавить ячейку-заполнитель (Row2, Col2), чтобы затенение меню покрывало всю ширину экрана.

• Если мое меню увеличится в размере, оно переместится, как только заполнит 70% ширины

• Когда мое адаптивное меню превращается в раскрывающееся меню на небольших экранах, элементы, застрявшие в ячейке 70%, искажают выравнивание по мере изменения размера элементов.

Можно ли как-то объединить ячейку-1 и ячейку-2 в строке-2 и сделать ее шириной 100%?

Судя по моим исследованиям в Интернете, ответ будет «Нет».

фелгалл 31 октября 2015 г., 5:14

#2

mikey_w:

Можно ли каким-то образом объединить ячейку-1 и ячейку-2 в строке-2 и сделать ее шириной 100%?

С таблицами CSS вы вкладываете таблицы, чтобы охватывать строки или столбцы.

Например: Таблица с двумя столбцами, вложенная как вторая строка таблицы с одним столбцом, дает вам три ячейки — одну в первой строке и две во второй строке.

mikey_w 31 октября 2015 г.

#3

фелгалл:

С таблицами CSS вы вкладываете таблицы, чтобы охватывать строки или столбцы.

Например: таблица с двумя столбцами, вложенная как вторая строка таблицы с одним столбцом, дает вам три ячейки — одну в первой строке и две во второй строке.

Я надеялся, что этот код сработает, но он просто вставляет встроенную таблицу в псевдостроку-2, столбец-2.

 

<голова>
    <стиль>
        тело{
            маржа: 0;
            заполнение: 0;
        }
        
        дел {
            высота: 50 пикселей;
            отступ: 15px 0 0 0;
        }
        
        .стол{
            дисплей: таблица;
        }
        
        .tableAsRow100{
            дисплей: таблица;
            ширина: 100%;
            выравнивание текста: вправо;
        }
        .
  ряд{
            отображение: таблица-строка;
        }
        
        .клетка{
            отображение: таблица-ячейка;
        }
        
        .розовый{
            цвет фона: #FFC0CB;
        }
        
        .лимон{
            цвет фона: #FFFACD;
        }
        
        .серо-голубой{
            цвет фона: #ADD8E6;
        }
    

<тело>
        <дел>
            
            <дел>
                
Строка-1, столбец-1
                
Строка-1, столбец-2
                
Строка-1, столбец-3