Как объединить ячейки в таблице
Перейти к содержимому

Как объединить ячейки в таблице

  • автор:

Как объединить ячейки в таблице

Вопросы по покупке sales@onlyoffice.com

Запросы на партнерство partners@onlyoffice.com

Запросы от прессы press@onlyoffice.com

Следите за нашими новостями:

© Ascensio System SIA 2024. Все права защищены

© Ascensio System SIA 2024. Все права защищены

Не пропустите обновление!

Получайте последние новости ONLYOFFICE на ваш email

Имя не указано.

Email не указан.

На ваш адрес электронной почты отправлено сообщение с подтверждением.

В Справочном центре ONLYOFFICE используются файлы cookie для обеспечения максимального удобства работы пользователей. Продолжая использовать этот сайт, вы соглашаетесь с тем, что мы можем сохранять файлы cookie в вашем браузере.

Объединение ячеек

Рис. 12.5

В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan , а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.

Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 12.4.

Пример 12.4. Объединение ячеек по вертикали и горизонтали

    Объединение ячеек   
Браузер Internet Explorer Opera Firefox
6.07.07.08.09.01.02.0
Поддерживается НетДаНетДаДаДаДа

Результат данного примера показан на рис. 12.6.

Рис. 12.6

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

HTML: Объединение ячеек внутри строк и столбцов

В таблицах часто нужно объединять строки или столбцы. Это помогает объединить различную информацию. Например, если в складской таблице нет товара, то нет смысла постоянно дублировать информацию — её можно объединить и написать, что товара нет на складе:

Товар Цена Количество
Чай Нет на складе

В HTML-разметке объединить ячейки в столбцах или строках можно с помощью специальных атрибутов colspan и rowspan . Их значениями является количество ячеек справа (для colspan ) или снизу (для rowspan ), которые нужно объединить с текущей. Отсчёт начинается с текущей ячейки, к которой применено свойство. Например, если стоит значение colspan=»2″ , то будет объединена текущая ячейка с соседней.

Разметка для примера выше без учёта объединения ячеек будет следующей:

 
Товар Цена Количество
Чай Нет на складе

Для того чтобы объединить ячейки, нужно сделать два действия:
1. В тег ячейки, которую будем объединять, добавить атрибут colspan со значением, равным количеству объединяемых ячеек справа
2. Удалить лишние ячейки из строки

 
Товар Цена Количество
Чай Нет на складе

Для объединения ячеек по вертикали используется атрибут rowspan . Алгоритм действий повторяет аналогичный при объединении по горизонтали. Единственное отличие — удалять ячейки нужно в соседних строках:

 
Сотрудник Зарплата Бонусы Менеджер
Алексей Примадонин 750$ 63$ Кодовёнок Хекслетович
Вениамин Редакторович 1200$ 0

В примере двое сотрудников взаимодействуют с одним менеджером. Можно указать его дважды, но нагляднее объединить ячейки по вертикали. Для этого был добавлен атрибут rowspan=»2″ , а во второй строке удалена четвёртая ячейка, так как её место займёт ячейка выше

Сотрудник Зарплата Бонусы Менеджер
Алексей Примадонин 750$ 63$ Кодовёнок Хекслетович
Вениамин Редакторович 1200$ 0

Задание

Создайте таблицу, состоящую из двух строк и трёх столбцов. Во второй строке объедините первые две ячейки, используя атрибуты. Первая строка должна быть шапкой таблицы

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Разделение и объединение ячеек таблиц

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

Разделение ячейки

  1. Выделите ячейку.
  2. Щелкните правой кнопкой мыши в ячейке и выберите «Разделить» .
  3. Выберите вариант разделения на несколько столбцов и (или) строк.

ПРИМЕЧАНИЕ. После разделения ячейки с данными это содержимое будет помещено в левую верхнюю ячейку.

Объединение ячеек

  1. Выделите ячейки.
  2. Щелкните правой кнопкой мыши по ячейкам и выберите «Объединить ячейки» .

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *