Таблица тегов и атрибутов html: HTML теги и атрибуты с описанием

Leave a Comment / Html / By /

Содержание

Полный список HTML атрибутов с описанием

14.08.18 ИТ / HTML 4112

При разработке сайтов активно используются всевозможные теги с различными атрибутами. Какие атрибуты существуют в языке HTML? В этой статье приводится полный список HTML атрибутов с описанием.

Название Описание Теги
accept задает список типов, которые принимает сервер form, input
accept-charset задает список поддерживаемых наборов символов form
accesskey определяет клавишную комбинацию для активизации или добавления фокуса к элементу все
action задает адрес, который обработает данные, переданные через форму form
align задаёт горизонтальное выравнивание элемента applet, caption, col, colgroup, hr, iframe, img, table, tbody, td, tfoot, td, tdead, tr
alt задает альтернативный текст, в случае, если изображение не может быть отображено applet, area, img, input
async указывает, что скрипт должен быть выполнен асинхронно script
autocomplete показывает, могут ли управляющие элементы в форме по умолчанию иметь собственные значения для автодополнения в форме form, input
autofocus устанавливает фокус на элементе button, input, keygen, select, textarea
autoplay задает автовоспроизведение контента audio, video
autosave задает, что предыдущее значение следует сохранить в выпадающем списке при загрузке страницы input
bgcolor задает цвет фона элемента, вместо этого следует использовать CSS body, col, colgroup, marquee, table, tbody, tfoot, td, th, tr
border задает бордюр, устаревший атрибут, вместо него следует использовать CSS img, object, table
buffered содержит отрезок времени, уже буферизованного медиа audio, video
challenge задает строку вызова, которая передаётся вместе с публичным ключом keygen
charset задает кодировку содержимого meta, script
checked указывает, следует ли отметить элемент при загрузке страницы command, input
cite задает источник для цитаты blockquote, del, ins, q
class задает класс для элемента все
code указывает адрес аплета для загрузки и выполнения applet
codebase предоставляет абсолютный или относительный адрес директории applet
color задает цвет, вместо него следует использовать CSS basefont, font, hr
cols определяет количество столбцов textarea
colspan определяет диапазон количества столбцов ячейки td, th
content задает значение, зависит от контекста meta
contenteditable указывает, редактируется ли содержимое элемента все
contextmenu определяет идентификатор элемента menu, который послужит, как контекстное меню элемента все
controls указывает, следует ли отображать кнопки управления audio, video
coords задает координаты области для активного участка area
data задает адрес ресурса object
data-* позволяет прикрепить произвольные атрибуты все
datetime указывает дату и время, ассоциированное с элементом del, ins, time
default устанавливает дорожку по умолчанию track
defer указывает, что скрипт должен быть запущен, после того как страница будет загружена script
dir		 определяет направление текста, допустимые значения: ltr, rtl все
dirname задает уникальное имя значения направления вывода текста input, textarea
disabled выключает элемент button, command, fieldset, input, keygen, optgroup, option, select, textarea
download указывает, что ссылка используется для загрузки a, area
draggable определяет, можно ли перетаскивать элемент все
dropzone указывает, что элемент принимает содержимое элемента, которое перетаскивают на него все
enctype определяет тип содержимого для данных формы, когда используется метод post form
for задает связь между элементами label, output
form указывает форму, которая является владельцем элемента button, fieldset, input, keygen, label, meter, object, output, progress, select, textarea
formaction указывает действие элемента, перезаписывающее действие, указанное в форме input, button
headers идентификаторы заголовков таблицы, которые применяются к этому элементу td, th
height задает высоту элемента, для остальных тегов следует использовать CSS canvas, embed, iframe, img, input, object, video
hidden скрывает элемент все
high задает нижнюю границу верхнего диапазона meter
href задает адрес ресурса a, area, base, link
hreflang задает язык ресурса a, area, link
http-equiv задает эквиваленты заголовков meta
icon задает картинку, которая будет представлять команду command
id задает идентификатор все
ismap делает изображение частью серверной карты изображений img
itemprop используется для добавления свойств словаря микроданных к элементу все
keytype указывает тип сгенерированного ключа keygen
kind задает вид дорожки текста track
label
указывает читабельный заголовок дорожки текста		 track
lang определяет язык для используемого элемента все
language определяет язык скрипта, используемый в элементе script
list устанавливает список опций input
loop устанавливает, следует ли повторять дорожки audio, bgsound, marquee, video
low задает верхнюю границу нижнего диапазона meter
manifest устанавливает адрес кешированного манифеста документа html
max задает максимальное допустимое значение input, meter, progress
maxlength задает максимальное количество символов input, textarea
media задает подсказку для тегов a, area, link, source, style
method задает метод отправки данных: post, get form
min задает минимальное допустимое значение input, meter
multiple задает возможность множественного выбора input (тип email или file), select
name задает имя элемента button, form, fieldset, iframe, input, keygen, object, output, select, textarea, map, meta, param
novalidate указывает, что форма не должна проверятся form
open указывает, следует ли показывать детали при загрузке страницы details
optimum задает оптимальное число meter
pattern задает регулярное выражение input
pattern задает регулярное выражение input
ping задает пинг a, area
placeholder задает подсказку input, textarea
poster задает постер video
preload управляет предварительной загрузкой audio, video
pubdate задает дату публикации time
radiogroup задает группу радиоэлементов command
readonly указывает, можно ли редактировать содержимое элементов input, textarea
rel задаёт отношение целевого объекта к объекту ссылки a, area, link
required указывает, обязательно ли заполнение input, select, textarea
reversed задает указание отображать список по убыванию ol
rows задает количество строк textarea
rowspan определяет количество строк ячейки таблицы, которые следует объединить td, th
sandbox позволяет установить ряд ограничений на контент, загружаемый во фрейме iframe
spellcheck управляет разрешением на проверку орфографии все
scope связывает между собой ячейки с заголовком и обычные ячейки th
scoped задает применение стиля только внутри родительского элемента style
seamless устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа iframe
selected устанавливает значение option
shape определяет на изображении тип активной области, которая служит ссылкой a, area
size задает ширину элемента input, select
sizes задает размеры иконки link
span определяет число колонок, к которым будут применяться заданные характеристики col, colgroup
src задает адрес audio, embed, iframe, img, input, script, source, track, video
srcdoc задает содержимое фрейма непосредственно в атрибуте iframe
srclang задает язык track
srcset задает список из одного или нескольких значений, разделённых запятыми, указывающих набор возможных изображений для отображения в браузере img
start задает начальный номер ol
step задает шаг для значений input
style задает стили все
summary предназначен для краткого описания таблицы table
tabindex переписывает порядок установки фокуса при нажатии кнопки табуляции все
target задает, где открыть документ a, area, base, form
title задает текст, который будет отображаться в всплывающей подсказке, когда на него наведут указатель все
type задает тип элемента button, input, command, embed, object, script, source, style, menu
usemap связывает между собой картинку и карту-изображение img, input, object
value задает значение button, option, input, li, meter, progress, param
width задает ширину элемента, для остальных тегов следует использовать CSS canvas, embed, iframe, img, input, object, video
wrap указывает, следует ли переносить текст textarea

Список тегов HTML-списка и таблица тегов таблицы

Теги:  HTML  List  table  Форма этикетки  Теги списка

Теги списка

<Ul> неупорядоченный список
Атрибуты:
Тип списка Тип списка Значение: круг сплошного круга, квадрат пустого круга
            
<ol> упорядоченный список
Атрибуты:
Тип списка Тип значения: A a 1 I i и т. д.
Начальное значение начального значения: начальная буква / номер
   обратное обратное значение: обратное

Примеры:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
  
         <ul type = "disc"> <font color = "red"> Просто заголовок </ font>
    	     <li> Список 1 </ li>
    	     <li> Список 1 </ li>
    	     <li> Список 1 </ li>
    </ul>
         <ol type = "a" start = "3" reversed = "reversed"> <font size = "5"> Упорядоченный список </ font>
    	     <li> <a href="http://www. baidu.com" target="_blank"> Список 1 </a> </ li>
		 <li> <a href="./success.html"> окно входа </a> </ li>
		 <li> Список 1 </ li>
		 <li> Список 1 </ li>
    </ol>
</body>
</html>

<a> Теги Гиперссылки

Атрибуты:

Href: адрес веб-сайта, например: http://www.12356789.com

Цель: форма перехода _self открывается на собственной странице _blank открывает другую страницу для открытия

Эффект:

Форма этикетки

Табличный тег <table>
Атрибуты:
                     width  height：px
    border: border
cellpadding: расстояние между текстом и границей в ячейке
cellspacing: поля
                     align: «left»  «center»
Bgcolor: цвет фона
Теги
tr   <tr>: ОК
Атрибуты: Атрибуты:
”” ”” ”align: align: align
Bgcolor: сплошной цвет фона
• высота: высокая высота: высокая
   <td>: столбец

Атрибуты:

Colspan: горизонтальное слияние: colspan: горизонтальное слияние
Размах строк: вертикальное слияние

Примеры:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		
	<table border="1" cellspacing="0" cellpadding="15px" bgcolor="#776655">
		<thead align="center">
			<! - Свойства заголовка->
			<tr> 
				 <th> Date </ th>
				 <th> возраст </ th>
				 <th> день рождения </ th>	
			</tr>
			<tr></tr>
		</thead>
		<tbody align="center">
			<tr>
				<td rowspan="2">hello</td>
				<td>abandon</td>
				<td>im</td>
			</tr>
			<tr>
				
				<td>you</td>
				<td>hello</td>
			</tr>
		</tbody>
		<tfoot align="center">
			  <! - tfoot: добавить дополнительный контент, такой как итог, в конце таблицы
			 		 -->
			 <td colspan = "2"> Всего </ td>
		    
			<td>256</td>
		</tfoot>
	</table>
</body>
</html>

Эффект:

При написании раннего интерфейса он обычно пишется с использованием табличных атрибутов, но теперь он обычно не применим

 

Интеллектуальная рекомендация

PTA-День святого Валентина

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

Резюме конструкции SpringMVC (продолжение следует)

На прошлых выходных я разговаривал со своим другом о создании инфраструктуры Spring MVC. Днем я изо всех сил старался помочь ему понять начальную конструкцию среды Spring. После того, как структура бы…

Играйте с CocoaPods post_install и pre_install

В повседневной разработке iOS самая длинная форма использования CocoaPods выглядит следующим образом: Но иногда мы хотим сделать что-то кроме установки сторонней библиотеки во время установки / обновл…

mvn deploy загружает пакет jar на удаленный склад

Используйте команду idea deploy Настроить pom.xml   Настроить setting.xml   <server>                &nbs…

96. Различные бинарные поисковые деревья (динамическое планирование)

96. Различные бинарные поисковые деревья тема Решение проблем Код тема Учитывая целое число n и сколько бинарных поисковых деревьев, состоящих из 1 . .. n как узел? Решение проблем Когда вы сталкиваете…

Вам также может понравиться

Разработчики программного обеспечения Java часто недоразумения

2019 Unicorn Enterprise Heavy Glour Repringment Python Engineer Standard >>> Массив преобразован в коллекцию (ArrayList） Ошибка: если это часто лечится        List<Stri…

SDUT -3663 Суть Таблица 4-2: Обратный алгоритм для элементарного обмена (улучшение данных)

 …

No SLF4J providers were found.

Разрешить переходные конфликты зависимостей Gradle gradle 1 Проблема Сегодня я неожиданно обнаружил, что Light Realm не может выводить журналы, и консоль выдает следующее предупреждение ⚠️: Кажется, ч…

В сочетании с Java8 исходным кодом разведочный принцип HASHMAP

Резюме Hashmap — это важная структура данных в Java, а hashmap используется для хранения объектов ключа-значений. Hashmap находит очень высокую эффективность, поэтому частота очень высока, и это также. ..

[01 рюкзак] Проблема с дрюком (01 рюкзак)

Статьи Справочник 0. Предисловие 1. 01 рюкзак обнаженных вопросов 0. Предисловие Кондор :: [Рюкзак] Шаблон алгоритма проблем с рюкзаком (шаблон) 1. 01 рюкзак обнаженных вопросов 1024. Повышенная пробл…

Теги и атрибуты HTML

Любой код содержит в себе команды управления, посредством которых выполняются определенные задачи. В каждом языке они называются по-разному, но суть у них одна и та же. Чтобы не запутаться в терминах и говорить на одном языке, давайте разберемся как называются и как используются команды HTML.

В пояснениях я буду приводить ссылки на спецификацию, а также на её перевод, о котором упоминал на странице HTML это... Упоминание о переводе А. Пирамидина имеется в официальной спецификации HTML, так что перевод можно считать качественным.

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

В среде HTML цепочка выполнения команд следующая:

  1. Источниками команд являются теги – специальные конструкции языка HTML. При помощи них программист сообщает программе, которая будет обрабатывать документ, всю необходимую информацию, требующуюся для правильного отображения документа.
  2. Команды выполняются программой – обозревателем. Обозреватели разных разработчиков обрабатывают документы с некоторыми отличиями, но в целом, результат примерно одинаков.
  3. Команды обозреватель применяет к тексту и другой информации, содержащейся в обрабатываемом документе.

Теги выглядят следующим образом:

<html> <body> <head> <b> <p> <img> <object> и другие.

Чтобы увидеть (если интересно) внутренности html-страницы, в обозревателе кликните правой клавишей мыши и нажмите на пункт Искодный код или Код страницы (везде по-разному).

Ниже приведён фрагмент кода главной страницы портала mail. ru с 2530 по 2547 строку:

Теги (от английского tag) — ярлык, бирка, этикетка. Действительно, эти команды в угловых скобках можно сравнить с бирками, т.к. они закрепляются за фрагментами гипертекста и служат как бы инструкцией, поясняющей интенет-обозревателю, что с этим фрагментом необходимо сделать. Теги обозначаются латинскими символами, заключёнными в угловые скобки.

Полный перечень тегов можно найти в спецификации HTML. Их там чуть менее ста. Каждый отвечает за свои конкретные функции. Поэтому у некоторых может возникнуть резонный вопрос — неужели этого хватает для получения того многообразия оформления, которое на сегодняшний день присутствует в сети интернет?

Атрибуты тегов

Разумеется, если бы дело ограничивалось только этим набором, то в интернете в плане оформления царило бы скудное однообразие. Дело в том, что большинство тегов имеет настройки, как ваш монитор имеет настройки яркости и контраста. Использовать (регулировать) их можно при помощи атрибутов тегов, а диапазон (или значения) этих настроек указан в спецификации для каждого тега отдельно. Теперь немного о том, как это выглядит:

<!-- общий вид такой: --> 
<тег атрибут="значение" атрибут2="значение" >
  
<!-- Для примера возьмём изображение и тег IMG, 
который изображение встраивает в страницу: -->

<img alt="комментарий" src="mestopolozhenie_kartinki">
 
alt , src , width и height - атрибуты тега IMG.
 
<!-- Добавим им значения: -->

<img alt="квадрат" src="files/attachment/images/txt.png">

Теперь изменим значения ширины, чтобы получить прямоугольник:

<img alt="прямоугольник"
            src="files/attachment/images/txt.png">

Каждому атрибуту (за редким исключением) необходимо присваивать значение, как в примере выше высота картинки имела значение сто. При этом следует сохранять синтаксис, то есть ставить знак равенства, кавычки и другие символы как того требует спецификация!

Сразу отмечу, что для некоторых тегов существуют обязательные атрибуты. Например, для тега <img> атрибут alt обязателен. В том случае, если изображение не удасться загрузить, необходимо будет передать пользователю информацию, которую предполагалось передать с помощью изображения. Эту информацию и указывает атрибут alt. В следующем примере я изменю путь к изображению, чтобы оно не грузилось и укажу альтернативный текст.

<img alt="тут должна быть картинка" src="some_path/txt.png">

Итак, атрибуты бывают:

  1. Обязательные для некоторых тегов.
  2. Необязательные.

Снова о тегах

Идём дальше. Надо кое-что добавить и о тегах — в языке HTML их два вида:

  1. Строковые (inline). Их ещё называют инлайновые.
  2. Блоковые (block).

Если мы заключим гипертекст в тег <p></p>, то на странице он сформируется в отдельный блок (так как это блоковый тег) и образует абзац текста. Абзацы на этой странице сформированы как раз таким образом. Пример ниже:

<!-- Обрамляем текст тегами - начало (<p>) и конец (</p>) абзаца: -->

<p>Все заблуждаются в меру своих возможностей. </p>
 
<!-- Получаем текстовой абзац: -->

Все заблуждаются в меру своих возможностей.

Теперь представьте, что текст в абзаце (блоке) надо некоторым образом оформить, не нарушая его целостность. Для этого используют inline-теги, которые производят действие над содержимым, но блока не образуют. Сделаем текст в следующем примере большим (тег <big></big>) и маленьким (тег <small></small>).

<p>Все <big>заблуждаются</big> в меру своих <small>возможностей.</small></p>

Все заблуждаются в меру своих возможностей.

Из всех тегов исключением являются разве что теги <ins></ins> и <del></del>. Эти двое могут работать как со строковыми, так и с блочными элементами. Вот что написано о них в спецификации:

Эти два элемента необычны для HTML тем, что могут обрабатывать элементы уровня блока или инлайн-элементы (но не те и другие вместе). Они могут содержать одно или более слов в параграфе или один или более элемент уровня блока, такой как параграфы, списки или таблицы. Спецификация HTML 4.01 в переводе Пирамидина А.

 По принципу работы теги тоже можно разбить на две категории. Одни производят действия над гипертекстом, другие служат для включения в гипертекст других элементов. Если брать для примера уже рассмотренные теги, то <p></p> производит действие над гипертекстом, формируя из него абзац, а тег <img> включает в гипертекст внешний объект, но на сам гипертекст повлиять не может. Теги, не влияющие непосредственно на гипертекст, называют пустыми (empty). Закрывающий тег у пустышек указывать запрещено!

К пустышкам относятся: <img>, <hr> (строит линию), <br> (переводит строку) и ряд других. Поэтому с закрывающими тегами возможны три варианта:

  1. Закрывающий тег (</тег>) обязателен.
  2. Закрывающий тег (</тег>) не обязателен.
  3. Закрывающий тег (</тег>) запрещён.

Приведу ещё примеры для наглядности. Тег <a></a> необходимо закрывать, т.к. он делает заключённый в себя гипертекст гиперссылкой. Если его не закрыть, то весь документ после открывающего тега <а> будет выполнять роль гиперссылки (пока в тексте не встретится закрывающий тег </a> или открывающий <a>).

<!-- Ниже 2 варианта, в первом обе ссылки закроем: --> 

<p>Указываем <a href="#">ссылку</a> на другой <a href="#">документ</a></p>
 
<!-- во 2 варианте закроем лишь вторую ссылку: -->

<p>Указываем <a href="#">ссылку на другой <a href="#">документ</a></p>

<!-- Получим в итоге: -->

Указываем ссылку на другой документ

Указываем ссылку на другой документ

Немного по-другому обстоят дела с тегами, не трбующими обязательной закрывающей части. К их числу можно отнести теги, создающие элементы таблицы: <tr> и <td>. Возьмём для примера таблицу:

<table>
  <tr>
    <td> содержимое первой ячейки </td>
    <td> содержимое второй ячейки </td>
  </tr>
</table>
   
<!--  будет равноценен следующему коду: -->
   
<table>
  <tr>
    <td> содержимое первой ячейки
    <td> содержимое второй ячейки
</table>

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

Запрещается закрывать теги, не производящие действий над гипертекстом — <hr>, <img>, <br> и другие. Требования для каждого тега указаны в спецификации. Ниже мы рассмотрим — где именно что указано. Повторим. В языке HTML существует два вида тегов:

  1. Строковые (inline). Их ещё называют инлайновые.
  2. Блоковые (block).

Конечный (/закрывающий) тег может быть:

  1. Закрывающий тег (</тег>) обязателен.
  2. Закрывающий тег (</тег>) не обязателен.
  3. Закрывающий тег (</тег>) запрещён.

атрибуты у тегов могут быть:

  1. Обязательные.
  2. Необязательные.

Эту информацию по каждому конкретному тегу можно получить в спецификации. Как ею пользоваться написано ниже. И ещё один важный момент касательно использования различных символов в HTML.

При html-верстке иногда приходится использовать символы, которые могут трактоваться двояко. Например, употребление символов ‘<‘ и ‘>’ будет расценено обозревателями как часть тега, то есть как служебный символ, а это не всегда так. Поэтому проблемные символы кодируются. Называются такие закодированные символы мнемониками. Список мнемоник можно посмотреть в спецификации.

Вложенность тегов

Теги могут быть вложенными друг в друга как матрёшки. При этом они делятся на родительские и дочерние элементы. Поясню на примере:

<ins>Элемент подчёркнутого текста является родительским
элементом для элемента <del>зачёркнутого текста</del> с наследованием.</ins>

Дочерние элементы наследуют характеристики родительских. Таким образом зачёркнутый текст будет также и подчёркнутым.

Элемент подчёркнутого текста является родительским элементом для элемента зачёркнутого текста с наследованием.

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

Использование спецификации

Официальной на данный момент (март 2012) является версия HTML 4.01, версия HTML 5. 0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему HTML 5.

Теперь о том, как пользоваться спецификацией. Допустим, нас интересуют вышеупомянутые таблицы. Открываем краткое содержание и выбираем соответствующий пункт (№11) — Таблицы.

Открываем спецификацию, меню разделов:

Откроется меню элемента TABLE. Можно почитать введение и общую информацию по таблицам (лишней не будет). Далее следует непосредственно само описание тега <TABLE>.

Переходим по ссылке к подробному описанию — синтаксису и списку атрибутов.

Тут можно получить информацию по каждому атрибуту.

  1. Требования закрывающего тега (</тег>). В данном случае начальный и конечный теги обязательны.
  2. Названия атрибутов данного тега.
  3. Список значений каждого атрибута.
  4. Статус атрибута (Актуальный/Устаревший/Запрещённый).
  5. Тип данных (значений) атрибута.
  6. Список общих атрибутов, которые используются с любыми тегами.

Важное замечание. На скриншоте выше атрибут align имеет статус Deprecated (не рекомендован). Такой атрибут не будет работать (и будет ошибкой) в DOCTYPE Strict. Так что использовать deprecated-элементы я крайне не рекомендую. Статус любого элемента можно посмотреть в общем списке.

Уточнения по тегам:

  1. Название тега.
  2. Статус открывающего тега в документе html:
    • O — optional (не обязателен)
  3. Статус закрывающего тега в документе html:
    • O — optional (не обязателен)
    • F — forbidden (запрещён)
  4. Предполагается ли содержимое (гипертекст):
    • E — Empty (без содержимого)
  5. Статус тега (D, L и F):
    • D — deprecated (не рекомендован).
    • L — loose (допускается в переходной спецификации Transitional).
    • F — Frameset (допускается в спецификации Frameset).
  6. Комментарий, назначение тега.

Уточнения по атрибутам:

  1. Название атрибута.
  2. Принадлежность к тегу (группе тегов).
  3. Варианты значений атрибута.
  4. Обязательный/необязательный для указанного тега (группы тегов).
  5. Статус атрибута (D, L и F)
    • D — deprecated (не рекомендован).
    • L — loose (допускается в переходной спецификации Transitional).
    • F — forbiden (запрещён).

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

Кроме всего прочего советую ознакомиться со следующими разделами:

Вообще информации по тегам достаточно много и на одной странице всё не уместишь. Но для того, чтобы разобраться самостаятельно при помощи спецификации и её перевода (у кого туго с английским), этого достаточно, я думаю. Для получения общего представления и более лёгкого восприятия — тоже. Далее практика и таблицы стилей.

Если материалы сайта оказались для вас полезными, можете поддержать дальнейшее развитие ресурса, оказав ему (и мне ) моральную и материальную поддержку.

ARIA&colon. роль таблицы — Доступность

Значение таблицы атрибута роли ARIA идентифицирует элемент, содержащий роль, как имеющий неинтерактивную табличную структуру, содержащую данные, расположенные в строках и столбцах, подобно собственному

HTML. элемент.

 <дел
  роль = "таблица"
  aria-label="Семантические элементы"
  aria-describedby="semantic_elements_table_desc"
  ария-строка = "81">
  <дел>
    Семантические элементы для использования вместо ролей ARIA
  


<дел роль = "строка">
Роль ARIA
Семантический элемент







заголовок
h2




заголовок
h6




группа строк
голова




термин
дт

Элемент с role="table" представляет собой статическую табличную структуру со строками, содержащими ячейки. Ячейки нельзя сфокусировать или выбрать, хотя виджеты в отдельных ячейках таблицы могут быть интерактивными. По возможности настоятельно рекомендуется использовать нативный элемент HTML

.

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

Чтобы создать таблицу ARIA, добавьте role="table" к элементу контейнера. В этом контейнере каждая строка имеет набор role="row" и содержит дочерние ячейки. Каждая ячейка имеет роль заголовка столбца , заголовка строки или ячейки . Строки могут быть дочерними элементами таблицы или внутри группы строк .

Заголовок таблицы может быть определен с помощью aria-labeledby или aria-label . Все остальные элементы семантической таблицы, такие как

, , , :
  • псевдокласс :nth-child для установки выравнивания по ячейкам столбца;
  • свойство text-align для выравнивания содержимого всех ячеек по одному и тому же символу, например ‘.’.

Последнее изменение: , участниками MDN

и , необходимо добавить через связанные роли, такие как rowgroup ,

3 row ,

3 row ,

4 заголовок столбца

и ячейка .

Если таблица содержит сортируемые столбцы или строки, атрибут aria-sort следует добавить в элемент ячейки заголовка (а не в саму таблицу). Если какие-либо строки или столбцы скрыты, aria-colcount или aria-rowcount должны быть включены, указывая общее количество столбцов или строк, соответственно, вместе с aria-colindex или aria-rowindex в каждой ячейке. aria-colindex или aria-rowindex устанавливается на позицию ячейки в строке или столбце соответственно. Если таблица включает ячейки, которые охватывают несколько строк или несколько столбцов, то также следует включить aria-rowspan или aria-colspan . Поймите, гораздо проще использовать

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

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

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

Связанные роли, состояния и свойства WAI-ARIA

role="rowgroup"

Необязательный дочерний элемент таблицы, группа строк инкапсулирует группу строк, аналогичную

, и .

роль = "строка"

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

ария-описывается атрибутом

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

aria-метка атрибут

aria-label предоставляет доступное имя для таблицы.

aria-colcount атрибут

Этот атрибут требуется только в том случае, если столбцы постоянно отсутствуют в DOM. Он обеспечивает явное указание количества столбцов в полной таблице. Установите значение на общее количество столбцов в полной таблице. Если неизвестно, установите aria-colcount="-1" .

aria-rowcount атрибут

Этот атрибут требуется только в том случае, если строки не присутствуют в DOM все время, например прокручиваемые таблицы, которые повторно используют строки для минимизации количества узлов DOM. Он обеспечивает явное указание количества строк в полной таблице. Установите значение на общее количество строк в полной таблице. Если неизвестно, установите ария-рядкаунт="-1" .

Взаимодействие с клавиатурой

Нет

Необходимые функции JavaScript

Нет. Для сортируемых столбцов см. роль арии заголовка столбца.

Примечание: Первое правило использования ARIA заключается в том, что вы можете использовать нативную функцию с уже встроенной семантикой и поведением, которое вам требуется, вместо того, чтобы переназначать элемент и добавлять роль, состояние или свойство ARIA к сделайте его доступным, затем сделайте это. Используйте HTML

элемент вместо роли таблицы ARIA, когда это возможно.

 <дел
  роль = "таблица"
  aria-label="Семантические элементы"
  aria-describedby="semantic_elements_table_desc"
  ария-строка = "81">
  <дел>
    Семантические элементы для использования вместо ролей ARIA
  


<дел роль = "строка">
Роль ARIA
Семантический элемент







заголовок
h2




заголовок
h6




группа строк
голова




термин
дт

Вышеприведенное является частью таблицы. Хотя полная таблица содержит 81 запись, как указано в свойстве aria-rowcount , в настоящее время видны только четыре. Столбцы можно сортировать, но в настоящее время они не отсортированы, на что указывает свойство aria-sort в заголовках столбцов.

Используйте только

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

Added benefits

none

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# table
ARIA Authoring Practices
# table
  • элемент таблицы HTML
  • Руководство по работе с таблицами HTML
  • АРИЯ: сетка роль

Последнее изменение: , участниками MDN

: Элемент Table Body — HTML: Язык гипертекстовой разметки

HTML-элемент

).

