- содержит строки таблицы, которые отобразятся в самом низу
таблицы.
- определяет стиль для одной колонки таблицы, начиная с первой. То есть
первый такой тэг укажет стиль для первой колонки, второй тэг для второй колонки и так далее. Работает
по-разному в разных браузерах.
А сейчас будьте крайне внимательны, поскольку мы переходим к рассмотрению наиболее сложного вопроса из всех, которые касаются создания таблиц. Речь идет про то как объединить ячейки в таблице HTML.
Когда вы решаете аналогичные задачи в каком-нибудь текстовом редакторе, например, наиболее распространенном – Word, то он практически все делает сам, достаточно лишь нажать соответствующую кнопку. Но если говорить про решение этой задачи в HTML, то здесь все иначе. И если вы будете внимательным, то задача не будет казаться такой уж непосильной.
Объединение ячеек в строках
В первую очередь расскажем, как объединить строки в таблице в HTML. В этом поможет атрибут colspan
, который работает с такими тегами, как
и |
.
Например, вы приписываете данному атрибуту значение 2
. В результате этого ячейка, к которой относится тег, увеличивается в горизонтальном направлении ровно в 2
раза, вытесняя соседнюю. Но вытесненная ячейка никуда не уходит, она присутствует в таблице, только в совершенно новом столбце, который необходимо убрать.
Давайте попрактикуемся, как это делается. Итак, начнем. Попробуем создать таблицу следующего вида:
Согласно вышеописанным правилам нам нужно создать строку, добавить одну простую ячейку, а следом в этой же строке добавить ячейку, которая будет занимать место двух простых ячеек.
В следующей строке нам нужно лишь добавить три простых ячейки. Звучит несложно, давайте перенесём наши мысли в код:
Вот и всё! Совсем ничего страшного!
Объединение ячеек в столбцах
В вертикальном направлении ячейки объединять немногим сложнее, нежели в горизонтальном. Эта задача решается с помощью атрибута rowspan
, который приписывается тегам |
или |
.
Если данному атрибуту задается значение 2
, то ячейка увеличивается в размерах уже вертикально и тянется на следующую строку. Ячейка, расположенная под той, что увеличивается в размерах, идет вправо, что опять-таки образует лишний столбец. И чтобы удалить его, необходимо просто удалить ячейку.
Давайте теперь создадим следующую таблицу:
Подумаем, что нам нужно сделать. Нам нужно добавить ячейку, которая занимает по вертикали места в 2 раза больше, чем простая. затем добавить в этой же строке две простых ячейки.
Переходим на следующую строку. Здесь у нас сразу уже занятое место ячейкой сверху. Переходим в следующую секцию и видим, что нам в этой строке остаётся только добавить две простых ячейки. Переносим в код:
Опять-таки, ничего сложного.
Одновременное объединение по вертикали и горизонтали в одной таблице
В реальных ситуациях таблицы такого типа встречаются очень часто. Попробуйте самостоятельно, используя предложенный нами способ рассуждения, создать с помощью HTML-кода следующую таблицу:
Если всё же не получилось, то вот ответ:
Размер акцизного сбора на дизельное топливо
| Продукция |
Налоговая ставка |
| c 01.01 по 31.01.2015 |
c 01.01 по 31.01.2016 |
c 01.01.2015 |
| Дизельное топливо |
3450 руб. за 1 тонну |
4150 руб. за 1 тонну |
3950 руб. за 1 тонну |
Для объединения двух и более ячеек в одну используются атрибуты colspan
и rowspan
тега |
. Атрибут colspan
устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan
, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, |
заменяет три ячейки, поэтому в следующей строке должно быть три тега |
или конструкция вида | ... | ... |
. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.
Пример 12.3. Неверное объединение ячеек
Неправильное использование colspan
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
Результат данного примера показан на рис. 12.5.
Рис. 12.5. Появление дополнительной ячейки в таблице
В первой строке примера задано три ячейки, две из них объединены с помощью атрибута 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»
объединены где по две, а где и по три ячейки. В ячейке с надписью
«Браузер»
применено объединение по вертикали.
HTML-таблицы
упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц
могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Для всех элементов таблицы доступны , а также собственные атрибуты.
Создание таблиц в HTML
- Содержание:
1. Как создать таблицу
Таблица создаётся при помощи парного тега
Рис.1. Внешний вид таблицы без форматирования css-свойствами
По умолчанию таблица и ячейки не имеют видимых границ. Границы
задаются с помощью свойства border:
/* внешние границы таблицы серого цвета толщиной 1px */
table {border: 1px solid grey;}
/* границы ячеек первого ряда таблицы */
th {border: 1px solid grey;}
/* границы ячеек тела таблицы */
td {border: 1px solid grey;}
Промежутки между ячейками таблицы
убираются с помощью свойства table {border-collapse: collapse;} .
Ширина
таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:
/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */
table {width: 100%;}
/* задаст фиксированную ширину для таблицы */
table {width: 600px;}
Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.
2. Как создать строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью тега
. Количество горизонтальных строк таблицы определяется количеством парных тегов
|
.
3. Как сделать ячейку заголовка столбца таблицы
создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов
|
| 4. Как сделать ячейку тела таблицы
создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги
|
| , расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек должно быть равно количеству пар ячеек
| . Для элемента доступны атрибуты colspan , rowspan , headers .
5. Как добавить подпись (заголовок) к таблице
Создает подпись таблицы. Добавляется непосредственно после тега 6. Группирование строк и столбцов таблицы
Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов  Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и
7. Группировка разделов таблицы
Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами
| и
для указания каждой части таблицы.
Элемент должен быть использован в следующем порядке: как дочерний элемент
, после и, и перед
,
и элементами. В пределах одной таблицы можно использовать один раз.
группирует основное содержимое таблицы. Используется в сочетании с элементами и
.
Создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега, перед тегами
и .
Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают и
как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.
8. Как объединить ячейки таблицы
Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
9. Атрибуты элементов таблицы
Таблица 1. Атрибуты элементов таблицы
| Атрибут
|
Описание, принимаемое значение
|
|---|
| colspan
|
Количество ячеек в строке для объединения по горизонтали.
|
|
| headers
|
Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.
| ... |
... |
Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .
|---|
| rowspan
|
Количество ячеек в столбце для объединения по вертикали.
|
Возможные значения: число от 1 до 999.
|
| span
|
Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.
Принимаемые значения: любое целое положительное число.
|
10. Пример создания таблицы
Рис. 4. Создание меню ресторана с помощью HTML-таблицы
Меню ресторана "Ромашка"
| Кухня |
Холодные блюда |
Горячие блюда |
Десерты |
| Салаты |
Закуски |
Первые блюда |
Вторые блюда |
| Русская |
Винегрет |
Язык с хреном |
Щи с квашеной капустой |
Вареники с картошкой |
Печеные яблоки с медом |
| Оливье |
Студень говяжий |
Рассольник домашний |
Караси запеченые в сметане |
Блинчатый пирог |
| Сельдь под "шубой" |
Судак заливной |
Мясная солянка |
Котлеты "Пожарские" |
Пирожное "Картошка" |
| Испанская |
Севиче из гребешков |
Эмпанадас |
Хлебный суп с чесноком |
Паэлья с морепродуктами |
Чуррос |
| Тимбал из авокадо и тунца |
Ахотомате |
Астурийская фабада |
Свиное раксо |
Альмойшавена |
| Фасоль с ветчиной |
Чанфайна |
Рыбный суп с манными клецками |
Тортилья картофельная |
Бунуэлос |
| Французская |
Вогезский салат |
Рийет из курицы |
Баклажанный крем-суп "Ренуар" |
Картофель огратен |
Бриоши |
| Салат "Панзанелла" |
Делисьез из сыра |
Французский тыквенный суп |
Гратин из птицы |
Лигурийский лимонный пирог |
| Тар-тар |
Маринованный лосось |
Суп "Конти" |
Тартифлетт |
Саварен "Триумф" |
body {
margin: 0;
background: #F4F1F8;
}
table {
border-collapse: collapse;
line-height: 1.1;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);
color: #0C213B;
}
caption {
font-family: annabelle, cursive;
font-weight: bold;
font-size: 2em;
padding: 10px;
color: #F3CD26;
text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
caption:before, caption:after {
content: "\274B";
color: #A9E2CC;
margin: 0 10px;
}
th {
padding: 10px;
border: 1px solid #A9E2CC;
}
td {
font-size: 0.8em;
padding: 5px 7px;
border: 1px solid #A9E2CC;
}
.first {
font-size: 1em;
font-weight: bold;
text-align: center;
}
Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек
таблиц. Лучше всего рассмотреть пример - простую таблицу, HTML-код которой приведен в листинге 5.10.
Листинг 5.10
Это обычная таблица, ячейки которой пронумерованы - так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.
А теперь рассмотрим таблицу на рис. 5.3.
Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?
Специально для этого теги и
поддерживают два весьма примечательных необязательных атрибута. Первый - COLSPAN - объединяет ячейки по горизонтали, второй - ROWSPAN - по вертикали.
Рис. 5.2.
Изначальная таблица, ячейки которой подвергнутся объединению
Рис. 5.3.
Таблица, показанная на рис. 5.2, после объединения некоторых ячеек (объединенные ячейки обозначены сложением их номеров)
Чтобы объединить несколько ячеек по горизонтали в одну, нужно выполнить следующие шаги.
1. Найти в коде HTML тег
Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.
Объединить ячейки по вертикали чуть сложнее. Вот шаги, которые нужно для этого выполнить.
1. Найти в коде HTML строку (тег ), в которой находится первая из объединяемых ячеек (если считать строки сверху вниз).
2. Найти в коде этой строки тег
Обратим внимание, что мы удалили из второй строки тег , создающий шестую ячейку, поскольку она объединилась с первой ячейкой.
| 
