Html таблицы
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Основные тэги таблицы
Таблица:<TABLE>…</TABLE>
Это основноые тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.
Строка таблицы:<TR>…</TR>
Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.
Ячейка таблицы:<TD>…</TD>
Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отстутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
Заголовок таблицы: <TH>…</TH>
Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.
Подпись:<CAPTION>…</CAPTION>
Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>…</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где — сверху или снизу таблицы — будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.
Основные атрибуты таблицы
BORDER
Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.
ALIGN
Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).
VALIGN
Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).
NOWRAP
Данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.
COLSPAN
Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании — 1.
ROWSPAN
Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании — 1.
COLSPEC
Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC=»20%».
Таблицы
ТаблицыProgrammerBook.ru: Обратите внимание, что
- данный документ является переводом документа «Tables»;
- данный документ может содержать неточности, опечатки и ошибки перевода;
- официальным документом по данной тематике является оригинальный документ на английском языке, расположенный на сайте W3C.
Допустимый Контекст: %body.content, %flow, %block
Модель Содержимого: Необязательный CAPTION, после которого следует одна или более строка таблицы (TR)
HTML модель таблиц была выбрана за свою простоту и гибкость. По умолчанию таблица автоматически изменяется в соответствии с содержимым ячейки и текущим размером окна. Атрибут COLSPEC может быть использован в случае, когда требуется контролировать ширину столбцов либо путём установления явной ширины, либо путём указания относительной ширины. Вы также можете указать ширину таблицы в явном виде или в виде доли от текущего поля (смотрим атрибут WIDTH).
Таблица начинается с необязательной подписи, после которой следует от одной и более строк. Каждая строка состоит из одной или более ячеек, которые в свою очередь разделяются на ячейки заголовков и ячейки данных. Ячейки могут объединяться по строкам и столбцам, а также включать в себя атрибуты, помогающие представлению информации с помощью речи и шрифта Брайля или для экспорта данных таблицы в базы данных. Модель обеспечивает небольшую прямую поддержку контроля над внешним видом, например поддерживает изменение стилей границ и полей, так как они могут быть обработаны с помощью подклассов и связанных с ними таблицами стилей.
Таблицы могут содержать широкий спектр содержимого, такого как заголовки, списки, абзацы, формы, рисунки, предотформатированный текст и даже вложенные таблицы. Когда таблица выровнена по левому или по правому краю, элементы следующие за таблицей будут обтекать вокруг неё, если имеется достаточно пространства. Такое поведение отключается, когда задан атрибут noflow или align атрибут таблицы имеет значение center (значение по умолчанию), или justify.
Пример
<TABLE BORDER>
<CAPTION>Тестовая таблица с объединёнными ячейками</CAPTION>
<TR><TH ROWSPAN=2><TH COLSPAN=2>В среднем
<TH ROWSPAN=2>прочие<BR>категории<TH>Разное
<TR><TH>высота<TH>ширина
<TR><TH ALIGN=LEFT>мужчины<TD>1.9<TD>0.003
<TR><TH ALIGN=LEFT ROWSPAN=2>женщины<TD>1.7<TD>0.002
</TABLE> Это будет представлено как-то так:
Тестовая таблица с объединёнными ячейками
/--------------------------------------------------\
| | В среднем |прочие | Разное |
| |-------------------|категории |--------|
| | высота | ширина | | |
|-----------------------------------------|--------|
| мужчины | 1.9 | 0.003 | | |
|-----------------------------------------|--------|
| женщины | 1.7 | 0.002 | | |
\--------------------------------------------------/
Тут следует отметить несколько моментов:
- По умолчанию, ячейки заголовка выравниваются по центру, а ячейки данных выравниваются по левому краю. Такое положение вещей может быть переопределено ALIGN атрибутом ячейки; COLSPEC атрибутом элемента TABLE; или ALIGN атрибутом в TR элементе охватывающем всю строку (от наиболее специфичного к наименее специфичному).
- Ячейки могут быть пустыми.
- Ячейки, объединяющие строки включаются в количество столбцов на каждой из объединённых строк, но появляются в разметке только один раз (в первой объединяющей строке).
- Если число столбцов в таблице больше, чем количество ячеек в данной строке (после включения ячеек объединяющих строки), недостающие ячейки рассматриваются как ячейки появляющиеся с правой стороны таблицы, и представляются как пустые ячейки.
- Количество строк определяется TR элементами — любые строки подразумеваемые ячейками, объединяющими строки за этими пределами следует игнорировать.
- Агенту пользователя следует быть готовым самостоятельно исправлять отсутствие тега <TR> перед первой строкой, представленной элементами TH и TC, которые могут появляться только в пределах элемента TR.
- Наличие ячеек перекрывающих друг друга является недопустимым; для ознакомления с подобной ситуацией смотрите пример, указанный ниже. В таких случаях, представление зависит от конкретной реализации.
Пример неправильной таблицы:
<table border> <tr><td rowspan=2>1<td>2<td>3<td>4<td>5 <tr><td rowspan=2>6 <tr><td colspan=2>7<td>8 </table>
которая выглядит примерно так:
/-------------------\
| 1 | 2 | 3 | 4 | 5 |
| |---------------|
| | 6 | | | | Ячейки помеченные как 6 и 7 пересекаются!
|---|...|-----------|
| 7 : | 8 | | |
\-------------------/Таблицы без границ полезно использовать в качестве макета, а также в качестве их традиционной роли для табличных данных, например, заполняемой формы:
имя: [John Smith ]
номер карты: [4619 693523 20851 ]
срок действия, до: [03] / [97]
телефон: [212 873 2739 ]Этот пример может быть репрезентирован в виде таблицы с одной строкой и двумя столбцами. Первый столбец выровнен по правому краю, а второй выровнен по левому краю. Этот пример может быть размечен как:
<table>
<tr valign=baseline>
<td align=right>
имя:<br>
номер карты:<br>
срок действия, до:<br>
телефон:
<td align=left>
<input name="name" size=18><br>
<input name="cardnum" size=18><br>
<input name="expires-month" size=2> /
<input name="expires-year" size=2><br>
<input name="phone" size=18><br>
</table>
Применение таких технологий является одним из мотивов для использования вложенных таблиц, где таблицы без границ используют содержимое ячеек в качестве макета для включения таблицы.
Подсказка: Вы можете добиться такого же эффекта, указанного выше, при использовании выравнивания по десятичной точке и атрибута DP для того, чтобы установить в качестве символа выравнивания необходимый символ, например:
<table>
<tr align=decimal dp=":">
<td>
имя: <input name="name" size=18><br>
номер карты: <input name="cardnum" size=18><br>
срок действия, до: <input name="expires-month" size=2> /
<input name="expires-year" size=2><br>
телефон:<input name="phone" size=18><br>
</table>
После каждой строки в таблице устанавливается такой отступ, чтобы все столбцы были расположены друг под другом.
Алгоритм Определения Размеров Таблицы
Минимальные и максимальные значения ширины ячейки используются для определения соответствующей минимальной и максимальной ширины для столбцов. Они, в свою очередь, используются для нахождения минимальной и максимальной ширины таблицы. Обратите внимание, что ячейки могут содержать вложенные таблицы, но это не существенно усложняет код. Следующим шагом является назначение ширины столбца в зависимости от текущего размера окна (точнее — ширины между левым и правым полем).
Табличные границы и поля между соседними ячейками необходимо включать на этапе назначения. Существует три ситуации:
- Минимальная ширина таблицы равна или шире, чем доступное пространство. В этом случае назначить минимальную ширину и позволить пользователю горизонтальное прокручивание. Для преобразования в шрифт Брайля, необходимо будет заменить ячейки ссылками на примечания, включающие их полное содержание. В соответствии с соглашением они появляются перед таблицей.
- Максимальная ширина таблицы помещается в пределах доступного пространства. В этом случае установить столбцам их значения максимальной ширины.
- Максимальная ширина таблицы превышает доступное пространство,
но минимальная ширина таблицы меньше доступного пространства. В этом случае, найдём разницу между доступным пространством и
минимальной шириной таблицы и назовём её W. Давайте также D обозначим как разницу между максимальной и минимальной
шириной таблицы.
Для каждого столбца, пусть d будет разницей между максимальной и минимальной шириной этого столбца. Теперь установим ширину столбца до минимальной ширины плюс d раз W свыше D. Это делает столбцы с большим количеством текста шире, чем столбцы с меньшим количеством.
Этот шаг назначения повторяется для вложенных таблиц. В данном случае ширина ограждающей ячейки таблицы играет роль текущего размера окна в приведённом выше описании. Этот процесс повторяется рекурсивно для всех вложенных таблиц.
Если атрибут COLSPEC определяет ширину столбцов в явном виде, то агент пользователя может попытаться использовать эти значения. Если впоследствии, одна из ячеек выходит за рамки ширины столбца, может быть вызван механизм двух проходов для перерисовки таблицы с более подходящими значениями ширины. Если атрибут определяет относительные значения ширины, то всегда необходима модель двух проходов.
Затем модифицируется алгоритм назначения ширины столбца:
- Явные значения ширины из атрибута COLSPEC следует использовать при установлении, при условии, что они больше минимальной ширины столбца, в противном случае следует использовать минимальную ширину столбца.
- Для относительных значений ширины, избыток пространства W, как определено выше, разделяется надлежащим образом между столбцами, гарантируя, что каждому столбцу задаётся по крайней мере, его минимальная ширина. Если W равна нулю или отрицательна, значения ширины столбцов следует увеличить по сравнению с минимальной шириной, чтобы соответствовать требованиям относительной ширины.
Если ширина таблицы задаётся атрибутом WIDTH, агент пользователя пытается установить соответствующие значения ширины столбцов. Атрибутом WIDTH следует пренебречь, если его значение приводит к столбцам, которые имеют меньший размер, чем их минимальная ширина.
Допустимые Атрибуты
- ID
- SGML-идентификатор используется в качестве цели для гипертекстовых ссылок или для именования отдельных элементов в присоединённых таблицах стилей. Идентификаторы NAME лексем должны быть уникальными в рамках текущего документа.
- LANG
- Это одна из кратких меток ISO стандарта языка, например «en.uk» для варианта английского языка используемого в Соединённом Королевстве. Он может быть использован обработчиками при выборе конкретного языкового варианта кавычек, лигатур, правил переноса и так далее. Атрибут языка состоит из двухбуквенного кода языка, соответствующего стандарту ISO 639, в случае необходимости, за которым следует точка и двухбуквенный код страны, соответствующий стандарту ISO 3166.
- CLASS
- Это разделённый пробелами список SGML NAME лексем, которые используются для именования подклассов тега. По соглашению, имена классов интерпретируются иерархически, с самого общего класса слева до наиболее специфичного справа, где классы разделены точкой. Атрибут CLASS чаще всего используется для прикрепления другого стиля к некоторому элементу, но это является рекомендацией, чтобы практические имена классов были выбраны на основе семантики элемента, так как это позволит использование для других целей, таких как ограничение поиска по документам путём сопоставления имён классов элемента. Соглашения по выбору имён классов выходят за рамки данной спецификации.
- CLEAR
- Когда уже есть рисунок или другая таблица возле поля, вы иногда
хотите начать другую таблицу под рисунком, а не рядом с ним. Атрибут CLEAR
позволяет перемещаться вниз без всяких условий:
- clear=left
- запрещает обтекание слева
- clear=right
- запрещает обтекание справа
- clear=all
- запрещает обтекание как слева, так и справа
В качестве альтернативы, вы можете решить разместить элемент рядом с рисунком при наличии достаточного места. Минимально-необходимая ширина определяется следующим образом:
- clear=»40 en»
- запрещает обтекание до тех пор пока смежное горизонтальное пространство не станет более 40 en
- clear=»100 pixels»
- запрещает обтекание до тех пор пока смежное горизонтальное пространство не станет более 100 пикселей
Таблицы стилей (или браузерные значения по умолчанию) могут предоставлять минимальную ширину по умолчанию для каждого класса блочных элементов.
- NOFLOW
- Присутствие этого атрибута запрещает расположение потока текста вокруг таблицы. Данный атрибут избавляет от необходимости использования CLEAR или NEEDS атрибутов в следующем элементе.
- ALIGN
- Определяет горизонтальное выравнивание таблицы (а не её содержимого):
- BLEEDLEFT
- Выравнивание левого края по левой границе (окна).
- LEFT
- Выравнивание левого края по левому краю текстового поля.
- CENTER
- Таблица выравнивается по центру между текстовыми полями и при этом окружающий текст не обтекает таблицу. Это ALIGN значение по умолчанию.
- RIGHT
- Выравнивание правого края по правому краю текстового поля.
- BLEEDRIGHT
- Выравнивание правого края по правой границе (окна).
- JUSTIFY
- При применении данного значения пробелы следует изменять по величине для того, чтобы заполнить пространство между левым и правым полем текста. Для align=justify обтекание текста вокруг таблицы отключено.
- UNITS
- Определяет выбор единиц измерения для атрибута COLSPEC:
- units=en
- Определяет en единицу (типографическая единица равная половине размера точки). Это значение по умолчанию и оно позволяет агентам пользователей представлять табличную строку за один раз, не дожидаясь, получения всех данных таблицы.
- units=relative
- Используется для установки относительной ширины столбцов. Агент пользователя суммирует значения для того, чтобы определить пропорциональную ширину каждого столбца.
- units=pixels
- Наименее полезно!
Проблема разработки для агентов пользователей заключается в том, как обрабатывать случаи, когда содержимое ячейки не помещается в указанные значения ширины столбцов. Один из подходов заключается в обрезании содержимого до заданной ширины столбца, а другой в изменении размера столбцов для того, чтобы вместить содержимое независимо от атрибута COLSPEC (его лучше отложить, пока все данные таблицы не были обработаны перед изменением размера).
- COLSPEC
- Атрибут colspec представляет собой список значений ширины столбцов
и параметров выравнивания. Столбцы перечисляются слева направо, с
заглавной буквой, за которой следует число, например,
COLSPEC=»L20 C8 L40″. Буква L обозначает выравнивание содержимого ячеек
по левому краю, C обозначает выравнивание содержимого ячеек по центру,
а R обозначает выравнивание содержимого ячеек по правому краю. J для
выравнивания по ширине, когда это возможно, в противном случае
это значение рассматривается как значение L для выравнивания по левому
краю. D обозначает выравнивание по десятичной точке; для получения более подробной
информации смотрите атрибут DP.
Заглавные буквы необходимы, чтобы избежать особенно распространённых ошибок, когда L нижнего регистра путают с символом единицы. Записи столбцов разделяются одним или несколькими пробелами.
Число определяет ширину в en единицах, пикселях или дробное значение ширины таблицы в соответствии с тем, что указано в значении атрибута units. Такой подход является более компактным, чем большинство SGML моделей таблицы и выбраны для упрощения ручного ввода. Атрибут width позволяет указать ширину таблицы в пикселях, em единицах или в процентах от пространства между текущим левым и правым краем.
- DP
- Определяет символ, который будет использоваться как десятичная точка, действие которой активируется атрибутом COLSPEC, например dp=».» (По умолчанию) или dp=»,». Значение по умолчанию может быть изменено в соответствии с контекстом языка, который устанавливается с помощью атрибута LANG в родительских элементах.
- WIDTH
- Этот параметр определяет ширину таблицы рассчитываемую в соответствии с атрибутом UNITS. Если units=relative, то ширина берётся в процентах от ширины между текущим левым и правым полем. Агенту пользователя следует игнорировать этот атрибут, если его значение приведёт к столбцам, имеющим меньшие значения ширины, чем их минимальные значения ширины.
- BORDER
- Присутствие этого атрибута указывает агенту пользователя на необходимость представления границ вокруг таблицы. Например: <TABLE BORDER>. Точным внешним видом, а также размерами полей вокруг ячеек, можно управлять с помощью присоединяемых таблиц стилей, или с помощью информации в элементе STYLE, располагаемом в голове документа. В этом отношении особенно полезно создание подклассов таблицы, строки и ячейки.
- NOWRAP
- Атрибут NOWRAP используется, когда вы не хотите, чтобы браузер автоматически переносил строки. В этом случае вы можете явно определить разрывы строк в абзацах с помощью элемента BR.
|
Для создания таблиц в языке HTML используются следующие элементы:
Элемент TABLEВ языке HTML для создания таблиц служит элемент TABLE. Весь код таблицы должен располагаться между тегами <TABLE> и </TABLE>. Атрибуты этого элемента задают параметры для всей таблицы целиком. Атрибуты элемента TABLE:
Атрибут frameАтрибут frame задаёт тип рамки вокруг таблицы. Допустимы следующие значения:
Атрибут rulesАтрибут rules задаёт внутренние границы таблицы (между ячейками). Допустимы следующие значения:
Элемент CAPTION — название таблицыУ таблицы может быть название. Оно не принадлежит непосредственно к табличным данным, а располагается перед таблицей или после неё. В HTML название таблицы задаётся при помощи элемента CAPTION, который должен находиться внутри элемента TABLE. У элемента CAPTION есть один атрибут align, позволяющий задать его расположение: над таблицей (top) или под таблицей (bottom). Пример элемента CAPTION<TABLE> Элемент TR — строки таблицыВ языке HTML таблицы формируются построчно. Элемент TR создаёт строку таблицы, а его атрибуты задают параметры для всех ячеек в строке. Перечислим атрибуты для элемента TR:
Элементы TD и TH — ячейки таблицыВ HTML внутри строк таблиц находятся ячейки. Они бывают двух типов: заголовки столбцов (создаются элементом TH) и обычные ячейки (создаются элементом TD). Элементы TD и TH обязательно должны помещаться между открывающим и закрывающим тегами элемента TR, которые в свою очередь помещаются между тегами <TABLE> и </TABLE>.
Пример с атрибутом rowspan<TABLE align=»center» border=»1″ cellpadding=»5″> Отображение примера в браузере
Пример с атрибутом colspan<TABLE align=»center» border=»1″ cellpadding=»5″> Отображение примера в браузере
| ||
Особенности таблиц | htmlbook.ru
Влад Мержевич
У каждого параметра таблицы есть свое значение установленное по умолчанию. Это означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, причем с некоторым значением. Из-за чего вид таблицы может оказаться совсем другим, нежели предполагал разработчик. Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее.
- Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, уже как обычная таблица.
- Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками, поля вокруг содержимого, устанавливаемые через атрибут cellpadding и расстояние между ячейками, которые определяются значением cellspacing.
- Если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит с рисунками. В этом случае ширина таблицы увеличивается, несмотря на указанные размеры.
- Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.