Атрибуты таблицы – HTML таблицы продвинутые возможности и доступность — Изучение веб-разработки

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: Обратите внимание, что

  1. данный документ является переводом документа «Tables»;
  2. данный документ может содержать неточности, опечатки и ошибки перевода;
  3. официальным документом по данной тематике является оригинальный документ на английском языке, расположенный на сайте 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&gt
  <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>

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

Алгоритм Определения Размеров Таблицы

Алгоритм определения размеров по умолчанию требует двух проходов по данным таблицы. В первом проходе отключён перенос слов, и агент пользователя отслеживает минимальную и максимальную ширину каждой ячейки. Максимальная ширина определяется самой широкой строкой. Так как перенос слов был отключён, абзацы рассматриваются как длинные строки, если они не нарушены элементами <BR>. Минимальная ширина определяется самым широким словом или изображением и так далее с учётом ведущих отступов, маркеров списков и т.д. Другими словами, если бы вы форматировали содержимое ячейки в собственном окне, необходимо было бы определить минимальную ширину, которую бы вы могли сделать, прежде чем начать обрезать содержимое.

Минимальные и максимальные значения ширины ячейки используются для определения соответствующей минимальной и максимальной ширины для столбцов. Они, в свою очередь, используются для нахождения минимальной и максимальной ширины таблицы. Обратите внимание, что ячейки могут содержать вложенные таблицы, но это не существенно усложняет код. Следующим шагом является назначение ширины столбца в зависимости от текущего размера окна (точнее - ширины между левым и правым полем).

Табличные границы и поля между соседними ячейками необходимо включать на этапе назначения. Существует три ситуации:

  1. Минимальная ширина таблицы равна или шире, чем доступное пространство. В этом случае назначить минимальную ширину и позволить пользователю горизонтальное прокручивание. Для преобразования в шрифт Брайля, необходимо будет заменить ячейки ссылками на примечания, включающие их полное содержание. В соответствии с соглашением они появляются перед таблицей.
  2. Максимальная ширина таблицы помещается в пределах доступного пространства. В этом случае установить столбцам их значения максимальной ширины.
  3. Максимальная ширина таблицы превышает доступное пространство, но минимальная ширина таблицы меньше доступного пространства. В этом случае, найдём разницу между доступным пространством и минимальной шириной таблицы и назовём её
    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 таблицы

Для создания таблиц в языке HTML используются следующие элементы:

  • TABLE - создаёт таблицу.
  • CAPTION - задаёт заголовок для таблицы.
  • TR - задаёт строку таблицы.
  • TH - задаёт ячейку таблицы, заголовок столбца.
  • TD - задаёт простую ячейку таблицы с данными.

Элемент TABLE

В языке HTML для создания таблиц служит элемент TABLE. Весь код таблицы должен располагаться между тегами <TABLE> и </TABLE>. Атрибуты этого элемента задают параметры для всей таблицы целиком. Атрибуты элемента TABLE:

АтрибутОписаниеПример
borderШирина рамки вокруг всей таблицыborder="1"
bgcolorОпределяет цвет фона ячеек таблицыbgcolor="yellow"
backgroundПозволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисункаbackground="images/foto.jpg"
bordercolorОпределяет цвет рамки (светлый цвет для объёмной)bordercolor="blue"
bordercolordarkОпределяет тёмный цвет рамки (тень для объёмной)bordercolordark="black"
widthШирина таблицыwidth="100%"
alignleft, right, center - выравнивание таблицы относительно текстаalign="center"
valignЗадаёт вертикальное выравнивание для всех ячеек таблицыvalign="top"
cellspacingРасстояние между ячейкамиcellspacing="2"
cellpaddingПустое расстояние между текстом и внутренней границей ячейкиcellpadding="2"
frameЗадаёт вид рамки вокруг таблицы. Допустимые значения: void, above, below, hsides, vsides, lhs, rhs, boxframe="all"
rulesЗадаёт тип внутренних границ между ячейками: none, rows, cols, allrules="none"

Атрибут frame

Атрибут frame задаёт тип рамки вокруг таблицы. Допустимы следующие значения:

  • void - границ нет (это значение по умолчанию).
  • above - только верхняя часть границы.
  • below - только нижняя часть.
  • hsides - только нижняя и верхняя части.
  • vsides - только левая и правая части.
  • lhs - только левая часть.
  • rhs - только правая часть.
  • box - все четыре части.

Атрибут rules

Атрибут rules задаёт внутренние границы таблицы (между ячейками). Допустимы следующие значения:

  • none - нет границ между ячейками (это значение по умолчанию).
  • rows - только между строками.
  • cols - только между столбцами.
  • all - отображаются все границы между строками и столбцами.

