Подробно доходчиво о таблицах html5. Это большой текст
В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.
Средства описания таблиц в HTML
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег
), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы — тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>.
Определение ячеек таблицы — тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>. Число тегов <ТD> в строке определяет число ячеек
Таблица
Если в таблице два тега TR, то в ней две строки. Если в строке три тега TD, то в ней три столбца. Заголовки столбцов таблицы — тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
| Заголовок центрирован по умолчанию | Заголовок может объединять столбцы | |
|---|---|---|
| Заголовок может быть расположен перед столбцами | Текст или данные | Текст или данные |
| Заголовок может объединять строки | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | |
| Текст или данные | Текст или данные | |
Использование заголовков таблицы — тег <САРТIОN>
Тег
| Текст или данные | Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
| Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, | можно воспользоваться атрибутом СОLSPAN=2, |
| чтобы растянуть ее над любым количеством обычных ячеек. | |
Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
| Текст или данные - ширина 100% |
| Текст или данные - ширина 50% |
| Текст или данные - ширина 200 пикселов |
| Текст или данные - ширина 100 пикселов |
Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter располагает содержимое ячейки по центру.
АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle центрирует содержимое ячейки по вертикали.
VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.
| Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. | верх, | середина, | низ. |
| VALIGN=top Выравнивает содержимое ячейки по ее верхней границе. | верх, | верх, | верх. |
| VALIGN=middle Центрирует содержимое ячейки по вертикали. | середина, | середина, | середина. |
| VALIGN=bottom Выравнивает содержимое ячейки по ее нижней границе. | низ, | низ, | низ. |
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные |
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования «пустого пространства», что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью
Уральский государственный педагогический университетДобро пожаловать!
|
Использование таблиц в дизайне
Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:
Вы создали двойной фон — GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.
Каждая таблица состоит из строк и ячеек, минимально может быть одна строка и одна ячейка. В таком случае, впрочем, непонятно, зачем использовать таблицу, потому что как такового табличного представления уже нет. Кроме того, таблице можно задать заголовок, который кратко описывает её содержимое, указать «шапку», «тело» и «подвал» таблицы. Они нужны для стилевого или смыслового выделения части данных. В примере 1 показано создание таблицы, содержащей все упомянутые компоненты.
Пример 1. Создание таблицы
| Класс прочности | Технологические процессы | Марка стали | Обозначение стандарта |
|---|---|---|---|
| 4 | Горячая штамповка | 20, Ст3кп3, Ст3сп3 | ГОСТ 1050–79 |
| 5 | Холодная штамповка | 10, 10кп | ГОСТ 0702–78 |
| Горячая штамповка | 20 | ||
| 6 | Холодная штамповка | 10, 10кп, 15, 15кп | ГОСТ 0702–78 |
| 8, 9 | Горячая штамповка | 35 | ГОСТ 1050–74 ГОСТ 4543–71 ГОСТ 10702–78 |
| Холодная штамповка | 20, 20кп | ||
| Класс прочности | Технологические процессы | Марка стали | Обозначение стандарта |
Результат данного примера показан на рис. 1.
Рис. 1. Таблица с заголовком, «шапкой» и «подвалом»
При использовании элементов ,
- Заголовок таблицы
пишется в самом верху таблицы, сразу после открывающего тега .
- вставляется вверху таблицы, сразу после заголовка, если он присутствует.
- вставляется после , при этом отображается всегда в самом низу таблицы.
- Элемент для таблиц нужен обязательно, но для простых таблиц без и его можно не указывать. Браузеры сами научились вставлять его автоматически в код, понимая, что большинство разработчиков ленятся добавлять элемент, который визуально никак не влияет на таблицу.
- может быть один или несколько, вы сами решаете, по какому принципу их добавлять. Например, в примере выше в некоторых строках имеются объединения ячеек и чтобы строки при наведении на них курсора мыши выделялись как нам требуется, мы их объединяем в согласно нашей логике.
Колонки
Кроме объединения группы строк через есть ещё один способ группирования ячеек - по колонкам с помощью элементов
и . Каждая колонка таблицы сопоставляется со своим элементом который пишется после открывающего тега . Часть колонок можно объединять с помощью атрибута span , его значением выступает число объединяемых колонок. Элементы
допустимо помещать в один или несколько , объединяя колонки согласно нашим понятиям. Элементы
и никак не влияют на вид таблицы и её отображение в браузере и применяются только со стилями, как показано в примере 2. Между колонками здесь добавляются двойные линии. Пример 2. Колонки таблицы
Таблица Класс прочности гайки Сопрягаемые болты Класс прочности Диаметр резьбы 4 3,6 4,6 4,8 > М16 5 5,6 5,8 ≤ М16 6 6,8 ≤ М48 Результат данного примера показан на рис. 2. Заметим, что похожего результата можно добиться заменив в стилях селектор col на td и th .
Если необходимо отобразить описание таблицы, то его можно поместить в элемент
, располагаемый сразу за открывающим тегом . Далее последовательно располагаются строки таблицы, обозначаемые тегом
. Каждая строка содержит в себе ячейки или , формируя таким образом столбцы таблицы. Элементы
обозначают ячейки с заголовками столбцов или строк. Содержимое их по умолчанию отображается браузерами жирным начертанием и центрируется. Тег же предназначен для всех остальных ячеек с данными. Наличие заголовков не является обязательным, но в таблице должна быть хотя бы одна строка с одной ячейкой. С помощью атрибута border элемента
можно определить, будут ли ячейки таблицы обведены рамкой или нет. Значение 1 указывает, что рамка нужна, пустое значение — нет.
Объединение ячеек
Логично, что в каждой строке должно быть одинаковое количество ячеек, чтобы таблица имела прямоугольный вид. Но как быть, если необходимо растянуть какую-нибудь ячейку на несколько столбцов или строк? На помощь приходят атрибуты colspan и rowspan элементов
и . Присвоив ячейке атрибут colspan="3" , вы сообщите браузеру, что этот элемент занимает место трех ячеек в строке — свое собственное и двух следующих. Соответственно, две следующих ячейки указывать не нужно, и строка будет содержать на 2 элемента (или ) меньше. Объединение ячеек в таблице
Аналогично, атрибут rowspan="2" , например, в пятой ячейке строки означает, что она занимает два места в своем столбце, и в следующем элементе
пятую ячейку нужно пропустить. Помните, что если вы примените один из этих атрибутов, но забудете удалить «лишние» ячейки, то браузер сместит их в следующий столбец, передвинув остальные ячейки еще дальше и исказив тем самым таблицу. . Наконец, все остальные строки с данными группируются в одном или нескольких элементах . Таким образом вы можете сформировать необходимое вам количество групп. Несмотря на то, что строки из будут отображены последними, размещать сам элемент можно как после последнего, так и перед первым элементом (после ). В одной таблице может быть только по одному элементу и , и любое количество . Визуально эти теги не отличаются, пока вы не определите для них соответствующие стили CSS.Группирование строк и столбцов
Еще 5 тегов предназначены для объединения строк и столбцов в группы. Это необходимо, когда, например, одна ячейка заголовка соответствует нескольким столбцам с данными или, скажем, последняя строка таблицы содержит итоговые значения, лексически выделяясь на фоне остальных строк.
Популяция фруктовых мух
Для объединения строк в группы предназначены три тега. Во-первых, строки с ячейками заголовка можно поместить в элемент . Во-вторых, завершающие строки с «итоговыми» ячейками — в элемент
Приведенный выше пример таблицы формируется приблизительно таким кодом:
Средний Красноглазых Размер Вес Среднее 1.8 0.0025 41.5% Самцы 1.9 0.003 40% Самки 1.7 0.002 43% Если вы используете или
, то должны использовать и . Причем в каждой из групп обязательно должна быть хотя бы одна строка, и не должно быть строк вне групп. Для группирования столбцов применяется пустой тег
и парный . В отличие от элементов, группирующих строки, эти теги размещаются сразу после элемента или, если его нет, за открывающим тегом . Они не включают в себя ячейки, а лишь указывают на объединяемые столбцы. Оба тега поддерживают атрибут span , значением которого является количество группируемых столбцов. Если span не указан, то он считается равным единице.
На самом деле,
не создает группу, а лишь позволяет определить общие атрибуты столбцов без необходимости указывать их в каждой ячейке. Например, чтобы назначить всем ячейкам первых двух столбцов class="myData" , достаточно добавить в начало таблицы элемент: позволяет сделать то же самое, но при этом лексически объединяет столбцы в группу. Бывает необходимость сгруппировать столбцы, но присвоить им разные классы или другие стандартные атрибуты. В таком случае в элемент помещается необходимое количество тегов . При этом атрибут span указывается только в них, а его значение для определяется автоматически, как сумма значений span , присвоенных расположенным внутри элементам . Другие теги в запрещены. Размещая последовательно несколько элементов
и/или в таблице, можно добиться группирования столбцов любым необходимых образом. Помните, что если вы применяете эти теги, то в итоге должны перечислить в них все столбцы таблицы, количество которых определяется строкой, с наибольшим количеством ячеек. Например, если в таблице 5 столбцов, а вам необходимо сгруппировать только второй и третий, указав им классы second и myGroup соответственно, то выглядеть это будет следующим образом: Атрибут scope элемента
позволяет указать, относится ли этот заголовок к строке, столбцу или какой-либо группе. Допустимые значения: Элементы
и поддерживают также атрибут headers , позволяющий дополнительно указать заголовки, относящиеся к данной ячейке. Для этого у ячеек с этими заголовками должны быть указаны id , которые и надо перечислить в атрибуте headers через пробел. 7 комментариев
По сравнению с html4.1 изменений я не заметил.Да, нововведений в таблицах нет. Однако большинство старых атрибутов не поддерживается:
- В элементе
остался только атрибут border , причем всего с двумя допустимыми значениями ("1" и "");
, , , ,лишены всех атрибутов; - В элементах
, оставлена только поддержка colspan , rowspan и headers (и еще scope для ); - В элементах
и оставлен только атрибут span ; Прочие атрибуты более не поддерживаются (не считая глобальных), хотя браузеры, вероятно, будут их обрабатывать в целях обратной совместимости. В качестве альтернативы предлагается использовать CSS.
P.S. Есть некоторые дополнения в DOM. В частности, у элемента
появился новый метод createTBody() . createTBody() - это типо создает тело таблицы как я понял?
Верно, создает элемент
,
вставляет его в конец таблицы (или за последним , если таковой имеется) и возвращает ссылку.Var tbody = table.createTBody();
А как расчертить таблицу? Максим, ваш вопрос не совсем понятен. Для визуального оформления используйте CSS. До данной главы всё предельно понятно было, а с таблицами не пойму что к чему. :(Создание таблиц
Таблицы HTML создаются в четыре этапа.
На первом этапе в HTML-коде с помощью парного тега
формируют саму таблицу:
Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных элементов: абзацев, заголовков, больших цитат, аудио- и видеороликов. Так что вставить таблицу в абзац мы не сможем. (Нужно сказать, что таблица в абзаце выглядела бы, по меньшей мере, странно…)
На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги
; каждый такой тег создает отдельную строку. Теги помещают внутрь тега (листинг 5.1).
Листинг 5.1
На третьем этапе создают ячейки таблицы, для чего используют парные теги
и . Тег создает обычную ячейку, а тег - ячейку заголовка , в которой будет помещаться "шапка" соответствующего столбца таблицы. Теги и помещают в теги , создающие строки таблицы, в которых должны находиться эти ячейки (листинг 5.2). Листинг 5.2
На четвертом, последнем, этапе указывают содержимое ячеек, которое помещают в соответствующие теги
и (листинг 5.3). Листинг 5.3
Столбец 1 Столбец 2 Столбец 3 Ячейка 1.1 Ячейка 1.2 Ячейка 1.3 Ячейка 2.1 Ячейка 2.2 Ячейка 2.3 Если нам нужно поместить в ячейку таблицы простой текст, мы можем просто вставить его в соответствующий тег
или (как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно. Если нам потребуется как-то оформить содержимое ячеек, мы применим изученные в главе 3 теги. Например, мы можем придать номерам ячеек особую важность, воспользовавшись тегом ; в результате они будут выведены курсивом (Листинг 5.4).
Листинг 5.4
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3 Еще мы можем поместить в ячейку графическое изображение:
Но часто бывает необходимо поместить в ячейку таблицы большой текст, иногда состоящий из нескольких абзацев. В таком случае пригодятся знакомые нам по главе 2 теги, создающие блочные элементы страницы. Теги
и это позволяют (листинг 5.5). Листинг 5.5
Это большой текст
Это начало большого текста, представляющего собой содержимое ячейки таблицы.
Это продолжение большого текста, представляющего собой содержимое ячейки таблицы.
А это долгожданное окончание большого текста.
Данный HTML-код помещает в ячейку таблицы заголовок и четыре абзаца. Причем один из этих абзацев содержит графическое изображение, а часть другого помечена как очень важная (и будет набрана полужирным шрифтом).
HTML-код, создающий таблицы, может показаться несколько громоздким. Но это плата за исключительную гибкость таблиц HTML. Мы можем поместить в таблицу любое содержимое: абзацы, заголовки, изображения, аудио- и видеоролики и даже другие таблицы.
Теперь настала пора рассмотреть правила, которыми руководствуются Web-обозреватели при выводе таблиц на экран.
Таблица представляет собой блочный элемент Web-страницы (об этом мы уже говорили).
Размеры таблицы и ее ячеек делаются такими, чтобы полностью вместить их содержимое.
Между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ.
Текст ячеек заголовка выводится полужирным шрифтом и выравнивается по центру.
Рамки вокруг всей таблицы и вокруг отдельных ее ячеек не рисуются.
Таблица - всего лишь содержимое Web-страницы, а за ее вывод "отвечает" представление. (Подробнее о содержимом и представлении Web-страницы см. в главе 1 .) Если нам нужно, например, вывести вокруг таблицы рамку, мы сможем создать соответствующее представление. Этим мы и займемся в части II .
И еще несколько правил, согласно которым создается HTML-код таблиц. Если их нарушить, Web-обозреватель отобразит таблицу некорректно или не выведет ее вообще.
Тег
может находиться только внутри тега (кроме заголовка и секций таблицы, речь о которых пойдет далее) будет проигнорировано.
Теги
и могут находиться только внутри тега . Любое другое содержимое тега будет проигнорировано. Содержимое таблицы может находиться только в тегах
и . Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web- обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал).
Все, с теорией покончено. Настала пора практики. Давайте поместим на Web- страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.
Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.
Листинг 5.6
Пожалуй, ни убавить ни прибавить…
Список версий HTML:
Версия HTML Год выхода Особенности 1.0 1992 Официально не была стандартизована Вконтакте
Одноклассники
В приведённом ниже примере образец таблицы максимально урезан, чтобы упростить структуру, пока вы изучаете принципы функционирования таблиц. Однако существуют и другие табличные элементы, а также атрибуты с более сложным семантическим описанием, повышающие доступность табличных данных для людей с ограниченными возможностями. Версия этой же таблицы с подробной разметкой выглядит следующим образом:Калории и содержание жира в наиболее популярных продуктах дневного
рационаБлюда Калории Жиры (г) Куриный бульон 120 2 Салат Цезарь 400 26
Результат на странице:
Элементы группы строк .
Строки или группы строк можно охарактеризовать как ячейки, относящиеся к одному заголовку, нижнему колонтитулу или к основной части таблицы, с помощью таких элементов как thead, tfoot и tbody, соответственно. Некоторые пользовательские агенты (синоним устройств просмотра) могут повторять строку заголовка и нижнего колонтитула таблицы на каждой странице документа. С помощью этих элементов разработчики также могут применять стили к различным частям таблицы.Элементы группы столбцов .
Столбцы могут быть определены с помощью элемента col или сгруппированы с помощью элемента colgroup. Их используют, если к данным в столбцах необходимо добавить определенный семантический контекст, также они могут пригодиться для быстрого подсчета ширины таблицы. Обратите внимание: в этих элементах нет контента, они просто описывают столбцы до того, как начинаются сами данные таблицы.Специальные возможности .
Такие элементы специальных возможностей, как подписи и сводки, предоставляют описание содержимого таблицы. Атрибуты scope и headers, предназначены для однозначного соотнесения заголовков и соответствующих им данных таблицы. Мы обсудим их позднее в этой главе.
В задачи данной книги не входит исчерпывающее исследование расширенных элементов таблиц, но если вам предстоит работать с объемными таблицами, стоит изучить эти вопросы самостоятельно. Подробную информацию вы найдете на сайте консорциума Всемирной паутины (www.w3.org/TR/html5).ПРИМЕЧАНИЕ:
Согласно спецификации HTML5, таблица должна содержать «в следующем порядке: необязательный элемент caption, за которым могут располагаться несколько (или ни одного) элементов colgroup, далее необязательный элемент thead, затем необязательный элемент tfoot, после чего следуют несколько (или ни одного) элементов tbody или один или несколько элементов tr, далее необязательный элемент tfoot (но в общей сложности может быть только один дочерний элемент tfoot)».Скачать пример описанных выше расширенных элементов таблицы на готовой странице в формате html:
2024 © gtavrl.ru.
- вставляется вверху таблицы, сразу после заголовка, если он присутствует.