HTML / 10. Таблицы

Основные теги таблицы

Все многообразие таблиц можно создать всего лишь пятью тегами: тегом <table>, который выделяет таблицу и ее элементы из содержимого тела документа; тегом <tr>, который определяет строку таблицы; тегами <th> и <td>, определяющими заголовки в таблице и ячейки данных, и тегом <caption>, который определяет название таблицы. Помимо этих
основных тегов существуют теги <colgroup>, <tbody>, <thead> и <tfoot>, позволяющие определять целые разделы таблиц и управлять ими, в частности с их помощью создаются скользящие заголовки. У каждого из тегов есть обязательные и необязательные атрибуты, некоторые из которых действуют не только на сам тег, но и на связанные с ним.

Тег <table>
Тег <table> и его закрывающий тег </table> описывают таблицу в теле документа. Если другое расположение таблицы в окне броузера не предписано таблицами стилей или выравниваниями абзацев или разделов, броузер, встретив тег <table>, останавливает поток текста, пере-водит строку, начинает на новой строке таблицу, а по ее окончании возобновляет поток текста со следующей за таблицей строки. Единственно допустимыми внутри тега <table> являются один или несколько тегов <tr>, которые определяют каждую строку таблицы, а также различные теги разделов таблицы:

<thead>, <tfoot>, <tbody>,
<col> и <colgroup>.

Атрибут align (нежелателен)
Стандарты HTML 4 и XHTML признали нежелательным этот атрибут в пользу свойства align, предоставляемого каскадными таблицами стилей (CSS). Пока он все же остается популярным и поддерживается популярными броузерами.

Подобно изображениям таблицы являются прямоугольными объектами, выровненными каким-либо образом относительно потока текста. Обычно броузер выравнивает таблицу по левому краю, прижимая ее левый край к левому краю окна броузера. Или же таблица может быть центрирована, если находится под действием тега <center>, центрированного абзаца или раздела. В отличие от изображений, однако, таблицы не являются внедренными в поток текста объектами. Текстовое содержимое обычно располагается над ней и под ней, но не сбоку от нее.

Такое поведение таблицы при отображении можно изменить, применяя атрибут align или каскадное определение стиля для тега <table>.

Атрибут align принимает одно из трех значений: left, right или center, означающих, что таблица должна быть выровнена либо по левому или по правому полю потока текста, при этом текст обтекает таблицу; либо по центру, тогда текст располагается сверху и снизу.
Отметьте, что атрибут align в теге <table> отличается от употребленного в тегах элементов таблицы <tr>, <td> и <th>. В последних атрибут align управляет выравниванием текста внутри ячеек таблицы, а не выравниванием таблицы в окружающем ее потоке текста.

Атрибуты bgcolor и background
Можно сделать так, чтобы фон таблицы был отличен от фона документа, применив атрибут bgcolor тега <table>. Значением атрибута bgcolor должен быть либо RGB-триплет, либо стандартное название цвета.

Синтаксис кодов цветов и допустимые названия цветов можно найти в приложении G. Популярные броузеры придадут этот цвет фону всех ячеек в таблице (включая название таблицы). Используя атрибут bgcolor или атрибут style для отдельных строк и ячеек, можно установить для них другой цвет фона.

Атрибут background – не входящее в стандарт расширение, поддерживаемое популярными броузерами, – принимает в качестве значения URL изображения, которым выкладывается фон таблицы. Если изображение больше таблицы, оно будет обрезано. Используя этот атрибут с таблицами без обрамления, можно поместить текст поверх содержащегося в документе изображения.

Атрибут border
Необязательный в теге <table> атрибут border предписывает броузеру провести линии вокруг таблицы, ее строк и ячеек. По умолчанию обрамление отсутствует. Можно присвоить атрибуту border значение, но HTML этого не требует. Если значение атрибута не определено, он просто включает обрамление и некоторый набор характеристик, принятых по умолчанию. В XHTML для достижения того же результата пишите border="border". В HTML или XHTML, присвоив атрибуту border целое значение, вы достигнете трехмерного представления выпуклой рамки шириной в указанное количество пикселов.

Атрибуты frame и rules
Для Netscape 4 атрибут border давал либо все, либо ничего, определяя одновременно ширину и вид как рамки вокруг таблицы, так и линеек, разделяющих ячейки таблицы. Internet Explorer версии 4 и более поздних версий, Netscape версии 6 и более поздних, а также Firefox и Opera позволяют по отдельности модифицировать линии, составляющие рамку вокруг таблицы (frame) и обрамление ячеек (rules).

Принадлежащий стандарту атрибут frame модифицирует действие атрибута border для линий, окружающих таблицу. Принимаемое по умолчанию значение – то, что вы получаете, если вовсе не используете frame, – это box, которое предписывает броузеру провести линии со всех четырех сторон таблицы. Значение border делает то же, что и box. Значение void убирает рамку. Значения атрибута frame – above, below, lhs и rhs – влекут появление рамочных линий сверху, снизу, слева и справа от таблицы соответственно. Значение vsides проводит линии рамки слева и справа от таблицы (по вертикальным сторонам рамки); значение hsides проводит линии рамки по верхней и нижней границам таблицы. В соответствии со стандартами, которые теперь имеют поддержку со стороны всех популярных броузеров, при помощи атрибута rules можно управлять также толщиной линий, обрамляющих ячейки внутри таблицы. Принятое по умолчанию поведение, соответствующее значению all, означает наличие рамок вокруг ячеек. Значение groups делает более толстыми линии между группами строк и столбцов, определенными тегами <thead>, <tbody>, <tfoot>, <col> и <colgroup>. Значения rows и cols проводят линии только между строками и столбцами соответственно, тогда как значение none убирает обрамление всех ячеек в таблице.

Атрибуты bordercolor, bordercolorlight и bordercolordark
Обычно популярные броузеры создают рамку вокруг таблицы с использованием трех цветов для достижения эффекта трехмерности: цвета фона документа и его темной и светлой вариаций. Не входящий в стандарт, но реализованный в броузере Internet Explorer атрибут bordercolor позволяет установить цвет рамки вокруг таблицы и обрамления ячеек, не совпадающий с цветом фона (если, конечно, рамка включена). Значениями атрибута bordercolor могут быть либо шестнадцатеричный RGB-триплет, либо стандартное название цвета, описанные в приложении G.

Internet Explorer позволяет также устанавливать цвета сторон рамки по отдельности при помощи специальных атрибутов расширения bordercolorlight и bordercolordark, значения которых соответствуют бликам и теням на светлой и темной сторонах рамки. Эффективность имитации трехмерности связана с отношением между двумя этими цветами. В общем случае светлый цвет должен быть приблизительно на 25% ярче, чем цвет рамки, а темный – на 25% темнее.

Не следует забывать, что если вы пользуетесь этими атрибутами, то лишь владельцы броузера Internet Explorer увидят эти эффекты.

Атрибут cellspacing
Атрибут cellspacing управляет расстоянием между соседними ячейками в таблице и шириной поля по внешним краям ячеек, расположенных вдоль границ таблицы. Броузеры обычно оставляют между ячейками два пиксела и столько же вдоль границы таблицы. Если включить в тег <table> атрибут border, расстояние между ячейками увеличивается на два пиксела (вместе становится четыре), чтобы было где изобразить выпуклую линию границы между ячейками. Внешние поля граничных ячеек увеличиваются на значение атрибута border.

Включая в тег <table> атрибут cellspacing, можно увеличивать и уменьшать расстояние между ячейками. К примеру, чтобы сделать его минимальным, нужно включить в тег атрибут border и положить cellspacing равным нулю.

Атрибут cellpadding
Атрибут cellpadding заведует расстоянием между краем ячейки и его содержимым. По умолчанию это расстояние равно одному пикселу. Можно сделать так, чтобы содержимое ячейки касалось границ соответствующей ячейки, положив cellpadding=0 в теге <table>. Это расстояние можно увеличить, положив значение атрибута равным величине, превосходящей единицу.

Комбинации атрибутов border, cellspacing и cellpadding
Результат совместного использования атрибутов border, cellspacing и cellpadding в теге <table> может оказаться неочевидным.

Хотя допустимы любые комбинации атрибутов border и cellspacing, ниже приведены встречающиеся чаще всего:

• border=1 и cellspacing=0 создают внешние и внутренние рамки наименьшей возможной толщины – два пиксела.

• border=n и cellspacing=0 устанавливают минимально возможное расстояние между ячейками (два пиксела) и внешнюю рамку толщиной n плюс один пиксел.

• border=1 и cellspacing=n создают обрамление одинаковой толщины – внешние и внутренние рамки имеют толщину n плюс два пиксела, причем два пиксела отводятся на тени – по одному с каждой стороны.

Атрибут cols
Прежде чем изобразить таблицу, броузер должен прочитать ее целиком, чтобы определить число столбцов в таблице и ширину каждого из них. Для больших таблиц это может быть долгим процессом, вынуждающим пользователей дожидаться появления вашей страницы. Не входящий в стандарт атрибут cols заранее сообщает броузеру, сколько столбцов будет в таблице. Значением этого атрибута должно быть целое число, означающее количество столбцов в таблице.

Атрибут cols – это не более чем совет броузеру. Если указано неправильное число столбцов, броузер вправе проигнорировать атрибут cols, с тем чтобы вывести таблицу правильно. Вообще, включать атрибут cols в тег <table> – правильно, хотя бы для того, чтобы помочь броузеру быстрее вывести таблицу.

Атрибуты valign и nowrap
Атрибут valign задает общее для всех ячеек таблицы выравнивание по вертикали. Допустимыми значениями valign в теге <table> являются top (по верхней границе), bottom (по нижней границе), middle (по центру) и baseline (по базовой линии). По умолчанию содержимое ячейки центрируется по вертикали.

Броузеры рассматривают каждую ячейку таблицы, как если бы она была окном броузера, заполняя ячейку содержимым так же, как они это делают при отображении содержимого тела документа (с учетом особых свойств выравнивания для ячеек таблицы). Соответственно броузеры автоматически переносят строки текста, заполняя отведенное им в ячейке пространство. Атрибут nowrap, включенный в тег <table>, останавливает эти переносы текста во всех строках таблицы. При наличии атрибута nowrap броузер располагает все содержимое ячейки в одну строку, пока не встретит теги
или <p>, вызывающие разрыв строки, вслед за которым поток содержимого начинается с новой строки внутри ячейки таблицы.

Для тега <table> только Opera поддерживает атрибут valign. Ни один броузер не поддерживает атрибут nowrap на этом уровне. Впрочем, того же результата вы можете достигнуть, изменяя атрибуты valign и nowrap тегов <tr>, <td> и <th>, и такой подход приветствуется всеми популярными броузерами.

Атрибуты width и height
Автоматически броузер создает таблицу такой ширины, какая требуется для правильного отображения всего содержимого ячеек. При необходимости можно при помощи атрибута width сделать таблицу шире.

Значение атрибута width – это либо целое число пикселов, либо процент от ширины окна броузера, причем допускаются значения, превосходящие 100%. К примеру:

<table width=400>

предлагает броузеру отобразить таблицу шириной в 400 пикселов, с учетом всего ее внешнего обрамления. Если таблица шире 400 пикселов, броузер игнорирует атрибут. Альтернативным образом:

<table width="50%">

предлагает броузеру создать таблицу в половину ширины окна броузера. Опять в ширину таблицы входит все внешнее обрамление таблицы и атрибут игнорируется, если таблица без этого атрибута была бы шире.

Относительную ширину следует использовать для тех таблиц, ширина которых должна автоматически изменяться с изменением ширины окна броузера. К примеру, для таблицы, которая должна располагаться во всю ширину окна броузера, следует написать <table width=100%>. Абсолютные значения ширины следует использовать для аккуратно отформатированных таблиц, содержимое которых будет трудно прочитать в широком окне.
Популярные броузеры позволяют вам использовать нестандартный атрибут height для установки рекомендуемой высоты таблицы. Броузер отобразит таблицу не меньшей высоты, но может сделать ее выше, если это необходимо для размещения содержимого таблицы. Этот атрибут полезен, когда нужно растянуть таблицу, чтобы заполнить фрейм
или какую-то специальную область документа, но употребляется редко, в частности из-за того, что не входит в стандарт.

Атрибут summary
Атрибут summary введен стандартом HTML 4.0. Его значением служит заключенная в кавычки строка, описывающая назначение и подытоживающая содержание таблицы. В соответствии со стандартом назначение этого атрибута состоит в предоставлении расширенного доступа невизуальным броузерам, особенно для пользователей с физическими недостатками.

Атрибуты hspace и vspace
Как и в случае с изображениями, рекомендуется оставить вокруг таблицы некоторое свободное пространство. Воспользуйтесь нестандартными атрибутами hspace и vspace в теге <table>, каждый из которых принимает в качестве значения количество пикселов, определяющее свободное пространство слева и справа и соответственно сверху и снизу
от таблицы, то есть пространство между таблицей и окружающим ее текстом. Интересно, что все популярные броузеры, кроме Internet Explorer, поддерживают эти атрибуты в теге <table> при том, что Internet Explorer поддерживает их в теге <img>.

Стандартные атрибуты таблиц
Стандарты HTML 4 и XHTML в соединении со стандартом каскадных таблиц стилей (CSS) предоставляют множество атрибутов, которые являются общими не только для тега <table> и тегов, используемых при описании таблиц, но также и для многих других тегов.

Атрибуты id и title
Атрибут id и заключенная в кавычки строка – значение атрибута – используется для снабжения таблиц документа уникальными метками, позволяющими ссылаться на них в гиперссылках, таблицах стилей, сценариях или апплетах. Необязательный атрибут title и заключенная в кавычки строка – значение атрибута – используются для привязывания к таблице фразы, описывающей таблицу. Название не обязано быть уникальным, и, возможно, броузер им никак не воспользуется. Популярные броузеры, например, отображают текстовое значение атрибута title всякий раз, когда указатель мыши попадает на содержимое тега.

Атрибуты dir и lang
Хотя содержимое Сети использует, главным образом, английский язык, Сеть является всемирной. Стандарты HTML 4 и XHTML способствуют распространению национальных языков на сетевых страницах. Мы от всего сердца поддерживаем это стремление. Атрибуты dir и lang представляют лишь малую часть этого процесса. Атрибут lang позволяет явно указать язык, который употребляется в таблице. Значение атрибута lang – это двухбуквенный код языка по стандарту ISO, включающий необязательный языковой модификатор, добавляемый через дефис.

Атрибут dir советует броузеру, в каком направлении следует отображать текст: слева направо (dir=ltr), как в обычных западных языках, например английском или немецком, или справа налево (dir=rtl), как это обычно в восточных языках, таких как китайский или иврит.
Все последние версии популярных броузеров поддерживают атрибуты dir и lang.

Атрибуты class и style
Стандарт каскадных таблиц стилей (CSS) представляет собой санкционированный способ определения характеристик отображения HTML/XHTML-элементов и быстро становится единственным таким способом.

Атрибут style используется для определения характеристик отображения таблицы и ее элементов, замещая любые другие правила из таблицы стилей, действующие по отношению ко всему документу. Атрибут class используется для ссылки на таблицу стилей, которая определяет уникальные характеристики отображения таблицы и ее элементов. Их действие затрагивает все аспекты работы с таблицами, и они хорошо поддерживаются всеми популярными броузерами.

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

При помощи разных атрибутов событий (например onClick или onKey-Down) можно заставить броузер реагировать на такие события, исполняя одну или несколько JavaScript-команд или апплетов, сослаться на которые можно, указывая их в качестве значений соответствующих
атрибутов событий.

Тег <tr>
Для определения строки в таблице используется тег <tr>. В нем помещаются одна или несколько ячеек, содержащих заголовки, обозначаемые тегом <th>, и содержащих данные, определяемые тегом <td>. Тег <tr> имеет множество специальных атрибутов, управляющих его поведением, вместе с множеством общих атрибутов таблицы.Во всех строках таблицы столько же ячеек, сколько в самой длинной строке таблицы. Броузер автоматически добавляет пустые ячейки в строки с меньшим числом ячеек.

Атрибуты align и valign
Атрибут align для тега <table>, может быть, и нежелателен в стандартах HTML 4 и XHTML, но он по-прежнему хорош в теге <tr> и других элементах таблицы. Атрибут align для тега <tr> позволяет изменять общее для всех ячеек строки выравнивание их содержимого по горизонтали. Атрибут действует на все ячейки в текущей, но не в следующей строке.В соответствии со значениями атрибута align – left, right, center, justify и char – броузер выравнивает содержимое каждой ячейки в строке по левому или правому краю ячейки, по ее центру, по обоим краям или по определенному символу соответственно. Подобным образом можно изменять общее для всех ячеек строки выравнивание их содержимого по вертикали при помощи атрибута valign. Обычно броузеры выводят содержимое ячеек центрированным по вертикали. Присвоив атрибуту valign в теге <tr> одно из значений: top, bottom, center, middle или baseline (только Internet Explorer), вы предлагаете броузеру поместить содержимое ячеек строки в верхней, в нижней части соответствующей ячейки, отцентрировать или выровнять по базовой линии верхней строки текста в других ячейках таблицы:

<table border="border">
<tr>
<th>Alignment</th>
<th>Top</th>
<th>Baseline</th>
<th>Center</th>
<th>Middle></th>
<th>Bottom</th>
</tr>
<tr align="center">
<th><h1>Baseline_ _
Another line</h1></th>
<td valign="top">AAyy</td>
<td valign="baseline">_AAyy_</td>
<td valign="center">AAyy</td>
<td valign="middle">AAyy</td>
<td valign="bottom">AAyy</td>
</tr>
</table>

Можно также определить горизонтальное и вертикальное выравнивание для отдельных ячеек в строке. Используйте атрибуты выравнивания в теге <tr>, указывая чаще всего встречающееся в строке выравнивание (если оно отличается от принятого по умолчанию), и используйте атрибуты align и valign со своими значениями для каждой ячейки, выравнивание в которой отличается от общего.

Атрибуты char и charoff
Даже простые текстовые редакторы позволяют выравнивать числа в таблице по десятичной точке. До появления стандарта HTML 4.0 языку недоставало этой возможности. Теперь можно использовать атрибут char, чтобы указать, какой символ в ячейках строки таблицы должен быть осью такого выравнивания. Нет необходимости присваивать значение атрибуту char. Если в тег включен атрибут char и ему не присвоено никакого значения, то принимаемый по умолчанию символ будет зависеть от языка – в английском это будет точка, во французском или русском – запятая. Если атрибуту char присвоить значение, состоящее из одного символа, – будет определена другая ось выравнивания.
Атрибут charoff с целым значением задает положение первого вхождения символа, по которому производится выравнивание, в каждой строке. Если строка не содержит символа, по которому производится выавнивание, ее конец выравнивается по указанной в charoff позиции.Атрибуты char и charoff введены только в HTML 4 и XHTML и пока не поддерживаются ни одним из популярных броузеров.

Атрибуты bgcolor и background
Подобно своему родственнику из тега <table>, атрибут bgcolor в теге <tr> устанавливает цвет фона для всей строки.1 Значением атрибута bgcolor должен быть либо RGB-триплет, либо стандартное название цвета. Синтаксис кодов цветов и допустимые названия цветов можно найти в приложении G.

У каждой ячейки в строке будет фон указанного цвета. Цвета отдельных ячеек могут быть переопределены спецификацией атрибута bgcolor для этих ячеек. Нестандартный атрибут background, принимающий в качестве значения URL-адрес файла с изображением, помещает картинку (размноженную, если необходимо) позади текста в строку таблицы. Например, следующий тег заполняет строку таблицы кирпичиками:

<tr background="bricks.gif">

Все популярные броузеры поддерживают атрибут bgcolor, и все они, кроме Internet Explorer, поддерживают расширение background.

Атрибуты bordercolor, borderlight, bordercolordark
Internet Explorer позволяет использовать эти атрибуты аналогично тому, как это делается для тега <table>, для определения цвета рамок в текущей строке. Атрибуты в строке переопределяют значения, указанные для таблицы в целом.

Цветовыми значениями этих атрибутов могут быть либо RGB-триплет, либо стандартное название цвета, полностью описанные в приложении G.

Атрибут nowrap
Броузеры рассматривают каждую ячейку таблицы, как если бы она была окном броузера, заполняя ячейку содержимым так же, как они это делают при отображении содержимого тела документа (с учетом особых свойств выравнивания для ячеек таблицы). Соответственно броузеры автоматически переносят строки текста, заполняя отведенное им в ячейке пространство. Атрибут nowrap, включенный в тег <tr>, останавливает эти переносы текста во всех ячейках строки. При наличии атрибута nowrap броузер располагает все содержимое ячейки в одну строку, пока не встретит теги
или <p>, вызывающие разрыв стро-ки, вслед за которым поток содержимого начинается с новой строки внутри ячейки таблицы.

Теги <th> и <td>
Теги <th> и <td> применяются в тегах таблицы <tr> для создания заголовочных ячеек и ячеек с данными соответственно и определения содержимого ячеек в строке. Оба тега действуют подобным образом, единственное между ними отличие состоит в том, что броузер отображает текст заголовка – считается, что он представляет название или описание данных в таблице – жирным шрифтом и что принятое по умолчанию выравнивание содержимого заголовка может отличаться от такового для данных. Данные обычно по умолчанию выравниваются влево, а заголовки – по центру.Подобно тегу строки таблицы (<tr>) теги ячеек поддерживают богатое множество атрибутов стиля и выравнивания содержимого, которые можно применять к одиночной ячейке заголовка или данных. Эти атрибуты имеют приоритет перед своими аналогами, общими для ячеек строки. Имеются также специальные атрибуты, определяющие число строк и столбцов в таблице, которое может охватывать ячейки. Теги <th> и <td> допускают также общие атрибуты таблицы.

Содержимым тегов <th> и <td> может быть все, что можно поместить в тело документа, включая текст, изображения, формы и т. д., даже другие таблицы. И как это было описано выше, броузер автоматически создает таблицу достаточно большой – и по горизонтали и по вертикали, – чтобы отобразить содержимое всех ячеек.

Если в некоторой строке оказалось меньше ячеек, чем в других строках, броузер помещает пустые ячейки в конец строки, заполняя ее. Если вы хотите создать пустую ячейку в начале или в середине строки, чтобы обозначить, например, отсутствующие данные, создайте ячейку данных или заголовка без содержимого.Пустые ячейки выглядят иначе, чем ячейки с данными или заголовками: когда у таблицы имеется обрамление, пустые ячейки не будут иметь выпуклую рамку, а просто будут пустыми. Если нужно сделать пустую ячейку с выпуклой рамкой, как у всех других ячеек в таблице, позаботьтесь о том, чтобы поместить в ячейку минимальное содержимое – одиночный тег
, например.

Атрибуты align и valign
Атрибуты align и valign идентичны одноименным атрибутам тега строки (<tr>, см. раздел 10.2.3), но используются с тегами <th> или <td> и управляют выравниванием содержимого по горизонтали и вертикали только в текущей ячейке. Они имеют приоритет перед установками выравнивания для строки в целом, но не действуют на выравнивание в
следующих за текущей ячейках.

Атрибуту align можно присвоить значения left, right, center, приказывая броузеру выровнять содержимое ячейки по левому или правому краю ячейки или по ее центру соответственно.
В ранних версиях Internet Explorer поддерживалось значение justify, равномерно заполнявшее ячейку словами, как в газетной колонке. Теперь этому пришел конец. Атрибут valign принимает одно из значений: top (по умолчанию), bottom, center, middle или baseline, выравнивая содержимое ячейки по верху, по низу, по центру или в середине (только для IE) ячейки или по базовой линии первой строки текста в других ячейках строки таблицы.

Атрибут width
Подобно своему близнецу из тега <table>, который позволяет сделать таблицу шире, атрибут width для тегов ячеек позволяет сделать шире отдельную ячейку и, следовательно, весь столбец, в котором она содержится. Значением атрибута width могут быть либо целое число пикселов, либо процентное значение, выражающее ширину ячейки в отношении к ширине всей таблицы. Например:

<th width=400>

устанавливает ширину текущей ячейки заголовка и, следовательно, всего столбца, равной 400 пикселам. Альтернативно:

<td width="40%">

создает ячейку данных в столбце, занимающем 40 процентов всей ширины таблицы.Поскольку популярные броузеры делают все ячейки столбца одной и той же ширины, следует вставлять атрибут width только в одну ячейку столбца, предпочтительно в первой строке, чтобы легче было читать исходный текст. Если окажется, что несколько ячеек в столбце содержат атрибут width, будет учитываться больший из них. Нельзя сделать столбец уже, чем необходимо, чтобы отобразить все ячейки столбца. Поэтому если броузер решит, что столбец должен быть не уже 150 пикселов, для того чтобы в нем поместилось все содержимое ячеек, то в любой из ячеек этого столбца броузер проигнорирует атрибут width, который пытается установить ширину ячейки всего в 100 пикселов.

Атрибут height
Атрибут height позволяет определить минимальную высоту текущей ячейки в пикселах. Поскольку все ячейки в строке имеют одинаковую высоту, этот атрибут достаточно указать в одной из ячеек строки, желательно в первой. Если какой-то другой ячейке в строке нужно быть выше, чтобы вместить свое содержимое, этот атрибут игнорируется,
и все ячейки в строке будут большего размера.

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

Атрибут colspan
В таблице принято помещать заголовки, описывающие несколько расположенных под ними столбцов. Атрибут colspan используется в тегах заголовочных ячеек и ячеек данных, чтобы объединить несколько ячеек в строке. Установите значение атрибута colspan равным целому числу ячеек строки, которые вы хотите объединить. Например:

<td colspan="3">

предлагает броузеру создать ячейку, занимающую то же пространство по горизонтали, как три ячейки в строках, расположенных выше или ниже. Броузер разместит содержимое такой ячейки на всем выделенном пространстве.

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

Атрибут rowspan
Подобно тому как атрибут colspan объединяет несколько ячеек в одной строке, атрибут rowspan объединяет ячейку с несколькими находящимися под ней. Атрибут rowspan включается в теги <th> и <td> в самой верхней строке таблицы, пересекающей создаваемую объединенную ячейку, и ему присваивается значение, равное числу строк, которые эта ячейка охватывает. Созданная ячейка будет занимать пространство текущей ячейки и соответствующего числа ячеек под ней. Броузер будет размещать содержимое объединенной ячейки по всему ее пространству. Например:

<td rowspan="3">

создает ячейку, которая объединяет текущую и еще две нижележащие строки.

Как и в случае атрибута colspan, броузер игнорирует слишком большие значения rowspan и объединяет только ячейки, явно определенные тегами <tr>. Броузер не станет добавлять в таблицу пустые строки, чтобы удовлетворить чрезмерно большому значению rowspan.

Комбинирование атрибутов colspan и rowspan
Можно распространить одну ячейку одновременно по вертикали и по горизонтали, включив в теги заголовка таблицы или данных таблицы атрибуты colspan и rowspan вместе. Например:

<th colspan="3" rowspan="4">

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

Атрибут nowrap
Броузеры рассматривают каждую ячейку таблицы, как если бы она была окном броузера, заполняя ячейку содержимым так же, как они это делают при отображении содержимого тела документа (с учетом особых свойств выравнивания для ячеек таблицы). Соответственно броузеры автоматически переносят строки текста, заполняя отведенное им в ячейке пространство. Атрибут nowrap, включенный в теги заголовочных ячеек или ячеек данных, останавливает эти переносы текста в ячейке. При наличии атрибута nowrap броузер располагает все содержимое ячейки в одну строку, пока не встретит теги
или <p>, вызывающие разрыв строки, вслед за которым поток содержимого начинается с новой строки внутри ячейки таблицы.

Атрибуты bgcolor и background
Для отдельной ячейки также можно изменить цвет фона с помощью атрибутов bgcolor и background. Значением атрибута bgcolor должен быть либо RGB-триплет, либо стандартное название цвета. Синтаксис кодов цветов и допустимые названия цветов можно найти в приложении G.

Атрибут background принимает в качестве значения URL изображение, которым выкладывается фон ячейки. Если изображение больше ячейки, оно будет обрезано. Любопытно, что броузер Internet Explorer солидарен с другими популярными броузерами в поддержке атрибута background, примененного к одиночной ячейке, но, в отличие от них, не поддерживает этот атрибут для тегов <table> и <tr>.

Значения атрибутов background и bgcolor могут быть переопределены соответствующими свойствами из таблиц стилей.

Атрибуты bordercolor, borderlight, bordercolordark
Internet Explorer позволяет использовать эти атрибуты для изменения цвета рамок в отдельной ячейке, если, конечно, рамки включены атрибутом border для таблицы.

Эти атрибуты переопределяют значения аналогичных атрибутов, указанных в тегах <table> и <tr> для текущей ячейки. Значениями этих трех атрибутов могут быть либо RGB-триплет, либо стандартное название цвета, описанные в приложении G.

Атрибуты char и charoff
Как и для тега <tr>, можно использовать атрибут char с тегами <th> и<td>, чтобы указать, какой символ в ячейках строки таблицы должен быть осью выравнивания, что обычно делается для десятичных дробей. Нет необходимости присваивать значение атрибуту char. Если этот атрибут включен в тег без указания его значения, то принимаемый по умолчанию символ будет зависеть от языка – в английском это будет точка, в русском или французском – запятая. Если атрибуту charприсвоить значение, состоящее из одного символа, будет определен другой центр выравнивания.

Атрибут charoff с целым значением используется для определения положения первого вхождения символа, по которому производится выравнивание, в каждой строке. Если строка не содержит символа, по которому производится выравнивание, ее конец выравнивается по указанной в charoff позиции.

Атрибуты char и charoff включены в стандарты HTML 4 и XHTML, но пока не поддерживаются ни одним из популярных броузеров.

Атрибуты headers и scope
Атрибут headers ассоциирует ячейки заголовков с ячейкой данных таблицы. Значением этого атрибута служит заключенный в кавычки список имен, определенных для различных заголовочных ячеек при помощи атрибута id. Атрибут headers особенно полезен для невизуальных броузеров, которые, возможно, будут произносить вслух содержимое заголовка, перед тем как представлять содержимое ассоциированных с ним ячеек данных.
Атрибут scope используется для связывания ячеек данных с ячейкой заголовка. Если scope=row, все ячейки строки заголовка ассоциируются с ячейкой заголовка. Если scope=col, с текущей ячейкой связываются все ячейки текущей строки. Значения rowgroup и colgroup связывают заголовочную ячейку со всеми ячейками группы строк (определенной тегами <thead>, <tbody> или <tfoot>) и ячейками группы столбцов (определенной тегами <col> или <colgroup>) соответственно.

Атрибут abbr
Значением этого атрибута должно быть сокращенное описание содержимого ячейки. При недостатке места броузер может решить вывести это сокращенное описание или использовать его в невизуальном контексте.

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

«Сколько я потратил на еду?» или «Сколько всего ушло на такси?»

В будущем броузеры, возможно, будут обслуживать такие запросы с помощью атрибута axis.

Значение этого атрибута – это заключенный в кавычки список имен категорий, который может использоваться для создания запросов.

В результате, если в ячейках, соответствующих покупкам продуктов, будет написано axis=meals, броузер сможет найти такие ячейки, выделить их содержимое и вычислить сумму.

Тег <caption>
У таблицы обычно бывает заголовок, объясняющий ее содержимое, поэтому популярные броузеры предоставляют тег заголовка таблицы. Авторы обычно помещают тег <caption> непосредственно после тега <table>, но можно помещать его практически где угодно внутри таблицы между тегами строк. Тег заголовка может включать любое содержимое тела документа, так же как ячейка таблицы.

Атрибуты align и valign
По умолчанию броузеры помещают содержимое заголовка над таблицей центрированным по горизонтали. Можно поместить его под таблицей, присвоив атрибуту align значение bottom (значение top, разумеется, эквивалентно принятому по умолчанию). Вы также можете использовать атрибут align для определения горизонтального положения заголовка, однако популярные броузеры поразному интерпретируют альтернативные значения. Например, Internet Explorer и Opera в случае установки атрибута align в значение left или right выравнивают (соответственно влево или вправо) текст заголовка вдоль горизонтального верхнего края таблицы. Зато в Netscape и Firefox текст помещается рядом с левой или правой стороной таблицы, в верхней ее части.

Кроме того, Internet Explorer поддерживает атрибут valign со значениями top или bottom у тега <caption>. В комбинации с атрибутом align этот атрибут позволяет вам выравнивать заголовок таблицы по любому из четырех ее углов, но не вдоль какой-либо стороны. Остальные броузеры игнорируют атрибут valign.

Рассмотрим пример. Internet Explorer выводит заголовок внизу таблицы и выравнивает по левому краю. В то же время Firefox, игнорирующий атрибут valign и интерпретирующий
левое выравнивание по-другому, помещает заголовок вдоль левого края таблицы:

<caption valign=bottom align=left>

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

Используйте их на здоровье. Но не забывайте использовать контекстный селектор TABLE CAPTION, когда ссылаетесь на стили заголовка во внешних или размещенных на уровне документа таблицах стилей.

Статьи по HTML на эту тему:

За пределами обычных таблиц
Новейшие теги таблицы

Вернуться в раздел: HTML / 10. Таблицы