Этот режим основан на стандартном режиме с некоторыми исключениями: отображение изображений внутри ячеек таблицы и рисунков друг под другом происходит как в режиме совместимости. Для переключения в почти стандартный режим применяется один из следующих доктайпов.
Для фреймов в HTML:
Для фреймов в XHTML:
Изображения друг под другом
При выводе изображений вертикально с переводом строки через
картинки в почти стандартном режиме выводятся слитно без промежутков. В примере 1.2 показан код для вывода двух изображений.
Пример 1.2. Вывод двух изображений
HTML 4.01 IE Cr Op Sa Fx
Поскольку рисунки предварительно были одним и «разрезаны» для удобства, они образуют единое изображение (рис. 1.1).
Рис. 1.1. Вывод изображений в почти стандартном режиме
В стандартном режиме между изображениями образуется небольшой промежуток (рис. 1.2).
Рис. 1.2. Вывод изображений в стандартном режиме
Для обхода этой особенности в стандартном режиме существует два основных способа:
- добавить display : block для изображений;
- использовать свойство line-height для родительского контейнера.
Рассмотрим эти способы подробнее.
Превращение тега
в блочный элемент еще не раз поможет нам для обхода различных неприятностей, связанных с изображениями. В этот раз воспользуемся той особенностью, что блочные элементы выстраиваются друг под другом слитно (отступы в расчёт не принимаем). При этом тег
из кода, конечно же, следует убрать (пример 1.3).
Пример 1.3. Использование свойства block
Не обязательно применять свойство display , также можно воспользоваться line-height , это свойство задаёт межстрочный интервал. Установив значение 1px для тега
Внутри которого располагаются изображения, мы получим аналогичный результат (пример 1.4).
Пример 1.4. Использование свойства line-height
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Изображения в таблице
При добавлении изображения в ячейку таблицы также проявляется разница между режимами браузера. Для понимания разберем следующий код (пример 1.5). Чтобы стала заметна граница вокруг таблицы, в стилях добавлено свойство border для селектора TABLE .
Пример 1.5. Изображение в таблице
HTML 4.01 CSS 2.1 IE Cr Op Sa Fx
|
Результат данного примера показан на рис. 1.3а. Для стандартного режима вывод изображения несколько отличается (рис. 1.3б).
 |
 |
| а | б |
Рис. 1.3. Изображение в таблице. а - почти стандартный режим, б - стандартный режим
Заметно, что в стандартном режиме появляется небольшой отступ внизу картинки. Откуда он берется? Если добавить в ячейку текст и увеличить масштаб (рис. 1.4), то хорошо заметно, что изображение как строчный элемент выравнивается по базовой линии текста, а не по его нижнему краю. Соответственно, разница между базовой линией и нижним краем текста и есть значение промежутка под картинкой.
Рис. 1.4. Базовая линия текста
Опять же, существует несколько способов изменить поведение изображений в таблице. Первый способ уже упоминался, это преобразование тега
в блочный элемент с помощью свойства display
со значением block
(см. пример 1.3). Стиль в таком случае будет следующий:
TABLE IMG { display: block; }
Если наряду с изображениями внутри ячейки находится текст, этот стиль может привести к нежелательным последствиям. Вместо того чтобы картинка располагалась рядом с текстом, она, как блочный элемент, появится на новой строке. В этом случае рекомендуется задать выравнивание изображений по нижнему краю через свойство vertical-align со значением bottom (пример 1.6).
Пример 1.6. Выравнивание изображений
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Текст 
|
Хотя во всех браузерах в данном примере наблюдается выравнивание изображения по нижнему краю, несколько различается выравнивание самого текста. Браузеры Firefox, Safari, IE7 выравнивают текст по нижнему краю рисунка, а Opera, IE8, IE9 - по верхнему.
Однопиксельные рисунки
Во времена табличной вёрстки активно применялось прозрачное изображение размером один на один пиксел, так называемый однопиксельный рисунок. Помещённый в ячейку таблицы такой рисунок не давал ей сжиматься до определенных пределов, но сам легко масштабировался, задавая тем самым ширину или высоту ячейки. Поскольку рисунок прозрачный, можно установить для ячейки фоновый цвет и получить горизонтальные или вертикальные линии заданной толщины.
В стандартном режиме нас ожидают те же проблемы, что и при использовании обычных рисунков внутри ячеек. Высота ячейки будет расширена, поскольку к изображениям добавляется отступ снизу. Решается эта проблема гораздо проще и не требует использование дополнительного стиля. Современные браузеры прекрасно отображают заданные размеры ячеек и без наличия дополнительных изображений внутри. Поэтому достаточно просто удалить однопиксельный рисунок из ячейки.
Здесь класс line задает размеры ячейки.
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. Как сделать ячейку тела таблицы
5. Как добавить подпись (заголовок) к таблице
Создает подпись таблицы. Добавляется непосредственно после тега
6. Группирование строк и столбцов таблицы
Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов 
Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и
7. Группировка разделов таблицы
Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами
Элемент должен быть использован в следующем порядке: как дочерний элемент
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
| Атрибут | Описание, принимаемое значение | |||
|---|---|---|---|---|
| colspan | Количество ячеек в строке для объединения по горизонтали. | |
||
| headers | Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров. | ... | ... | |
| rowspan | Количество ячеек в столбце для объединения по вертикали. | Возможные значения: число от 1 до 999. |
||
| span | Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1. Принимаемые значения: любое целое положительное число. |
|||
10. Пример создания таблицы
Рис. 4. Создание меню ресторана с помощью HTML-таблицы
Разметка HTML
| Кухня | Холодные блюда | Горячие блюда | Десерты | ||
|---|---|---|---|---|---|
| Салаты | Закуски | Первые блюда | Вторые блюда | ||
| Русская | Винегрет | Язык с хреном | Щи с квашеной капустой | Вареники с картошкой | Печеные яблоки с медом |
| Оливье | Студень говяжий | Рассольник домашний | Караси запеченые в сметане | Блинчатый пирог | |
| Сельдь под "шубой" | Судак заливной | Мясная солянка | Котлеты "Пожарские" | Пирожное "Картошка" | |
| Испанская | Севиче из гребешков | Эмпанадас | Хлебный суп с чесноком | Паэлья с морепродуктами | Чуррос |
| Тимбал из авокадо и тунца | Ахотомате | Астурийская фабада | Свиное раксо | Альмойшавена | |
| Фасоль с ветчиной | Чанфайна | Рыбный суп с манными клецками | Тортилья картофельная | Бунуэлос | |
| Французская | Вогезский салат | Рийет из курицы | Баклажанный крем-суп "Ренуар" | Картофель огратен | Бриоши |
| Салат "Панзанелла" | Делисьез из сыра | Французский тыквенный суп | Гратин из птицы | Лигурийский лимонный пирог | |
| Тар-тар | Маринованный лосось | Суп "Конти" | Тартифлетт | Саварен "Триумф" | |
Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
- контейнер, внутри которого располагается таблица (такой же, как
- border - атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
, вне ячеек и строк.
- парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали). - тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри обозреватель выделяет жирным и размещает по центру. - контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег , столько ячеек в ней и будет: один тег - одна ячейка. .
используется для той же цели, что и , но не наоборот. - span - атрибут, задающий число столбцов, к которым применяются свойства контейнера
. - , и - контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров , и в HTML-документе.
- colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
- rowspan объединяет ячейки по столбцам.
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
Пример таблицы Инструменты создания сайтов Назначение Инструмент Разметка HTML XHTML Оформление CSS Разработка PHP Python В браузере документ будет выглядеть так:
Разберём, какие строчки кода за что отвечают.
- открыли таблицу, задав ей толщину рамок.
- закрыли таблицу.- открыли строку. - закрыли строку. Аналогично создали остальные строки.Назначение - создали ячейку с оформлением заголовка.Инструмент - создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.Разметка HTML XHTML
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и . Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега использовать тег . Текст в ячейке, оформленной с помощью тега , отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги и нет. Пример 12.1. Создание таблицы
Тег TABLE Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Порядок расположения ячеек и их вид показан на рис. 12.1.
Задача
Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.
Решение
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и . Таблица должна содержать хотя бы одну ячейку (пример 1). Допускается вместо тега использовать тег . Текст в ячейке, оформленной с помощью тега , отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги и нет. Пример 1. Создание таблицы
HTML5 IE Cr Op Sa Fx
Тег table Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Порядок расположения ячеек и их вид показан на рис. 1.
Рис. 1. Результат создания таблицы с четырьмя ячейками
Атрибут border тега
допустимо добавлять только с пустым значением (
) или равным 1. Все остальные значения не проходят валидацию.
Для управления полями внутри ячеек используется стилевое свойство padding , которое добавляется к селектору td . Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table , браузер IE понимает его только с версии 8.0.
Пример 2. Поля внутри ячеек
HTML5 CSS 2.1 IE Cr Op Sa Fx
Тег table Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4 Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек.
Рис. 2. Поля в ячейках таблицы
Похожие статьи-
SQL запрос INSERT INTO — наполнить базу данных информацией
Всем привет! В данной статье речь пойдет о том, как можно добавлять данные в таблицу в Microsoft SQL Server, если Вы уже хоть немного знакомы с языком T-SQL, то наверно поняли, что сейчас мы будем разговаривать об инструкции INSERT, а также о том,...
IP-телефония -
От чего зависит разрешение экрана на пк Что такое разрешение экрана компьютера
При покупке нового монитора к своему системному блоку консультанты любого магазина электроники могут спросить у вас, какое разрешение экрана для монитора вам предпочтительно. Для тех, кому такой вопрос может показаться чем-то из раздела китайской...
IP-телефония -
Обозначение клавиш на клавиатуре
Привет всем читателям блога. Скажите друзья, задумывались ли вы, какой большой функционал таит в себе клавиатура? Большинство людей даже не подозревает, что с её помощью можно выполнять действия, которые могут облегчить и . Не печально ли, что...
Мегафон
КатегорииВидеоматериалы
