Парад ячеек и столбцов
УРОК «Объединяем ячейки по горизонтали и вертикали»
Дорогие друзья!
В этом уроке мы рассмотрим один из важных и самых сложных моментов в кодировании таблиц: объединение
ячеек по горизонтали и вертикали. Самое главное, что вам нужно при этом - быть очень внимательными,
чтобы получилось именно то, что нужно.
Чтобы объединять ячейки, для начала нужно очень хорошо представлять, что вы хотите сделать, а
лучше всего нарисовать желаемый результат на бумаге. После этого, посмотрите, сколько в вашей таблице
фактически строк и столбцов - это очень важно, так как, исходя из этого, пишется код.
Итак, сначала сразу напишу, что для объединения ячеек по горизонтали (одна ячейка образуется объединением 2 ячеек)
используется атрибут тега td - colspan="число" со значением, равным числу
объединяемых ячеек. А для объединения ячеек по вертикали используется атрибут rowspan="число"
со значением, равным числу объединяемых строк. Эти атрибуты применяются в открывающем теге td, который
кодирует объединяющую ячейку. Теперь подробнее и с примерами:
Давайте создадим вот такую несложную таблицу:
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
Мы видим, что здесь пока ничего не объединено, просто таблица из 4-х ячеек. Давайте сделаем так, чтобы
ячейка 4 включала в себя 2 ячейки: 4 и 5, находящихся под одной ячейкой 2. При этом число строк останется
прежним, а количество ячеек во второй строке станет 3. Для этого для тега td ячейки 2 пропишем атрибут
colspan со значением 2 и добавим одну ячейку во второй строке:
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
Ячейка 5 |
Код этой таблицы:
А теперь к этой таблице добавим ещё одну (третью) строку из 3-х ячеек:
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
Ячейка 5 |
| Ячейка 6 |
Ячейка 7 |
Ячейка 8 |
Теперь сделаем так, чтобы ячейка 6 объединяла 2 строки. Поскольку средствами HTML нельзя разбить ячейки
на 2 (только объединить), то для того, чтобы это выполнить, нужно будет добавить ещё одну строку с двумя ячейками
9 и 10. Добавим к тегу td ячейки 6 атрибут rowspan со значением 2:
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
Ячейка 5 |
| Ячейка 6 |
Ячейка 7 |
Ячейка 8 |
| Ячейка 9 |
Ячейка 10 |
Код этой таблицы:
Ещё один момент. А если нужно сделать так, чтобы одна ячейка объединяла вышестоящие ячейки, например,
нужно сделать подпись под таблицей? Здесь то же самое: для объединяющей ячейки применяется атрибут colspan,
например:
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
Ячейка 5 |
| Ячейка 6 |
Код этой таблицы:
А вот более сложная таблица, рассмотрите её самостоятельно:
| Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
| Ячейка 4 |
Ячейка 5 |
| Ячейка 6 |
Ячейка 7 |
Ячейка 8 |
Ячейка 9 |
| Ячейка 10 |
Ячейка 11 |
Ячейка 12 |
| Ячейка 13 |
Ячейка 14 |
Код этой таблицы:
Обратите внимание, что в этой таблице фактически 5 строк, а не три: ячейки 4 и 5, 13 и 14 - это отдельные строки.
Этот момент очень важен для объединения ячеек и строк!
Я постаралась в этом уроке изложить всё так, чтобы было просто и понятно, но если у вас будут вопросы, то
пишите в комеентариях - обязательно постараюсь ответить.
До встречи в следующем уроке!
