Подробно и детально расскажу о том, как объединять ячейки по вертикали и горизонтали в таблицах.
В этой статье мы не будем объяснять принципы создания html таблиц, для получениях этих знаний пройдите наш курс по HTML.
Для объединения ячеек внутри table существуют два атрибута, задаваемые тэгу <td> это colspan(объединение по горизонтали) и rowspan(объединение по вертикали).
У некоторых людей появляются затруднения с использованием этих атрибутов, проблемы с объединением ячеек.
Атрибуты colspan и rowspan принимают в качестве параметра целые значения от 0 до 1000. Вот небольшой пример того, как можно объединять ячейки в таблице.
Код:
На первый взгляд реализована не очень сложная структура, но поглядев на обилие <td> и <tr> элементов в коде сложно понять по какому принципу можно объединить еще пару ячеек.
Мы вам предлагаем универсальный и очень удобный способ объединения ячеек.
Для начала подготовьте заготовку вашей будущей таблицы, представив ее со всеми разделенными ячейками. Это может быть таблица 3х3, 6х10 и так далее. Каждой ячейке дадим свой номер, начиная считать слева направо и сверху вниз.
Разберем создание таблицы, показанной выше по этому методу.
Вот как будет выглядеть код нашей заготовки и сама заготовка:
1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
Необходимо объединить ячейки с номерами 1,2,3 по горизонтали. Для этого в коде, ячейке № 1 добавляем атрибут colspan со значением 3. И удаляем <td> элементы с номерами 2 и 3. Номера объединенных ячеек запишем в полученную ячейку.
Так изменится наш код и внешний вид таблицы:
1,2,3 | 4 | ||
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
Теперь нам нужно объединить ячейки 9 и 13 по вертикали. Проделываем аналогичную процедуру - ячейке № 9 задаем атрибут rowspan со значением 2, удаляем ячейку с № 13, в объединенную ячейку записываем номера ячеек из которых она состоит.
Так изменится наш код и внешний вид таблицы:
1,2,3 | 4 | ||
5 | 6 | 7 | 8 |
9,13 | 10 | 11 | 12 |
14 | 15 | 16 |
Осталось объединить 11,12,15,16 ячейки в одну. Для этого ячейке с № 11 записываем атрибуты colspan="2"rowspan="2". Ячейки 12,15,16 удаляем из кода. Записываем в объединенную ячейку номера 11,12,13,14.
Так изменится наш код и внешний вид таблицы:
1,2,3 | 4 | ||
5 | 6 | 7 | 8 |
9,13 | 10 | 11,12,15,16 | |
14 |
Вот и все, мы получили исходную таблицу, теперь ячейки можно заполнять той информацией, которая вам будет удобно.
Надеемся, вы поняли принцип создания сложных таблиц с объединением ячеек.
Добавить комментарий
Авторизоваться с помощью: