Объединение ячеек
В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan , а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.
Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 12.4.
Пример 12.4. Объединение ячеек по вертикали и горизонтали
Объединение ячеек Браузер Internet Explorer Opera Firefox 6.0 7.0 7.0 8.0 9.0 1.0 2.0 Поддерживается Нет Да Нет Да Да Да Да
Результат данного примера показан на рис. 12.6.
Рис. 12.6. Таблица с объединенными ячейками
В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.
Объединение ячеек таблицы.
В этом уроке продолжаем изучать таблицы, а именно мы рассмотрим еще два атрибута для тега <td>, которые отвечают за объединение ячеек. Посмотрев на рисунок ниже, Вы поймете о каком объединении пойдет речь.
Таблица изображенная слева, имеет обычную структуру. У правой таблицы в первой строке две ячейки объединены между собой, образуя одну большую ячейку.
Применение этих атрибутов немного сложнее, чем применение других. Именно по этому им отведен отдельный урок.
Атрибут colspan.
Атрибут colspan используется для объединения ячеек по горизонтали. В значении атрибута указывается число ячеек объединяемых в одну.
Внимание! Очень важно, чтобы общее количество объединенных и обычных ячеек одной строки было равно общему количеству ячеек другой строки. Рассмотрим в качестве примера правую таблицу первого рисунка. Верхняя строка содержит в себе только одну большую ячейку состоящую из двух обычных, а нижняя строка содержит в себе две обычных ячейки.
Ниже представлен вариант правильно написанного кода:
Пояснения к коду:
Верхняя строка <tr> имеет одну ячейку <td>, для которой прописан атрибут colspan со значением 2. Это значит, что данная ячейка объединяет в себе 2 ячейки, соответственно эта ячейка заменяет 2 ячейки. Вторая строка <tr> имеет 2 обычные ячейки <td>.
Получается, что в верхней строке у нас две объединенных между собой ячейки, а в нижней строке две обычные ячейки. Количество равное, значит код написан верно.
Теперь пример кода с распространенной ошибкой:
Пояснения к коду:
Ошибка в том, что первая строка <tr> содержит не две ячейки <td>, а три, в то время как вторая строка <tr> содержит две ячейки <td>.
Смотря на код, визуально кажется, что количество ячеек в строках одинаковое, так как кол-во тегов <td> одинаковое. Но один из тегов <td> имеет атрибут colspan со значением 2, это значит, что эта одна ячейка занимает место двух.
Атрибут rowspan.
Атрибут rowspan используется для объединения ячеек по вертикали. Принцип действия точно такой же как и у атрибута colspan.
Пояснения к коду:
Верхняя строка <tr> имеет три ячейки <td>, для одной из них прописан атрибут rowspan со значением 3. Это значит, что данная ячейка объединяет в себе 3 ячейки (которой задан атрибут + 2 нижних ячейки по вертикали). Как я уже сказал, первая строка имеет 3 ячейки, это значит, что и нижние две строки должны иметь тоже по три ячейки. Глядя на код, мы видим, что нижние две строки <tr> имеют лишь по две ячейки <td>, но не стоит забывать, что первая ячейка верхней строки заняла свое место + еще место двух ячеек находящихся под ней. Это значит, что общее количество ячеек в каждой из отдельной строки равно трем.
Понимаю, тема объединения ячеек для многих может показаться запутанной. Чтобы хорошо усвоить данный материал, необходимо попрактиковаться. Создайте несколько не сложных таблиц и примените к ним атрибуты colspan и rowspan самостоятельно.
Вы что-то не поняли из этого урока? Спрашивайте!
— vadimgreb@yandex.ru
Как объединить ячейки таблицы в html
Для объединения ячеек таблицы в HTML используется атрибут rowspan или colspan .
Атрибут rowspan позволяет объединять ячейки по вертикали, то есть объединить несколько ячеек в одну ячейку, которая будет занимать несколько строк таблицы.
rowspan="2">Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5
В данном примере первая ячейка таблицы объединяется с ячейкой, расположенной ниже, и занимает две строки, а остальные ячейки таблицы остаются отдельными.
Атрибут colspan позволяет объединять ячейки по горизонтали, то есть объединить несколько ячеек в одну ячейку, которая будет занимать несколько столбцов таблицы.
Ячейка 1 colspan="2">Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7
В данном примере вторая ячейка таблицы объединяется с двумя соседними ячейками, расположенными правее, и занимает три столбца, а остальные ячейки таблицы остаются отдельными.
HTML ячейки и объединение ячеек таблицы
Это третий урок, посвященный HTML таблицам. Представление данных — основная функция таблиц в HTML, также некоторыми веб-разработчиками они используются для верстки, что не является оптимальным вариантом построения каркаса сайта, но об этом позже, а сейчас познакомимся со свойствами ячеек таблицы.
Навигация по странице
- HTML ячейки • Объединение HTML ячеек таблицы по горизонтали
- HTML ячейки • Объединение HTML ячеек таблицы по вертикали
Объединение ячеек HTML таблицы по горизонтали
В первом ряду, в отличае от второго, всего две ячейки, но тег второй ячейки, первого ряда содержит атрибут colspan=»» , значение которого равно 2 , что, в свою очередь, компенсирует отсутствие третьей ячейки. Цифра 2 означает, что одна ячейка по размеру равна двум.
| Имя | Телефон | |
|---|---|---|
| Вася | 777 88 999 | 777 77 999 |
Объединение ячеек HTML таблицы по вертикали
| Имя: | Ирина |
| Телефон: | 333 22 555 |
| 444 11 777 |
Атрибуты и значения
- colspan=»» – определяет объединение ячеек по горизонтали.
- rowspan=»» – определяет объединение ячеек по вертикали.
Значения этих атрибутов определяют количество ячеек, которые будут объединены в одну.
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML таблица 
Объединение HTML ячейки таблицы 
HTML списки
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Ячейки HTML таблицы? – Не вопрос!