Сложные структуры таблиц html таблиц

3.2. Создание сложных таблиц

Все рассмотренные нами примеры таблиц имели в каждой строке одинаковое количество ячеек. Но иногда приходится создавать таблицы, в которых смежные ячейки должны быть объединены. Достигается это использованием в начальных тегах TD> и TH> атрибутов COLSPAN и ROWSPAN, варьируя этими параметрами, можно добиться желаемого результата. ROWSPAN – предназначен для объединения ячеек смежных строк, значение атрибута задает количество объединяемых ячеек. Например, начальный тег ячейки устанавливает объединение трех строк, COLSPAN назначает объединение ячеек смежных столбцов. Количество объединяемых ячеек устанавливается значением этого атрибута. Например, для формирования одной ячейки из трех смежных столбцов надо записать тег .

Если вы хотите объединить ячейки, расположенные в смежных строках и столбцах, то дополните тег TD> или TH> сразу двумя атрибутами COLSPAN и ROWSPAN. Например, образование одной ячейки, расположенной на пересечении двух строк и трех столбцов, назначается контейнером .

Пример 5. Создайте таблицу с двумя строками (рис. 3.8): в первой строке – две ячейки, во второй – одна. Содержимое ячеек выровнено относительно нижней и правой границы, толщина границы равна 5.

Рис. 3.8. Таблица для примера 5

Создание таблицы из примера с использованием HTML приведено ниже, отображение в браузере см. на рис. 3.9.

пример создания сложной таблицы пример 5

Рис. 3.9. Отображение в браузере таблицы примера 5

Пример 6. Представьте в HTML таблицу спряжения глагола to be (рис. 3.10).

Значение to be:

Рис. 3.10. Таблица спряжения глагола to be

Создание таблицы из примера с использованием HTML приведено ниже, отображение в браузере см. на рис. 3.11.

Рис. 3.11. Отображение в браузере таблицы примера 6

пример создания сложной таблицы пример 6

3.3. Вложенные таблицы

Одной из замечательных особенностей таблиц в HTML является поддержка многоуровневой вложенности. Другими словами, одна таблица включает в себя другую, та, в свою очередь, еще одну и т. д. Эта особенность позволяет более точно размещать отдельные элементы страницы относительно друг друга и границ самого документа, отображаемого браузером.

Пример 7. Создайте в HTML таблицу, представленную на рис. 3.12.

Рис. 3.12. Таблица для примера 7

Таблица из примера 7 на языке HTML приведена ниже, отображение ее в браузере представлено на рис. 3.13.

Рис. 3.13. Отображение в браузере таблицы примера 7

пример создания вложенной таблицы пример 7

Читайте также:  Add Record Form

Марки

Источник

3.2. Создание сложных таблиц

Все рассмотренные нами примеры таблиц имели в каждой строке одинаковое количество ячеек. Но иногда приходится создавать таблицы, в которых смежные ячейки должны быть объединены. Достигается это использованием в начальных тегах TD> и TH> атрибутов COLSPAN и ROWSPAN, варьируя этими параметрами, можно добиться желаемого результата. ROWSPAN – предназначен для объединения ячеек смежных строк, значение атрибута задает количество объединяемых ячеек. Например, начальный тег ячейки устанавливает объединение трех строк, COLSPAN назначает объединение ячеек смежных столбцов. Количество объединяемых ячеек устанавливается значением этого атрибута. Например, для формирования одной ячейки из трех смежных столбцов надо записать тег .

Если вы хотите объединить ячейки, расположенные в смежных строках и столбцах, то дополните тег TD> или TH> сразу двумя атрибутами COLSPAN и ROWSPAN. Например, образование одной ячейки, расположенной на пересечении двух строк и трех столбцов, назначается контейнером .

Пример 5. Создайте таблицу с двумя строками (рис. 3.8): в первой строке – две ячейки, во второй – одна. Содержимое ячеек выровнено относительно нижней и правой границы, толщина границы равна 5.

Рис. 3.8. Таблица для примера 5

Создание таблицы из примера с использованием HTML приведено ниже, отображение в браузере см. на рис. 3.9.

пример создания сложной таблицы пример 5

Рис. 3.9. Отображение в браузере таблицы примера 5

Пример 6. Представьте в HTML таблицу спряжения глагола to be (рис. 3.10).

Значение to be:

Рис. 3.10. Таблица спряжения глагола to be

Создание таблицы из примера с использованием HTML приведено ниже, отображение в браузере см. на рис. 3.11.

Рис. 3.11. Отображение в браузере таблицы примера 6

пример создания сложной таблицы пример 6

3.3. Вложенные таблицы

Одной из замечательных особенностей таблиц в HTML является поддержка многоуровневой вложенности. Другими словами, одна таблица включает в себя другую, та, в свою очередь, еще одну и т. д. Эта особенность позволяет более точно размещать отдельные элементы страницы относительно друг друга и границ самого документа, отображаемого браузером.

Пример 7. Создайте в HTML таблицу, представленную на рис. 3.12.

Рис. 3.12. Таблица для примера 7

Таблица из примера 7 на языке HTML приведена ниже, отображение ее в браузере представлено на рис. 3.13.

Рис. 3.13. Отображение в браузере таблицы примера 7

пример создания вложенной таблицы пример 7

Марки

Источник

ДВАДЦАТЬ ПЕРВЫЙ УРОК

Сегодня мы будем учиться делать сложные таблицы. Например, такую:

1 ячейка 2 ячейка
3 ячейка, занимающая два столбца

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

Читайте также:  Really Cool Page

Рассмотрим теперь нижнюю строчку. Я вам подсказала, что она занимает столько же места, сколько и верхние две ячейки. Помните, когда мы изучали фреймы, там были атрибуты и ? Так вот радуйтесь, здесь те же самые наши знакомые. Если нам нужно объединить вертикальные столбцы, берем атрибут colspan, а если нам нужно объединить в одной ячейке несколько рядов, то берем rowspan

Так что думаю, для нижней строчки, содержащей одну ячейкy, вам будет очень даже понятна следующая запись:

3 ячейка, занимающая два столбца

Думаю, у вас с этим не должно возникнуть трудностей. А весь код для выше приведенной таблицы будет такой (для наглядности я дала border=5:

1ячейка 2ячейка
3 ячейка, занимающая два столбца

Таблица №2

Теперь идем дальше. Создадим следующую таблицу:

Тут вот что важно заметить: как правильно расставить теги TR: видите, слева только одно начало строки, а в конце получается конец аж четырех строчек. Вот это и запомните. Поэтому я сразу напишу вам полный код, а вы внимательно его изучите и поймите суть.

Таблица №3

В следующей таблице мы объединим создадим такую ячейку, которая объеденить в себе и строчки и столбцы. Ведь может же быть такое? Да запросто! У меня, во всяком случае, это не заржавеет. Надеюсь, не заржавеет и у вас. Но, чтобы не запутаться с некоторыми навороченными таблицами, советую прежде их нарисовать, хотя бы на листочке бумаги. Я же не буду переводить бумагу, и нарисую свою таблицу в Adobe Photoshop. Там же я нарисую все TR (см. рис. 95):

Рис. 95. Конечно не шедевр, но в работе поможет!

На этом рисунке я не указала теги TD, чтобы не загромождать рисунок, но вы уже кое в чем разбираетесь, поэтому и сами догадаетесь, что каждую ячеечку нужно обложить тегом TD

Обратите внимание, что десятая ячейка занимает столько места, сколько занимают четыре ячейки (1+5+6+7), то есть rowspan=4. Восьмая ячейка занимает место по ширине трех ячеек (2+3+4), а по высоте — двух ячеек (5+6), поэтому в теге TD у нее будет стоять colspan=3, а rowspan=2. Девятая же ячейка занимает по ширине столько же места, сколько и восьмая, то есть место трех ячеек (2+3+4), поэтому мы для нее запишем colspan=3.

Читайте также:  Mr. Camel

Вот полный код этой таблицы:

1 ячейка 2 ячейка 3 ячейка 4 ячейка 10 ячейка
5 ячейка 8 ячейка
6 ячейка
7 ячейка 9 ячейка

И вот наша очень даже непростая таблица:

1 ячейка 2 ячейка 3 ячейка 4 ячейка 10 ячейка
5 ячейка 8 ячейка
6 ячейка
7 ячейка 9 ячейка

И не верьте никому, что составление таблиц — сложное, трудоемкое и муторное дело. Они просто двоечники, лодыри, тунеядцы и ничего делать не умеют! Не то что мы с вами!

Что ж, самое сложное, что есть в таблицах, я вам объяснила. Впереди — самое интересное! Но об этом вы узнаете на следующем уроке. А пока. грызите, грызите и грызите эти таблицы, пробуйте любые комбинации сами, это и на самом деле интересно. А я помчалась готовиться к следующему уроку. Постараюсь его сделать быстро-быстро. Так что даже с вами не прощаюсь, а просто говорю пока, братцы!

© 2003 — 2023 Дикая Правда — все права защищены, перепечатка статей запрещена

Источник

Создание сложных таблиц

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

Для объединения ячеек используют следующие атрибуты тега :

• colspan – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько столбцов.

Например, если нужно объединить ячейки двух столбцов, напишем colspan = «2»> .

• rowspan – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько строк.

Например, растягивает клетку таблицы на две строки.

К примеру нам надо создать вот такую таблицу:

Сложная таблица

Если присмотреться, у нас таблица состоит из двух строк и трех столбцов.

Но, в первом столбце обе ячейки объединены в одну — это ячейка под названием «Большая ячейка А».

А также в нижней строке объединены в одну еще две ячейки.

Вот фрагмент кода создания таблицы с различной шириной строк и столбцов. Атрибут border тега устанавливает ширину бордюра (рамки таблицы) и может принимать любое значение от 0 до 10. Ширина бордюра = 0 обозначает его отсутствие.

В первой строке мы описали три ячейки, причем первая ячейка как бы захватывает и вторую строку. Поэтому во второй строке мы должны были описать две ячейки (то есть два тега ), но поскольку мы эти две ячейки объединили, во второй строке остался всего один тег .

Разберем пример чуть-чуть посложнее.

Попытаемся создать таблицу следующего вида:

Таблица цветов

Вот фрагмент кода для данной таблицы:

Источник

Оцените статью