Элемент

вместе со своими родственниками и предоставляют полезную семантическую информацию, которую можно использовать при отображении на экране или принтере, а также в целях доступности.

Этот элемент включает глобальные атрибуты.

Устаревшие атрибуты

выравнивание Устаревший

Этот перечисляемый атрибут указывает, как будет обрабатываться горизонтальное выравнивание содержимого каждой ячейки. Возможные значения:

  • left , выравнивание содержимого по левому краю ячейки
  • center , центрирование содержимого в ячейке
  • right , выравнивание содержимого по правому краю ячейки
  • выравнивание , вставка пробелов в текстовое содержимое, чтобы содержимое было выравнивано в ячейке
  • char , выравнивание текстового содержимого по специальному символу с минимальным смещением, определяемым char и charoff атрибуты.

Если этот атрибут не установлен, предполагается значение слева .

Поскольку этот атрибут устарел, используйте вместо него свойство CSS text-align .

Примечание: Эквивалентное свойство text-align для align="char" еще не реализовано ни в одном браузере. См. раздел совместимости браузера text-align для значение.

цвет Устаревший

Цвет фона таблицы. Это 6-значный шестнадцатеричный код RGB с префиксом « # ». Также можно использовать одно из предопределенных ключевых слов цвета.

Поскольку этот атрибут устарел, вместо него используйте свойство CSS background-color .

символ «> Устаревший

Этот атрибут используется для установки символа для выравнивания ячеек в столбце. Типичные значения для этого включают точку ( . ) при попытке выровнять числа или денежные значения. Если для align не установлено значение char , этот атрибут игнорируется.

уголь Устаревший

Этот атрибут используется для указания количества символов для смещения данных столбца от символов выравнивания, заданных параметром 9.0003 символ атрибут.

валайн Устаревший

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

  • baseline , что поместит текст как можно ближе к нижней части ячейки, но выровняет его по базовой линии символов, а не по их нижней части. Если все символы одного размера, это имеет тот же эффект, что и 9.0003 снизу .
  • нижний , что поместит текст как можно ближе к нижней части ячейки;
  • средний , который будет центрировать текст в ячейке;
  • и сверху , что поместит текст как можно ближе к верхней части ячейки.

Поскольку этот атрибут устарел, используйте вместо него свойство CSS vertical-align .

  • Если таблица включает
(для семантической идентификации строк заголовков), блок должен следовать за ним.
  • Если вы используете
    • , вы также не можете иметь строки таблицы ( elements ), которые являются прямыми дочерними элементами
    , но не включены в . Все строки без заголовка и нижнего колонтитула должны находиться внутри , если он используется.
  • При печати документа Элементы
    •  и определяют информацию, которая может быть одинаковой или, по крайней мере, очень похожей на каждой странице многостраничной таблицы, в то время как содержимое элемента обычно будет отличаться от страницы. на страницу.
  • Когда таблица представлена ​​в контексте экрана (например, в окне), который недостаточно велик для отображения всей таблицы, пользовательский агент может позволить пользователю прокручивать содержимое
    • , , и на таблицу, если они все следуют друг за другом. Это позволяет разделить строки в больших таблицах на секции, каждая из которых при желании может быть отформатирована отдельно.

    Ниже приведены несколько примеров использования элемента

    . Дополнительные примеры использования этого тега см. в примерах для <таблица> .

    Базовый пример

    В этом относительно простом примере мы создаем таблицу с информацией о группе студентов с

    и с количеством строк в теле.

    HTML

    Здесь показан HTML таблицы. Обратите внимание, что все ячейки body, включая информацию об учениках, содержатся в одном элементе

    .

     <таблица>
    <тело> <тд>3971244
    CSS

    Далее показан CSS для оформления нашей таблицы.

     стол {
  граница: 2px сплошная #555;
  граница коллапса: коллапс;
  шрифт: 16px "Lucida Grande", "Helvetica", "Arial", без засечек;
}

    Во-первых, устанавливаются общие атрибуты стиля таблицы, настраивая толщину, стиль и цвет внешних границ таблицы и используя border-collapse , чтобы гарантировать, что линии границ являются общими для соседних ячеек, а не имеют свои собственные границы. с пробелом между ними. Шрифт используется для установки начального шрифта для таблицы.

    -й,
тд {
  граница: 1px сплошная #bbb;
  отступ: 2px 8px 0;
  выравнивание текста: по левому краю;
}

    Затем стиль устанавливается для большинства ячеек в таблице, включая все ячейки данных, а также стили, общие для наших

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

    Результат

    Результирующая таблица выглядит следующим образом:

    Несколько тел

    Вы можете создать несколько разделов в таблице, используя несколько элементов

    . Каждый потенциально может иметь свою собственную строку или строки заголовка; однако может быть только один на таблицу! Из-за этого вам нужно использовать , заполненный элементами . Давайте посмотрим, как это делается.

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

    Результат

    Сначала результирующая таблица, чтобы вы знали, что мы строим:

    HTML

    Пересмотренный HTML выглядит следующим образом:
    блоки отдельно друг от друга для одной и той же родительской таблицы.
  • Вы можете использовать более одного
    • Идентификатор учащегося Имя Основной
    3741255 Джонс, Марта Информатика
    Ним, Виктор Русская литература
    4100332 Петров, Александра Астрофизика
    и ячейки. Ячейкам придается светло-серый контур толщиной в один пиксель, отступы настраиваются, и все ячейки выравниваются по левому краю с помощью text-align 

     thead > tr > th {
  цвет фона: #cce;
  размер шрифта: 18 пикселей;
  нижняя граница: 2px сплошная #999;
}

    Наконец, ячейки заголовков, содержащиеся в блоке

    , для создания заголовков внутри каждого
    <тело> <тело> <тд>3971244 <тело>

    Обратите внимание, что каждый майор находится в отдельном Блок

    , первая строка которого содержит один элемент .

    Тогда каждая оставшаяся строка в

    каждой специальности состоит из двух ячеек: первая для идентификатора студента, а вторая для его имени.

    CSS 
     таблица {
  граница: 2px сплошная #555;
  граница коллапса: коллапс;
  шрифт: 16px "Lucida Grande", "Helvetica", "Arial", без засечек;
}
й,
тд {
  граница: 1px сплошная #bbb;
  отступ: 2px 8px 0;
  выравнивание текста: по левому краю;
}
thead > tr > th {
  цвет фона: #cce;
  размер шрифта: 18 пикселей;
  нижняя граница: 2px сплошная #999;
}

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

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

     tbody > tr > th {
  цвет фона: #dde;
  нижняя граница: 1,5 пикселя сплошная #bbb;
  вес шрифта: нормальный;
}
    Идентификатор учащегося Имя
    Информатика
    3741255 Джонс, Марта
    4077830 Пирс, Бенджамин
    5151701 Кирк, Джеймс
    Русская литература
    Ним, Виктор
    Астрофизика
    4100332 Петров, Александра
    8892377 Тойота, Хироко
    с атрибутом colspan , охватывающим всю ширину таблицы. В этом заголовке указано имя мажора, содержащегося в
    Спецификация
    HTML Standard
    # the-tbody-element

    Таблицы BCD загружаются только в браузере

    с включенным JavaScript. Включите JavaScript для просмотра данных.
    • Свойства CSS и псевдоклассы, которые могут быть особенно полезны для стилизации элемента

    Полное руководство, 4-е издание)

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

    10.2.1.1. Атрибут align (устарел)

    В стандартах HTML 4 и XHTML этот атрибут объявлен устаревшим в пользу свойства align, предоставляемого каскадными таблицами стилей. Тем не менее, он остается популярным и в настоящее время хорошо поддерживается популярными браузерами.

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

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

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

    Обратите внимание, что атрибут align внутри Тег

    HTML и XHTML: полное руководство, 4-е издание

    С помощью всего пяти тегов можно создать широкий спектр таблиц: Тег

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

    10.2.1. Тег

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

    Тег

    и его Конечный тег
    определяет и инкапсулирует таблицу в теле документа. Если не указано иное в окне браузера по таблице стилей, абзацу, уровню раздела, или другие параметры выравнивания, браузер останавливает текущий поток текста, разрывает строку, вставляет таблицу, начиная с новой строки, а затем перезапускает поток текста на новой строке под таблицей.

    <таблица>
    Функция:

    Определить таблицу

    Атрибуты:
    090

    ALIGN

    ONCLICK

    BACKGROUND

    ONDBLCLICK

    BGCOLOR

    ONKEYDOWN

    BORDER

    ONKEYPRESS

    BORDERCOLOR

    ONKEYUP

    BORDERCOLORLIGHT

    ONMOUSEMOVE

    CELLPADDING

    ONMOUSEOUT

    CELLSPACING

    ONMOUSEOVER

    CLASS

    ONMOUSEUP

    ЦВЕТЫ

    ПРАВИЛА

    DIR

    STYLE

    FRAME

    SUMMARY

    HEIGHT

    TITLE

    HSPACE

    VALIGN

    ID

    VSPACE

    ЯЗЫК

    ШИРИНА

    9

    NOWRAP

    Конечный тег:

    ; никогда не опускался

    Содержит:

    table_content

    Используется в:

    блок

    Единственное содержимое, разрешенное в <таблице> один или несколько тегов
    отличается от используемых внутри тегов элементов таблицы,), теги ячеек таблицы поддерживают богатый набор атрибутов стиля и выравнивания содержимого, которые вы можете применить к отдельные данные или ячейка заголовка. Эти атрибуты переопределяют значения по умолчанию. значения для текущей строки. Существуют также специальные атрибуты, которые управлять количеством столбцов или строк, которые ячейка может занимать в таблице.; см. Раздел 10.2.3, «Тег»), за исключением того, что при использовании с тег, но не влияет на выравнивание последующих ячеек. Подробную информацию о выравнивании см. в Табл. 10-1.

    Вы можете установить значение атрибута align равным влево, вправо или центр, заставляя браузеры выравнивать ячейку содержимое у левого или правого края или в центре ячейка соответственно. Кроме того, Internet Explorer поддерживает значение выравнивания, чтобы заполнить каждую строку текста так, чтобы она вровень с обеими сторонами клетки. Валигн атрибут может иметь значение top, нижний, средний или baseline, сообщая браузеру о необходимости выровнять содержимое ячейки к верхнему или нижнему краю или к центру ячейки или (только Netscape) до базовой линии первой строки текст в других ячейках строки.

    10.2.4.2. Атрибут ширины

    Как и его близнец в Тег

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

    10.2.1.2. Атрибуты bgcolor и background

    Вы можете сделать фон стола другого цвета, чем фон документа с атрибут bgcolor для тег <таблица>. Значение цвета для Атрибут bgcolor должен быть установлен либо в RGB значение цвета или стандартное название цвета. Оба синтаксиса значений цвета а допустимые названия цветов приведены в Приложении G, «Имена и значения цветов».

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

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

    10.2.1.3. Атрибут границы

    Необязательная граница атрибут для тега

    сообщает браузер для рисования линий вокруг таблицы, а также строк и ячеек внутри Это. По умолчанию границ вообще нет. Вы можете указать значение для границы, но вам не нужно с HTML. Сам по себе атрибут просто включает границы и набор значений по умолчанию. характеристики разные для каждого из популярных браузеров (пересмотрите таблица Рис. 10-1; у него есть границы). С XHTML, используйте border=»border» для достижения того же значения по умолчанию полученные результаты. В противном случае в HTML или XHTML укажите целочисленное значение. для границы, равной ширине пикселя 3D линии с точеными краями, которые окружают внешнюю часть стола и делают это кажется тиснением на странице.

    10.2.1.4. Атрибуты рамки и правил

    В Netscape Navigator 4 атрибут границы все или ничего, что влияет на внешний вид и расстояние между двумя рамка вокруг таблицы и линии правил между ячейками данных. Internet Explorer версии 4 и выше, а также последнюю версию Netscape. Navigator версии 6, с другой стороны, позволяет вам индивидуально изменять различные сегменты линий, которые составляют границы вокруг таблицы (рамка), а также вокруг ячеек данных (правила).

    Стандартный атрибут кадра изменяется эффекты границы для линий, которые окружают Таблица. Значение по умолчанию — то, что вы получите, если не использовать рамку вообще — это коробка, который говорит браузеру нарисовать все четыре линии вокруг таблицы. граница значения делает то же самое, что и коробка. Значение void удаляет все четыре сегмента кадра. значения кадров выше, внизу, слева и справа нарисуйте различные сегменты границы сверху, внизу, слева и справа от таблицы соответственно. Значение hsides рисует границы сверху и снизу (горизонтальные) стороны стола; розыгрыши границы по левой и правой (вертикальной) сторонам таблицы.

    Со стандартными таблицами (поддерживается в Internet Explorer 4 и более поздних версиях и в Netscape 6) вы также можете контролировать толщину стола внутренние границы клеток через атрибут правила. Поведение по умолчанию, представленное значением всего, заключается в том, чтобы провести границы вокруг всех клетки. Указание групп делает границы более толстыми между группами строк и столбцов, определенными <голова>, <тело>,

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

    10.2.1.5. Атрибуты bordercolor, bordercolorlight и bordercolordark

    Популярные браузеры обычно рисуют таблицу граница в три цвета, используя светлые и темные вариации документа цвет фона для достижения 3D-эффекта. Нестандартный Атрибут bordercolor позволяет вам установите цвет границ и правил таблицы на что-то отличное от фон (если границы включены, конечно). Значение атрибута bordercolor может быть либо шестнадцатеричное значение цвета RGB или стандартное имя цвета, оба которые полностью описаны в Приложении G, «Имена и значения цветов».

    Internet Explorer также позволяет устанавливать цвета границ индивидуально со специальными атрибутами расширения: границацветсвет и bordercolordark цвета оттеняют более светлые и более темные края границы.

    Эффективность 3D-эффекта скошенной границы связана с соотношение этих двух цветов. В общем, светлый цвет должен быть примерно на 25 процентов ярче, чем цвет границы, а темный цвет должен быть примерно на 25 процентов темнее.

    10.2.1.6. Атрибут ячейки

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

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

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

    Включив атрибут ячейки, вы можете расширять или уменьшать внутренние границы клеток. Например, чтобы сделать самые тонкие внутренние границы клеток, включая граница и интервал между ячейками = 0 атрибуты в теге таблицы.

    10.2.1.7. Атрибут cellpadding

    Cellpadding Атрибут контролирует количество пространства между краем ячейки и его содержимое, которое по умолчанию составляет один пиксель. Вы можете сделать все содержимое ячеек в таблице касается соответствующих границ ячеек, включая cellpadding=0 в теге таблицы. Вы можете также увеличьте пространство ячейки, установив его значение больше единицы.

    10.2.1.8. Сочетание атрибутов border, cellpacing и cellpadding

    Взаимодействие между граница, отступы и атрибуты ячейки Тег

    комбинируется способами, которые могут быть сбивает с толку. На рис. 10-2 показано, как атрибуты создавать внутренние и внешние границы различной ширины.

    Пока всевозможные комбинации бордюра и возможны атрибуты cellpacing, это наиболее общий:

    • граница = 1 и ячейки = 0 производит максимально узкие внутренние и внешние границы: два пикселей в ширину.

    • граница = n и Cellspacing=0 делает максимально узким внутренние границы (шириной два пикселя), с внешней границей, n плюс один пиксель в ширину.

    • граница=1 и Cellspacing= n таблицы имеют равноширокие внешние и внутренние границы, все с точеными края шириной всего в один пиксель. Все границы будут n плюс два пикселя в ширину.

    Рис. 10-2. Атрибуты border, cellpacing и cellpadding таблицы

    10.2.1.9. Атрибут cols

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

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

    , хотя бы для помочь браузеру быстрее форматировать таблицы.

    10.2.1.10. Атрибуты valign и nowrap

    атрибут устанавливает вертикальное выравнивание данных в ячейках по умолчанию для весь стол. Допустимые значения для valign атрибут в

    являются верх, низ, средний или базовый уровень; в вертикальная позиция по умолчанию — центр ячейки.

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

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

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

    Валигн и ноурап атрибуты для тега

    в настоящее время поддерживается только Internet Explorer. Вы достигаете аналогичных эффектов в Netscape, включив valign или атрибут nowrap внутри индивидуального,; может быть опущен в HTML

    Содержит:

    tr_content

    Используется в:

    table_content

    и теги.

    10.2.1.11. Атрибуты ширины и высоты

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

    Значение атрибута ширины либо целое число пикселей или относительный процент экрана ширина, включая значения больше 100 процентов. Например:

     
     указывает расширенному браузеру сделать таблицу шириной 400 пикселей,
включая любые границы и интервалы между ячейками, которые выходят за пределы
край стола. Если таблица шире 400 пикселей, браузер
игнорирует атрибут. В качестве альтернативы:
     
     
     сообщает браузеру, что таблица должна быть в два раза шире экрана
окно. Опять же, эта ширина включает любые границы или интервалы между ячейками, которые
выходят за внешний край стола и не действуют, если
таблица обычно больше половины текущего экрана пользователя
ширина.
     Используйте относительную ширину для таблиц, размеры которых вы хотите изменить автоматически.
окно пользователя; например, таблицы, которые вы всегда хотите
распространяться на все окно (
     
    ). Используйте абсолютное значение ширины для
тщательно отформатированные таблицы, содержимое которых будет трудно читать в
широкие витрины.
     Для Netscape Navigator и Internet Explorer можно использовать
нестандартный атрибут высоты, чтобы предложить
Рекомендуемая высота стола. Браузер сделает таблицу no
короче этой высоты, но может сделать стол выше, если это необходимо
содержат содержимое таблицы. Этот атрибут полезен, когда
пытаясь растянуть таблицы, чтобы они поместились в кадре или какой-то конкретной области
документ, но в остальном от него мало пользы, особенно потому, что он не
стандартный атрибут.
     10.2.1.12. Сводный атрибут 
     Атрибут summary был введен в HTML в версии 4.0.
стандарт. Его значение представляет собой заключенную в кавычки строку, описывающую
цель и резюмирует содержание таблицы. Его предполагаемое использование,
по стандарту, заключается в предоставлении расширенного доступа к
невизуальные браузеры, особенно для пользователей с ограниченными возможностями.
     10.2.2. Общие атрибуты таблиц 
     Стандарты HTML и XHTML в сочетании с каскадным стилем
Стандарт Sheets (CSS) предоставляет ряд общих атрибутов не только
к тегу
     и другой таблице
теги создания, но и для большинства других тегов. За исключением
Класс атрибутов, связанных с CSS, и
стиль управления отображением таблицы, ни один из
другие стандартные атрибуты все же полностью поддерживаются любым из
популярные браузеры.
     10.2.2.1. Атрибуты id и title 
     Используйте id
атрибут со строкой в ​​кавычках
значение для уникальной маркировки тега таблицы для последующего использования
гиперссылка или апплет. Используйте атрибут title
со строковым значением, чтобы опционально озаглавить таблицу или любой из ее
сегменты для общего ознакомления. Значение заголовка не должно быть
уникальным, и он может использоваться или не использоваться браузером. Интернет
Проводник, например, отображает заголовок
текстовое значение атрибута всякий раз, когда пользователь проводит мышью
указатель на содержимое элемента. Раздел 4.1.1.4, «Атрибут id» Раздел 4.1.1.5, «Атрибут title»
     10.2.2.2. Атрибуты dir и lang 
     Хотя его содержимое в основном
на английском языке Интернет является всемирным. Стандарты HTML 4 и XHTML
приложить усилия, чтобы распространить язык на все культуры. Мы поддерживаем это
прилагать усилия всей душой. Режиссёр и
атрибуты lang — это лишь небольшая часть этого
процесс.
     Атрибут dir сообщает браузеру,
направление, в котором должен течь текст содержимого, слева направо
(dir=ltr), как и для распространенных западных языков, таких как
Английский и немецкий или справа налево (dir=rtl), как
для общеупотребительного восточного языка, такого как иврит и китайский.
     Атрибут lang позволяет явно указать
язык, используемый в таблице, или даже содержимое отдельных ячеек. Его
значение должно быть двухбуквенным первичным кодом стандарта ISO, за которым следует
необязательный субкод диалекта с дефисом (-)
между двумя.
     В настоящее время dir и lang
поддерживается Internet Explorer версии 5 и Netscape 6. Раздел 3.6.1.1, «Атрибут dir» Раздел 3.6.1.2, «Атрибут lang»
     10.2.2.3. Атрибуты класса и стиля 
     Каскадные таблицы стилей (CSS)
стандарт — это санкционированный способ определения атрибутов отображения для
элементы HTML/XHTML, и это быстро становится единственным способом. Использовать
атрибут стиля для определения характеристик отображения
для таблицы и ее элементов, которые вступают в силу немедленно и
переопределить стили отображения, которые могут действовать в данный момент для
весь документ. Используйте атрибут класса, чтобы
ссылаться на таблицу стилей, определяющую уникальное отображение
характеристики таблицы и ее элементов.
     Обсуждаем класс и стиль
атрибуты и стандарт CSS подробно описаны в Главе 8, «Каскадные таблицы стилей». Раздел 8.1.1, «Встроенные стили: атрибут стиля» Раздел 8.3, «Классы стилей»
     10.2.2.4. Атрибуты события 
     Популярные браузеры имеют внутреннюю
механизмы, обнаруживающие различные действия пользователя с мышью и клавиатурой
события, которые могут произойти внутри и вокруг ваших таблиц и их элементов.
Например, пользователь может щелкнуть указатель мыши в одном из
ячейки таблицы или выделите заголовок, а затем нажмите клавишу «Ввод» или
Клавиша ввода.
     С помощью различных атрибутов событий вы можете реагировать на эти события,
таких как onClick и onKeyDown, заставив браузер выполнить один или
больше команд или апплетов JavaScript, на которые вы ссылаетесь как на значение
к соответствующему атрибуту события. См. главу 12, «Исполняемый контент».
для деталей.
     10.2.3. Тег 
     Марка
новая строка в таблице с
тег
    . Место в пометить одну или несколько ячеек, содержащих
заголовки, определенные тегом принимает ряд специальных атрибутов, управляющих его поведением,
вместе с общими атрибутами таблиц, описанными в Разделе 10.2.2, «Общие атрибуты таблиц».
    , и
данные, определенные с помощью тега (см. Раздел 10.2.4, »
Теги и«). Тег
      Функция: 
     Определить строку в таблице
      Атрибуты: 
    51515151515151515151515151515151515151151515115151511515151151511515115151511515115115119н.
     ALIGN
     ONDBLCLICK
     BGCOLOR
     ONKEYDOWN
     BORDERCOLOR
     ONKEYPRESS
     BORDERCOLORDARK
     ONKEYUP
     BORDERCOLORLIGHT
     ONMOUSEDOWN
     CHAR
     ONMOUSEMOVE
     CHAROFF
     ONMOUSEOUT
     CLASS
     ONMOUSEUP
     DIR
     ONMOUSEUP
     ID
     Стиль
     LANG
     Титул
     NowRAP
     ONCLICK
      Конечный тег:

    В каждой строке таблицы столько же ячеек, сколько в самой длинной строке; браузер автоматически создает пустые ячейки для заполнения строк меньшим количеством определенные ячейки.

    10.2.3.1. Атрибуты align и valign

    Атрибут align для Тег

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

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

    Аналогичным образом измените вертикальное выравнивание по умолчанию для содержимого ячейки данных, содержащиеся в строке таблицы с атрибут выравнивания. Обычно браузеры отображают содержимое ячейки центрировано по вертикали. Включив атрибут valign в Тег

    со значением сверху, снизу или baseline, вы указываете браузеру разместить таблицу содержимое строки выровнено по верхнему или нижнему краю своих ячеек или выровнены по базовой линии верхней строки текста в других ячейках в ряд (рис. 10-3). Значение средний, хотя и приемлемый, но не имеет реального эффекта поскольку он просто повторяет вертикальное выравнивание по умолчанию:

     <граница таблицы="граница">
    Рис.
    10-3. Влияние атрибута valign на выравнивание содержимого ячейки таблицы

    Вы также можете указать горизонтальное и вертикальное выравнивание для отдельные ячейки в строке (раздел 10.2.4.1, «Атрибуты align и valign»). Используйте атрибуты выравнивания в теге

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

    Таблица 10-1 содержит горизонтальные (выравнивание) и вертикальное (выравнивание) значения и параметры атрибутов содержимого ячейки таблицы. Значения в круглые скобки используются по умолчанию для популярных браузеров.

    Таблица 10-1. Значения и параметры атрибута выравнивания содержимого ячейки таблицы
    Выравнивание Вверх Базовый уровень Центр Внизу

    Базовый уровень_ _


    Другая линия     		AAyy _AAyy_ AAyy AAyy

    Атрибут

    Заголовки Netscape и IE

    Данные Netscape и IE

    Левый

    (слева)

    выровнять

    (Центр)

    Центр

    Право

    Право

    Обоснуйте[63]

    Обоснуйте[63]

    Символ[63]

    Символ[63]

    Топ

    Топ

    валайн

    (Центр)

    (Центр)

    Низ

    Низ

    Базовый уровень

    Базовый уровень

    [63]Значение еще не поддерживается.

    10.2.3.2. Атрибуты char и charoff

    Даже простые текстовые процессоры позволяют выстраивать десятичные точки для чисел в стол. До появления стандарта HTML 4.0 язык был не хватает этой функции. Теперь вы можете включить атрибут char, чтобы указать, какая буква в каждом из ячейки строки таблицы должны быть осью для этого выравнивания. Вам не нужно включать значение с char. если ты нет, символ по умолчанию зависит от языка: это точка в английском языке, например, и запятая во французском языке. Включить атрибут char и одну букву в качестве его значения для указать другой символ выравнивания.

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

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

    10.2.3.3. Атрибут bgcolor

    Как и его родственник для тег

    , цвет bgcolor атрибут тега задает цвет фона всей строки.[64] Его значение является либо значением цвета RGB, либо стандартное название цвета. Как синтаксис значений цвета, так и допустимые названия цветов приведены в Приложении G, «Имена и значения цветов».

    [64]В отличие от

    с Internet Explorer, не поддерживает фон изображение.

    Каждой ячейке в строке будет присвоен этот цвет фона. Индивидуальный цвета ячеек можно изменить, предоставив атрибут bgcolor для этих ячеек.

    10.2.3.4. Атрибуты bordercolor, bordercolorlight и bordercolordark

    Нравиться их нестандартные собратья для

    тег, Internet Explorer позволяет использовать эти атрибуты для установки цвета границ в текущей строке.

    Их значения переопределяют любые значения, установленные соответствующим атрибутом в содержащем теге

    . См. соответствующее описание этих расширений в Разделе 10. 2.1.5, «Атрибуты bordercolor, bordercolorlight и bordercolordark» для подробностей. Значения цвета могут быть либо RGB значение цвета или стандартное название цвета, оба из которых описаны полностью в Приложении G, «Имена и значения цветов».

    10.2.3.5. Атрибут nowrap

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

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

    10.2.4. Теги

    таблицы, чтобы создать ячейки и содержимое в строке. Теги работают аналогично; единственные реальные различия в том, что браузеры отображают заголовок текст — предназначенный для названия или иного описания данных таблицы — в стиль полужирного шрифта и выравнивание по умолчанию их соответствующее содержимое может отличаться от содержимого данных. Данные обычно по умолчанию выравнивается по левому краю; заголовки выравниваются по центру (таблица 10-1).

    и

    Теги

    		 и зайдите внутрь тегов
    ; может быть опущен в HTML

    Содержит:

    body_content

    Используется в:

    tr_content

    		и
    Функция:

    Определить данные таблицы и ячейки заголовка

    Атрибуты:
    0208

    ABBR

    NOWRAP

    ALIGN

    ONCLICK

    AXIS

    ONDBLCLICK

    BACKGROUND

    ONKEYDOWN

    BGCOLOR

    ONKEYPRESS

    BORDERCOLOR

    ONKEYUP

    BORDERCOLORDARK

    ONMOUSEDOWN

    BORDERCOLORLIGHT

    ONMOUSEMOVE

    CHAR

    ONMOUSEOUT

    CHAROFF

    ONMOUSEOVER

    CLASS

    ONMOUSEUP

    COLSPAN

    ROWSPAN

    DIR

    SCOPE

    КОЛЛЕКТОРЫ

    СТИЛЬ

    ВЫСОТА

    НАЗВАНИЕ

    ID

    VALIGN

    LANG

    WIDTH

    End tag:

    или

    Аналогично доступным для строки таблицы (

    и теги также принимают общие атрибуты таблиц, описанные в Разделе 10.2.2, «Общие атрибуты таблиц».

    Содержимое

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

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

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

    10.2.4.1. Атрибуты align и valign

    выровнять атрибуты идентичны атрибутам то же имя для тега строки таблицы (

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

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

    10.2.4.6. Объединение colspan и rowspan

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

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

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

    Так как Netscape и Internet Explorer делают все ячейки в столбце той же ширины, вы должны поместить атрибут ширины в только одна ячейка в столбце, предпочтительно первый экземпляр ячейка в первой строке для удобочитаемости исходного кода. Если две и более ячеек в том же столбце имеют ширину атрибуты, почитается самый широкий. Вы не можете сделать столбец тоньше, чем минимум, необходимый для отображения всех ячеек в столбец. Итак, если браузер определяет, что столбец ячеек нуждается быть не менее 150 пикселей в ширину, чтобы вместить все ячейки содержимого, он будет игнорировать атрибут ширины в одном из теги ячеек столбца, которые пытаются сделать ячейку только 100 пикселей в ширину.

    10.2.4.3. Атрибут высоты

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

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

    10.

    2.4.4. Атрибут colspan

    Это обычно имеет заголовок таблицы, который описывает несколько столбцов ниже это, как заголовки, которые мы используем в Таблице 10-1. Использовать colspan в заголовке таблицы или теге данных для расширить ячейку таблицы на два или более столбца в ее строке. Установить значение атрибута colspan в целочисленное значение равно количеству столбцов, которые вы хотите, чтобы заголовок или ячейка данных охватывать. Например:

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

    Что делать, если справа недостаточно лишних ячеек? Браузер просто расширяет ячейку на столько столбцов, сколько существует, чтобы право; он не добавляет дополнительные пустые ячейки в каждую строку, чтобы разместить чрезмерно расширенное значение colspan. Ты может обойти это ограничение, добавив необходимое дополнение, но без содержимого, ячейки в одну строку. (Дайте им одну тег
    как их содержимое, если хотите Рельефная рамка Netscape вокруг них.)

    10.2.4.5. Атрибут диапазона строк

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

    Включить атрибут rowspan в Тег

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

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

    Как и атрибут colspan, браузер игнорирует слишком расширенные атрибуты rowspan и будут только расширить текущие строки ячеек вниз, которые вы явно определили другие теги

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

    10.2.4.7. Атрибут nowrap

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

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

    10.2.4.8. Атрибуты bgcolor и background

    Пока что опять же, вы можете изменить цвет фона — на этот раз для индивидуальная ячейка данных. Значением этого атрибута является либо RGB шестнадцатеричное значение цвета или стандартное имя цвета. Оба синтаксиса цветовые значения и допустимые названия цветов приведены в Приложении G, «Имена и значения цветов».

    фоновый атрибут, поддерживается только Интернетом Проводник предоставляет URL-адрес изображения, которое мозаично, чтобы заполнить фон клетки. Изображение будет обрезано, если ячейка меньше, чем изображение.

    Ни фон, ни цвет фона переопределит связанное свойство таблицы стилей.

    10.2.4.9. Атрибуты bordercolor, bordercolorlight и bordercolordark

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

    в Разделе 10.2.1.5, «Атрибуты bordercolor, bordercolorlight и bordercolordark» для получения подробной информации.

    Значения этих трех атрибутов переопределяют любые значения, установленные для содержащий <таблицу> или тег

    . Их значения могут быть либо RGB значение цвета или стандартное название цвета, оба из которых описаны полностью в Приложении G, «Имена и значения цветов».

    10.2.4.10. Атрибуты char и charoff

    Так же, как для тег

    , вы можете использовать атрибут char с, или тег) или группу столбцов (определяемую тегомили тег) с ячейкой заголовка.

    10.2.4.12. Атрибут сокращения

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

    10.2.4.13. Атрибут оси

    Таблицы обычно битком набиты данными, что побуждает читателя задать вопрос вопросы. Табличный отчет о расходах, например, естественно приводит к запросы типа «Сколько я потратил на еду?» или же «Сколько у меня стоило такси?» В будущем браузеры может поддерживать такие запросы с помощью оси атрибут.

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

    10.2.5. Тег

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

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

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

    10.2.4.11. Атрибуты заголовков и области действия

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

    Используйте атрибут области для связывания ячеек данных с ячейкой заголовка. При значении row все ячейки в строке заголовка связаны с ячейкой заголовка. Указание col связывает все ячейки в текущем столбец к ячейке. Используя группу строк или colgroup связывает все клетки в ячейке группа строк (определяется

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

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

    <заголовок>
    Функция:

    Определить заголовок таблицы

    Атрибуты:

    ALIGN

    ONKEYUP

    CLASS

    ONMOUSEDOWN

    DIR

    ONMOUSEMOVE

    ID

    ONMOUSEOUT

    LANG

    ONMOUSEOVER

    ONCLICK

    ONMOUSEUP

    ONDBLCLICK

    STYLE

    ONKEYDOWN

    НАЗВАНИЕ

    ONKEYPRESS

    VALIGN

    Конечный тег:

    ; никогда не опускался

    Содержит:

    body_content

    Используется в:

    table_content

    10.

    2.5.1. Атрибуты align и valign

    По умолчанию браузеры размещают содержимое подписи по центру над таблицей. Вы можете разместить его под таблицей с атрибутом align, установленным на нижнее значение (значение top, конечно же, эквивалентен значению по умолчанию).

    В Internet Explorer можно также использовать атрибут align для управления горизонтальной позицией подписи и использовать атрибут valign для изменения вертикальной позиции подписи. Установите для атрибута выравнивания значение слева, по центру (по умолчанию) или справа, чтобы расположить заголовок в соответствующем месте относительно таблицы. Используйте атрибут valign, чтобы поместить заголовок вверху или внизу таблицы. Другие браузеры игнорируют различные значения и атрибуты выравнивания заголовков Internet Explorer.

    10.2.5.2. Многие другие атрибуты

    Как другие табличные теги,

     поддерживает множество различных атрибутов, связанных с языком, событиями и стилями, которые описаны в Разделе 10.

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

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