Элемент CAPTION - название таблицы

У таблицы может быть название. Оно не принадлежит непосредственно к табличным данным, а располагается перед таблицей или после неё. В HTML название таблицы задаётся при помощи элемента CAPTION, который должен находиться внутри элемента TABLE. У элемента CAPTION есть один атрибут align, позволяющий задать его расположение: над таблицей (top) или под таблицей (bottom).


Пример элемента CAPTION

<TABLE>
<CAPTION align="bottom">Название таблицы</CAPTION>
Код строк и столбцов таблицы
</TABLE>


Элемент TR - строки таблицы

В языке HTML таблицы формируются построчно. Элемент TR создаёт строку таблицы, а его атрибуты задают параметры для всех ячеек в строке. Перечислим атрибуты для элемента TR:

АтрибутОписаниеПример
alignleft - выравнивание данных в ячейках строки по левому краю (это значение по умолчанию)
center - выравнивание данных по центру (это значение по умолчанию для заголовков столбцов таблиц - TH)
right - выравнивание данных по правому краю
align="center"
valigntop - данные ячейки сдвигаются вверх.
middle - данные ячейки центрируются вертикально (это значение по умолчанию)
bottom - данные в ячейке сдвигаются вниз.
valign="top"
bgcolorУстанавливает цвет фона для строки таблицыbgcolor="green"

Элементы TD и TH - ячейки таблицы

В HTML внутри строк таблиц находятся ячейки. Они бывают двух типов: заголовки столбцов (создаются элементом TH) и обычные ячейки (создаются элементом TD). Элементы TD и TH обязательно должны помещаться между открывающим и закрывающим тегами элемента TR, которые в свою очередь помещаются между тегами <TABLE> и </TABLE>.
Элемент TD от элемента TH отличается лишь визуально в окне браузера. Содержимое элемента TH выравнивается по центру и отображается жирным шрифтом, так как заголовки столбцов принято оформлять именно так. Теги TD и TH, также как и TR, могут иметь свои атрибуты:

АтрибутОписаниеПример
alignУстанавливает горизонтальное выравнивание для содержимого ячеек. Допустимые значения: left (по умолчанию для TD), center (по умолчанию для TH), right. align="center"
valignУстанавливает вертикальное выравнивание для содержимого ячеек. Допустимые значения: top, middle, bottom.valign="top"
bgcolorУстанавливает цвет фона для ячейки таблицыbgcolor="blue"
rowspanОпределяет число строк, перекрываемое текущей ячейкой. По умолчанию используется значение ("1"). Значение ("0") означает, что ячейка перекрывает все строки от текущей до последней строки таблицыrowspan="3"
colspanОпределяет число столбцов, перекрываемое текущей ячейкой. По умолчанию используется значение ("1"). Значение ("0") означает, что ячейка перекрывает все столбцы от текущего до последнего столбца таблицыcolspan="2"
widthУстанавливает рекомендуемую ширину ячейки в пикселях или процентахwidth="20%"
heightУстанавливает рекомендуемую высоту ячейки в пикселях или процентахheight="100"

Пример с атрибутом rowspan

<TABLE align="center" border="1" cellpadding="5">
<TR>
<TH rowspan="2">Примеры</TH>
<TD>Пример1</TD><TD>Пример2</TD>
</TR>
<TR>
<TD>Пример3</TD><TD>Пример4</TD>
</TR>
</TABLE>


Отображение примера в браузере
ПримерыПример1Пример2
Пример3Пример4

Пример с атрибутом colspan

<TABLE align="center" border="1" cellpadding="5">
<TR>
<TH colspan="2">Примеры</TH>
</TR>
<TR>
<TD>Пример1</TD><TD>Пример2</TD>
</TR>
<TR>
<TD>Пример3</TD><TD>Пример4</TD>
</TR>
</TABLE>


Отображение примера в браузере
Примеры
Пример1Пример2
Пример3Пример4

Особенности таблиц | htmlbook.ru

Влад Мержевич

У каждого параметра таблицы есть свое значение установленное по умолчанию. Это означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, причем с некоторым значением. Из-за чего вид таблицы может оказаться совсем другим, нежели предполагал разработчик. Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее.

  • Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, уже как обычная таблица.
  • Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками, поля вокруг содержимого, устанавливаемые через атрибут cellpadding и расстояние между ячейками, которые определяются значением cellspacing.
  • Если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит с рисунками. В этом случае ширина таблицы увеличивается, несмотря на указанные размеры.
  • Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *