Содержание

Атрибут таблицы

Перейти к содержанию

Search for:

Главная » HTML

Автор admin Просмотров 987 Обновлено

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

border(который мы уже видели) задает ширину границ таблицы (в пикселях)
CELLSPACINGуказывает расстояние (в пикселях) между одной ячейкой и другой или между ячейкой и краем. По умолчанию это пиксель, поэтому его всегда нужно явно сбрасывать, если это не нужно
CELLPADDINGуказывает расстояние между содержимым ячейки и границей. Если значение указано целым числом, расстояние выражается в пикселях; тем не менее, cellpadding также может быть выражен в процентах.  По умолчанию расстояние равно нул

Размер, указанный в cellpadding и spacespace — после его указания — действует для всех сторон ячейки.

Отношения между атрибутами, которые мы только что изучили, регулируются следующим образом:

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

<table width = "75%" border = "1" cellpadding = "10" cellspacing = "0">

Следующие атрибуты HTML имеют значение для всех элементов таблицы ( <table> , <tr> , <td> ).

Содержание

  1. Размеры
  2. Фон HTML-таблиц
  3. bgcolor
  4. background
  5. Выравнивание таблицы
  6. Цвет border
  7. HTML td: nowrap

Размеры

Следующие атрибуты width и height, которые определяют ширину и высоту (в пикселях или в процентах) таблиц, строк или ячеек.

Фон HTML-таблиц

Мы можем назначить цвет фона, используя атрибут bgcolor , или изображение, используя фон , как мы уже видели в теге <body> .

Давайте посмотрим на пример:

bgcolor
 <table border="1" align="center" bgcolor="#00FF00"> <tr> <td bgcolor="#FF0000"> <font color="#FFFFFF">текст</font> </td> <td></td> </tr> </table>

background

 <table border="1" align="center" bgcolor="#00FF00"> <tr> <td background="fon.gif"> <font color="#FFFFFF">текст</font> </td> <td></td> </tr> </table>

Как и в <body>, фоновое изображение повторяется, и в одном теге можно указать оба атрибута ( bgcolor и background ):

<td bgcolor="#0000FF" background="tabele/fon. gif">

Выравнивание таблицы

Атрибут выравнивания , если ссылается на тег <table>, перемещает таблицу влево ( align="left"по умолчанию ), вправо ( align="right") или в центр ( align="center") документа соответственно. Пример:

<table align="right">

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

Точно так же valign полезен для вертикального выравнивания ячеек. Возможные значения: top(высокое), middle(в середине — это значение по умолчанию), bottom(ниже), baseline(в базовой линии). Пример:

 
<td valign="middle">
текст
</td>

Цвет border

Для границ есть атрибуты bordercolor , bordercolorlight , bordercolordark .  Например:

<table border="2" bordercolor="blue" bordercolorlight="#00CCFF" bordercolordark="#000099">

Эти атрибуты, которые позволяют создавать красивые эффекты, корректно отображаются только в Internet Explorer, в то время как в других браузерах (Mozilla, Opera) они будут отображаться частично, если не некорректно.

На самом деле правильный способ назначить цвет границы — использовать CSS.

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

 
<table bgcolor="#00CCFF" cellpadding="10" cellspacing="1">
<tr bgcolor="FFFFFF">
<td><b>текст</b></td>
<td> </td>
</tr>
</table>

который дает:

HTML td: nowrap

Благодаря атрибуту nowrap вы можете сделать так, чтобы содержимое ячейки не было перенесено , если только мы явно не наложим на него значение <br> (что означает «break », то есть «break»):

 
<table border="1">
<tr>
<td nowrap>
Этот текст не будет перенесен на новую строчку<br>
в этот будет с новой строчки
</td>
</tr>
</table>

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

Поэтому всегда желательно заполнять ячейки чем-либо, даже символом «а» &nbsp;(это обозначение для обозначения «неразрывного пробела» , то есть «пробела, который не переносится») или а 

<br>. &bnspкак и все сущности, это специальный символ и принимает размер тега, <font>внутри которого они содержатся.

Adblock
detector

Таблицы

Таблицы
  1. Основные понятия
  2. Атрибуты тегов таблицы
  3. Использование таблицы как способа расположения элементов на странице

Таблицы — это основное средство управления размещением объектов на странице. Основные теги таблицы:

  • table. Этот тег определяет начало таблицы внутри документа.
  • tr. Этот тег строки таблицы (table row)
    , он определяет строки, идущие слева направо в горизонтальном направлении.
  • td. Этот тег данных таблицы (table data) определяет отдельные ячейки. Тег ячейки таблицы и информация, содержащаяся в нем, определяют структуру таблицы по столбцам.

Cовет

Весь текст и графика помещаются внутри тегов td.

Пример простой таблицы

This is my first table cell. And this is my second table cell.
This is my first table cell in the second row. And this is the second table cell in the second row.
 
Возврат в начало страницы     Возврат на главную страницу сайта Среди атрибутов тегов таблиц можно назвать следующие:
  • align=x. Выравнивание таблицы на странице определяется значением этого атрибута В качестве x должно стоять left или right. Так как поумолчанию в броузерах производится выравнивание по левому краю, а для выравнивания таблиц по центру обычно используются другие теги, то единственно эффективное использование этого атрибута относится к случаю, когда вы хотите сместить всю таблицу к правому краю окна броузера.
  • border=x. Переменная x должна быть заменена числовым значением от 0 и более. Это значение определяет ширину видимой рамки вокруг таблицы. При создании макетов страниц x обычно будет задаваться равным 0.

Cовет

Хотите увидеть, как таблица управляет макетом страницы? Задайте значение рамки равным 1, и тогда ячейки и строки таблицы будут представлены в виде сетки.
  • cellspacing=x. Этот атрибут определяет интервал между отдельными ячейками таблицы (другими словами между видимыми столбцами). Параметр
    x     должен принимать значения, большие ли равные 0. Это поможет получить пустое пространство между элементами, помещенными внутри ячеек.
  • cellpadding=x. Этот атрибут определяет расстояние от границ ячейки до помещенных в нее объектов. Он также используется для создания пустого пространства внутри каждой ячейки.

Cовет

Еще один способ изменения интервалов в таблице — эта вставка графической прокладки в тег TD. Эти «прокладки» являются прозрачными файлами GIF размером 1х1 пиксель, которые ручную растягиваются по ширине и высоте.
  • width=%x или width=x Чтобы задать ширину таблицы, вы можете указать либо число, соответствующее доле в процентах от общей ширины окна броузера, либо конкретное значение, которое будет обозначать конкретную ширину в пикселях. Выбор ширины таблицы чрезвычайно важен. Превышение максимума ширины в 595 пикселей может привести к тому, что при разрешении 640х480 страницу придется пролистывать горизонтально.

Cовет

Если вы хотите выровнять таблицу по центру страницы, то можно использовать тег div вместе с атрибутом выравнивания типа <div align=center>. Открывающийся тег и атрибут помещаются перед таблицей; после того, как вы закончите ввод таблицы, введите закрывающий тег
</div>.
 
Возврат в начало страницы    Возврат на главную страницу сайта

Пример таблицы с атрибутами align, border, cellspacing, cellpadding, width

This is my first table cell. And this is my second table cell.
This is my first table cell in the second row. And this is the second table cell in the second row.
Атрибуты для строк существуют, но используются редко. Контроль осуществляется при работе с ячейками таблицы. Атрибуты выравнивания таковы:
  • align=x Переменная x может иметь значения left, right или middle. Когда вы используете атрибут внутри ячейки таблицы, содержимое ячейки выравнивается в соответствии с атрибутом.

Пример таблицы с атрибутами выравнивания в ячейках

This is my first table cell. And this is my second table cell.
This is my first table cell in the second row. And this is the second table cell in the second row.
  • valign=x X принимает значения top, middle или bottom. При вертикальном выравнивании содержимое ячейки располагается в верхней части, нижней части или посередине ячейки.

Пример таблицы с атрибутами выравнивания valign=x в ячейках

В этом примере первая ячейка таблицы в первой строке и первая ячейка таблицы во второй строке вертикально выравнены по верхнему краю. Вторая ячейка таблицы в первой сторке вертикально выравнена по середине, а вторая ячейка таблицы во второй строке выровнена по нижнему краю.
This is my first table cell. And this is my second table cell.
This is my first table cell in the second row. And this is the second table cell in the second row.

  • colspan=x Здесь x это число столбцов, атрибут colspan заставляет текущую ячейку занимать несколько столбцов по ширине.
 
Возврат в начало страницы    Возврат на главную страницу сайта

Пример таблицы с атрибутом colspan в ячейках

 
This is my first table cell, which spans two columns.
This is my first table cell in the second row. And this is the second table cell in the second row.

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

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

 
This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is the first table cell in the second column.
And this is the second table cell in the second table row.
Использование атрибутов colspan и rowspan предоставляет прекрасные возможности для размещения объектов на Web-странице, в частности разрешает верстку в несколько колонок.

Cовет

Попробуйте вставить в таблицу графику с помощью тега <img src>. Именно так постороены макеты большинства Web-страниц.

Например:
This is the first table cell in the second column.
And this is the second table cell in the second table row.

Иногда вам надо оставить какую-либо ячейку таблицу пустой. Не следует использовать в этом случае комбинацию: 

<td></td>

К сожалению, многие броузеры «чудят» с пустыми ячеками. Поэтому, для создания пустой ячейки воспользуйтесь специальным зарезервированным символом неhазрывного пустого пространства &nbsp (подробнее — см.здесь), а именно:

<td>&nbsp;</td>

Да, мы чуть не забыли о таких важных элементах создания таблицы, как заголовок таблицы — тег <caption> и тег и заголовков столбцов таблицы <th>. Например,

Краткий список зарезервированных символов
Наименование Значение Пример
Меньше чем &lt; <
Больше чем &gt; >
Амперсанд &amp; &
неразрывный пробел &nbsp;  
кавычки &quot; «

Это записано в HTML-документе так:


 <CENTER>
<TABLE cellSpacing=1 cellPadding=8>
<caption align="top"><b>Краткий список зарезервированных символов</b>
</caption> 
  <TBODY>
  <TR align=middle>
    <TH>Наименование</TH>
    <TH>Значение</TH>
    <TH>Пример</TH></TR>
  <TR align=middle>
    <TD>Меньше чем</TD>
    <TD>&lt;</TD>
    <TD><</TD></TR>
  <TR align=middle>
    <TD>Больше чем</TD>
    <TD>&gt;</TD>
    <TD>></TD></TR>
  <TR align=middleм
    <TD>Амперсанд</TD>
    <TD>&amp;</TD>
    <TD>&</TD></TR>
  <TR align=middle>
    <TD>неразрывный пробел</TD>
    <TD>&nbsp;</TD>
    <TD> </TD></TR>
     <TR align=middle>
    <TD>кавычки</TD>
    <TD>&quot;</TD>
    <TD>"</TD></TR></TBODY></TABLE></CENTER>

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

<td>&nbsp;</td>

для создания пустой ячейки таблицы?

Атрибут тега <caption >align=»top» означает, что заголовок надо поместить до («вверху») таблицы. Другое значение атрибута align=bottom. Тогда заголовок будет располагаться под таблицей.
Удобно, не правда ли? Допустимыми значениями являются также left, right.

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

table {
  margin-left: -4%;
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }
Краткий список зарезервированных символов
Наименование Значение Пример
Меньше чем &lt; <
Больше чем &gt; >
Амперсанд &amp; &
неразрывный пробел &nbsp;  
кавычки &quot; «

В данном случае использован встроенный стиль CSS. Это трудоемко и нерационально. Так делать не надо!
Лучше воспользоваться внедренным стилем. Например, он используется для таблиц на странице Форматирование текста.
Либо воспользоваться связанными таблицами стилей.

Если вы не хотите воспользоваться таким мощным инструментом, как каскадные таблицы стилей, то в вашем распоряжении имеется такое простое средство как атрибут bgcolor в тегах <td> и <th>.
Это «работает» практически во всех броузерах и не зависит от того, поддерживает ли броузер пользователя работу с CSS. Как задаются шестнадцатиричные коды для цветов подробно описано в документе Форматирование текста

Краткий список зарезервированных символов
Наименование Значение Пример
Меньше чем &lt; <
Больше чем &gt; >
Амперсанд &amp; &
неразрывный пробел &nbsp;  
кавычки &quot; «

Это записано в HTML-документе так:


 <CENTER>
<TABLE cellSpacing=1 cellPadding=8>
<caption align="top"><b>Краткий список зарезервированных символов</b>
</caption> 
  <TBODY>
  <TR align=middle>
    <TH bgcolor="#CCCC99">Наименование</TH>
    <TH bgcolor="#CCCC99">Значение</TH>
    <TH bgcolor="#CCCC99">Пример</TH></TR>
  <TR align=middle>
    <TD bgcolor="#FFFF66">Меньше чем</TD>
    <TD bgcolor="#FFFF66">&lt;</TD>
    <TD bgcolor="#FFFF66"><</TD></TR>
  <TR align=middle>
    <TD bgcolor="#FFFF66">Больше чем</TD>
    <TD bgcolor="#FFFF66">&gt;</TD>
    <TD bgcolor="#FFFF66">></TD></TR>
  <TR align=middleм
    <TD bgcolor="#FFFF66">Амперсанд</TD>
    <TD bgcolor="#FFFF66">&amp;</TD>
    <TD bgcolor="#FFFF66">&</TD></TR>
  <TR align=middle>
    <TD bgcolor="#FFFF66">неразрывный пробел</TD>
    <TD bgcolor="#FFFF66">&nbsp;</TD>
    <TD bgcolor="#FFFF66"> </TD></TR>
     <TR align=middle>
    <TD bgcolor="#FFFF66">кавычки</TD>
    <TD bgcolor="#FFFF66">&quot;</TD>
    <TD bgcolor="#FFFF66">"</TD></TR></TBODY></TABLE></CENTER>

 
Возврат в начало страницы    Возврат на главную страницу сайта

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

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

Определение дизайна рамок таблицы
(использование атрибута frame тега table)
Пример использование атрибута frame тега table

А вы посетили выставку Клода Моне в Эрмитаже?

 
Возврат в начало страницы    Возврат на главную страницу сайта  
 

Хостинг от uCoz

Какие атрибуты использовались при создании данной таблицы.

Атрибуты тега TABLE, бордюры, размеры и другие

По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и центрируется в горизонтальном направлении.

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

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

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

имеет единственный допустимый параметр ALIGN, принимающий значения ТОР (заголовок над таблицей) или BOTTOM (заголовок под таблицей). Параметр ALIGN может быть опущен, что соответствует значению ALIGN=TOP. В горизонтальном направлении заголовок таблицы всегда располагается по ее центру. Таблица может не иметь заголовка. В качестве заголовка таблицы в большинстве случаев используется простой текст, что регламентируется спецификацией HTML, однако в действительности между тэгами и допустимо записывать любые HTML-элементы, употребляемые в разделе . Приведем пример записи заголовка таблицы:Заголовок, располагаемый внизу тaблицы

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


Рис. 4.4. Таблица с заголовком

Браузер Microsoft Internet Explorer предоставляет дополнительные возможности для выбора расположения заголовка. Параметр ALIGN допускает значения LEFT, CENTER и RIGHT для горизонтального выравнивания наряду с описанными выше значениями. Отметим, что это один из редких случаев, когда широко распространенный параметр ALIGN может использоваться и для горизонтального выравнивания, и для вертикального. Например, запись ALIGN=RIGHT обеспечит расположение заголовка, прижатого к правой стороне и размещенного над таблицей. Если записать ALIGN=BOTTOM, то так же, как и в приведенном выше примере, заголовок будет расположен под таблицей. Однако двойное использование в одном заголовке параметра ALIGN недопустимо. Поэтому дополнительно введен специальный параметр для вертикального выравнивания — VALIGN, принимающий значения ТОР или BOTTOM. Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, описание имеет следующий вид:

Заголовок, располагаемый внизу с выравниванием влево

Таблица с данным описанием заголовка в Microsoft Internet Explorer будет отображена следующим образом (рис. 4.5). Если данный пример просматривать в Netscape, то заголовок будет размещен по умолчанию, т. е. над таблицей и посередине в горизонтальном направлении.


Рис. 4.5. Горизонтальное выравнивание заголовка таблицы браузером Microsoft Internet Explorer

Возможности горизонтального выравнивания заголовка таблицы являются расширением спецификации HTML, не поддерживаются браузером Netscape Navigator, и поэтому ими следует пользоваться только в крайней необходимости.

Параметры тега

Основным тэгом, применяемым при создании таблиц, является тег

. Он может использоваться с рядом параметров, каждый из которых допустимо опускать. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге
могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузеры NetScape иMicrosoft Internet Explorer разрешают кроме перечисленных пяти параметров использовать параметры HEIGHT и BGCOLOR. Отдельные браузеры позволяют также задавать и другие параметры. Рассмотрим назначение общеупотребительных параметров тега
.

Параметр BORDER

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

Для добавления в таблицу рамок необходимо включить в код

параметр BORDER, который может иметь численное значение.

Например,

или
.

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

Пример таблицы с рамкой толщиной 10 пикселов приведен на рис. 4.6.


Рис. 4.6. Таблица с рамкой толщиной 10 пикселов

В спецификации HTML 3. 0 не было включено значение для параметра BORDER. Это сделано лишь в HTML 3.2. Так, в частности, ранние версии Microsoft Internet Explorer не разрешали задания численного значения.

Отметим, что при отсутствии параметра BORDER рамки не прорисовываются, но место под них оставляется (это относится только к Netscape). Общий размер таблицы при отсутствии параметра BORDER или его наличии не изменяется (исключением является случай задания BORDER=0). Таким образом, минимальное расстояние между двумя соседними ячейками в этих случаях будет равно удвоенной толщине рамки, т. е. двум пикселам. Расположить ячейки как можно ближе друг к другу возможно заданием BORDER=0, что означает отсутствие рамок. Некоторые браузеры могут не поддерживать задание численного значения параметра BORDER, тогда значение, равное нулю, будет проигнорировано, и таблица будет прорисована с рамками.

Приведем несколько примеров:

Все три приведенных примера браузером Netscape будут отображены по-разному. Заметим, что здесь имеет место довольно уникальный случай, когда нельзя говорить о значении по умолчанию. Третий пример, в котором параметр BORDER опущен, отличается от любого примера, где этот параметр присутствует. Для Microsoft Internet Explorer второй и третий примеры идентичны, поэтому для этого браузера значение по умолчанию параметра BORDER равно нулю .

Параметр CELLSPACING

Форма записи параметра: CELLSPACING=num, где num — численное значение параметра в пикселах, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Заметим, что традиционно в издательских системах смежные ячейки таблицы имеют общую границу. В HTML-таблицах по умолчанию между ними оставляется место, что хорошо видно на приведенном выше рисунке (рис. 4.6). При задании CELLSPACING=0 рамки смежных ячеек сольются и создадут впечатление единой сетки таблицы (рис. 4.7).


Рис. 4.7. Таблица со значением CELLSPACING=0

Параметр CELLPADDING

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

На рис. 4.8 показан пример таблицы со значением CELLPADDING=10.


Рис. 4.8. Таблица со значением CELLPADDING=10

Действие параметров CELLPADDING и CELLSPACING очень похоже друг на друга. Для таблицы без рамок изменение того или другого параметра приводит к одному и тому же результату. Оба параметра влияют на соответствующие отступы одновременно по горизонтали и по вертикали. К сожалению, раздельного управления горизонтальными и вертикальными отступами так, как это сделано, например, для отступов от изображений (параметры HSPACE и VSPACE тега ), не предусмотрено.

Все три параметра — BORDER, CELLPADDING и CELLSPACING действуют независимо друг от друга, если какой-нибудь из них опущен, то берется его значение, принятое по умолчанию. В частности, если опущены все перечисленные параметры, то минимальное расстояние между данными из смежных ячеек будет равно 6 пикселам (для Netscape). Это значение складывается из двух пикселов для CELLSPACING, одного пиксела для CELLPADDING и одного пиксела для рамки каждой из ячеек. Наиболее компактная таблица будет получена заданием следующего описания:

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

Параметры WIDTH и HEIGHT

При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде — расположить таблицу так, чтобы она помещалась и окне просмотра. Общая схема просмотра больших документов, как правило, сводится к линейной прокрутке содержимого документа по вертикали и чтении текста, перемежаемого различными таблицами, изображениями и т. п. Это относится как к HTML-документам, так и к обычным документам, создаваемым в любых текстовых редакторах. Большинство как текстовых редакторов (например, Microsoft Word), так и HTML-браузеров автоматически форматируют текст так (если возможно), чтобы длина строк не превосходила ширину окна просмотра. Это позволяет избежать необходимости горизонтальной прокрутки документа. Аналогичные действия предпринимаются браузерами с таблицами — по возможности форматировать их таким образом, чтобы ширина таблицы не превосходила ширины окна просмотра. Можно сделать вывод, что ширина таблиц является более важным, первостепенным параметром, расчет которого выполняется в первую очередь по сравнению с высотой.

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

. Форма записи: WIDTH=num или WIDTH=num%, где num — численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна. Заметим, что допустимо задавать значения, большие 100%, хотя трудно представить себе случай, где это необходимо. Пример:
.

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

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

Параметр ALIGN

Данный параметр тега

определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения — LEFT (выравнивание влево) и RIGHT (выравнивание вправо). По умолчанию таблицы выровнены по левому краю. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания — CENTER. В некоторых источниках по языку HTML значение CENTER (по центру) приводится в качестве допустимого в данном случае. Это соответствует спецификации HTML, но на практике и Netscape Navigator, и Microsoft Internet Explorer реализуют только два значения. Дело в том, что присутствие параметра ALIGN в тэге
не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы текстом с двух сторон не предусматривается ни в каких случаях. Для более точного управления обтеканием следует использовать тег
с параметром CLEAR так же, как это выполняется для . Если параметр ALIGN опущен, то место справа и/или слева от таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то можно добиться ее расположения по центру окна просмотра. Для этого, например, можно все описание таблицы поместить внутри пары тегов
и
.

Приведем пример таблицы с обтекающим текстом, отображение которой показано на рис. 4.9.

Таблица с обтекающим ее тeкстом


    взрослого

    населения Санкт-ПетербургаН3>

  • Абрам
  • Александр
  • Алексей
  • Альберт
  • Анатолий
  • Андрей
  • Аркадий
  • Борис
  • Вадим
  • Валентин
  • Валерий
  • Василий
  • Виктор
  • Виталий
  • Владимир
  • Владислав
  • Вячеслав
  • Геннадий
  • Георгий
  • Герман
  • Григорий
  • Дмитрий
  • Евгений
  • Ефим
  • Иван
  • Игорь
  • Ил ья
  • Иосиф
  • Константин
  • Лев
  • Леонид
  • Михаил
  • Николай
  • Олег
  • Павел
  • Петр
  • Роман
  • Семен
  • Сергей
  • Станислав
  • Эдуард
  • Юрий
  • Яков


    • Указанные 43 наиболее часто встречаемых имени охватывают 92% выборки.

    Рис. 4.9. Таблица без рамок с обтекающим текстом

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

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

      Неверное решение.

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

      Таблица без обтекающего текста

        Наиболее употребительные мужские имена


        взрослого населения Санкт-ПетербургаН3>

      • Абрам
      • Александр
      • Алексей
      • Альберт
      • Анатолий
      • Андрей
      • Аркадий
      • Борис
      • Вадим
      • Валентин
      • Валерий
      • Василий
      • Виктор
      • Виталий
      • Владимир
      • Владислав
      • Вячеслав
      • Геннадий
      • Георгий
      • Герман
      • Григорий
      • Дмитрий
      • Евгений
      • Ефим
      • Иван
      • Игорь
      • Илья
      • Иocиф
      • Константин
      • Лев
      • Леонид
      • Михаил
      • Hикoлaй
      • Олег
      • Павел
      • Петр
      • Роман
      • Семен
      • Сергей
      • Станислав
      • Эдуард
      • Юрий
      • Яков

        • Приведенные данные получены на основе анализа репрезентативной выборки, содержащей сведения о 5000 мужчин в возрасте старше 18 лет, проживающих в Санкт-Петербурге.
        Указанные 43 наиболее часто встречаемых имениохватывают 92% выборки.
        Частота встречаемости каждого из остальных имен не превосходит 0.3%

        Рис. 4.10. Таблица без рамок, содержащая три столбца

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

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

      Форматирование данных внутри таблицы

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

      , в том числе тэги, управляющие расположением текста —

      ,
      ,

      , коды заголовков — от

      Таблицы | Основы верстки контента

      Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

      Таблицы — страшный сон верстальщика. Они громоздкие в своей верстке и в них очень легко запутаться. Важно «набить руку» и вы сможете достаточно быстро и без боли верстать даже самые сложные варианты таблиц.

      Базовая верстка таблиц

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

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

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

      Для создания строки используется тег <tr>. Количество строк и регулируется количеством этих тегов внутри <table>. Попробуем создать три строки:

      <table>
  <tr></tr>
  <!-- строка 1 -->
  <tr></tr>
  <!-- строка 2 -->
  <tr></tr>
  <!-- строка 3 -->
</table>

      Сейчас эта разметка почти ничего не сообщает браузеру. Если вставить текст в тегах <tr>, то браузер посчитает такой код неверным и постарается обработать его самостоятельно. Например, некоторые браузеры автоматически «вытащат» весь этот текст и переместят его за пределы тега <table>.

      Для добавления данных нужны колонки. Их можно добавить с помощью тега <td>. Количество колонок вы так же регулируете самостоятельно. Сколько тегов <td>, столько колонок в таблице и будет.

      Важно: количество колонок должно совпадать в каждой строке. Если количество колонок будет не совпадать, то таблица может банально «сломаться». Следите за этим.

      <table>
  <tr>
    <td>Строка 1. Колонка 1.</td>
    <td>Строка 1. Колонка 2.</td>
    <td>Строка 1. Колонка 3.</td>
  </tr>
  <tr>
    <td>Строка 2. Колонка 1.</td>
    <td>Строка 2. Колонка 2.</td>
    <td>Строка 2.  Колонка 3.</td>
  </tr>
  <tr>
    <td>Строка 3. Колонка 1.</td>
    <td>Строка 3. Колонка 2.</td>
    <td>Строка 3. Колонка 3.</td>
  </tr>
</table>

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

      1. Указать атрибут border для тега <table>. Это сразу установит все возможные границы, как для строк, так и для столбцов. Данный метод считается устаревшим и не рекомендуется к использованию.
      2. Использовать свойство border для необходимых тегов.

      Лучший вариант — использование CSS. Так вы будете хранить стили в одном месте, и не будет нужды вспоминать об атрибутах.

      table,
td {
  border: 1px solid #000;
}

      Главная неприятность — возникновение двойных границ. Это может быть дизайнерской «фишкой», но чаще всего такое не требуется. Нужно «схлопнуть» отступы и для этого используется свойство border-collapse со значением collapse. Для возвращения в исходное состояние используется значение separate.

      Выравнивание контента по вертикали

      Помимо знакомого вам свойства text-align, таблицы позволяют выравнивать контент по вертикали. Это простая операция, которая постоянно использовалась во времена табличной верстки. Главное, не пытайтесь найти такие макеты. Выровнять по вертикали можно любой контент, будь то просто текст или какой-то блок.

      Для выравнивания по вертикали используется свойство vertical-align, которое принимает одно из четырех значений:

      • baseline — выравнивание по базовой линии шрифта. Подробнее с таким выравниванием и его принципами вы познакомитесь в курсе CSS: Flex.
      • top — выравнивание по верхнему краю ячейки.
      • middle — выравнивание по центру. Стандартное поведение для контента внутри ячеек.
      • bottom — выравнивание по нижнему краю ячейки.

      Заголовки таблицы

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

      Создать секцию с заголовками можно с помощью тега <thead>. Строки и ячейки внутри такой обертки будут являться заголовками колонок нашей таблицы. Есть и еще небольшое изменение: вместо тега <td> внутри шапки используется тег <th>. Это, помимо семантической нагрузки, позволяет проще определять стили.

      Хорошей практикой является добавление тега <tbody> для основного контента. Если этого не сделать, то браузер подставит его сам, но лучше доверять собственной разметке, чем работе браузера.

      В качестве заголовка самой таблицы используется текст, обрамленный в тег <caption>. По умолчанию он располагается вверху всей таблицы, вне зависимости от того, где вы расположите тег. Это поведение можно контролировать с помощью свойства caption-side. Оно принимает одно из двух значений:

      • top — позиция по умолчанию. Заголовок располагается до таблицы.
      • bottom — расположение заголовка после таблицы.

      Пример таблицы с использованием новых тегов и свойств:

      <table>
  <caption>
    Профессии
  </caption>
  <thead>
    <tr>
      <th>№</th>
      <th>Название профессии</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Фронтенд-программист</td>
      <td>
        JavaScript — язык программирования фронтенд-разработки. С его помощью
        программисты делают сайты динамичными и «живыми». Самый востребованный и
        наиболее простой язык для новичков.
      </td>
    </tr>
  </tbody>
</table>

      html {
  font-family: sans-serif;
}
table {
  color: #212529;
  border-collapse: collapse;
}
td,
th {
  padding: 0. 75rem;
  border-top: 1px solid #dee2e6;
}
th {
  border-bottom: 2px solid #dee2e6;
}
caption {
  margin-top: 25px;
  font-size: 0.7em;
  text-align: right;
  caption-side: bottom;
}

      Объединение строк и столбцов

      Не все таблицы имеют простую структуру из ровных столбцов и строк. Объединение нескольких строк или столбцов — распространенная практика при верстке таблиц. Рассмотрим базовые правила на примере табеля выплаты зарплаты сотрудников.

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

      Создадим базовый каркас всей таблицы, без объединения строк или столбцов:

      <table>
  <thead>
    <tr>
      <th>Сотрудник</th>
      <th>Зарплата</th>
      <th>Бонусы</th>
      <th>Менеджер</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Алексей Примадонин</td>
      <td>750$</td>
      <td>63$</td>
      <td>Кодовенок Хекслетович</td>
    </tr>
    <tr>
      <td>Вениамин Редакторович</td>
      <td>1200$</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <td>Джедай Падаванов</td>
      <td>500$</td>
      <td>100$</td>
      <td>Королева Верстальщина</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td>Всего: 2613$</td>
    </tr>
  </tbody>
</table>

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

      В HTML для этой операции существуют два атрибута:

      • colspan — объединение столбцов.
      • rowspan — объединения строк.

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

      • <td colspan="3"> — ячейка должна занять пространство трех столбцов.
      • <td rowspan="2"> — ячейка должна занять пространство в две строки.

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

      Попробуем объединить данные о менеджере первых двух сотрудников. Для этого нужно у ячейки с нужным менеджером установить атрибут rowspan со значением 2. Обязательно нужно удалить последнюю ячейку в строке ниже.

      <tr>
  <td>Алексей Примадонин</td>
  <td>750$</td>
  <td>63$</td>
  <td rowspan="2">Кодовенок Хекслетович</td>
</tr>
<tr>
  <!-- В этой строке теперь только три столбца -->
  <td>Вениамин Редакторович</td>
  <td>1200$</td>
  <td>0</td>
</tr>

      Проделаем то же самое для последней строки, только теперь нужно объединить столбцы. Для этого используем атрибут colspan со значением 4.

      <tr>
  <!-- В этой строке всего один столбец, который растянется на 4 -->
  <td colspan="4">Всего: 2613$</td>
</tr>

      Итоговый вид таблиц:

      <table>
  <thead>
    <tr>
      <th>Сотрудник</th>
      <th>Зарплата</th>
      <th>Бонусы</th>
      <th>Менеджер</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Алексей Примадонин</td>
      <td>750$</td>
      <td>63$</td>
      <td rowspan="2">Кодовенок Хекслетович</td>
    </tr>
    <tr>
      <td>Вениамин Редакторович</td>
      <td>1200$</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Джедай Падаванов</td>
      <td>500$</td>
      <td>100$</td>
      <td>Королева Верстальщина</td>
    </tr>
    <tr>
      <td colspan="4">Всего: 2613$</td>
    </tr>
  </tbody>
</table>

      Создание таблицы в HTML документе.

      В этом уроке мы переходим к новой теме и будем учится создавать таблицы. Часто бывает, что на веб–странице нужно представить некие табличные данные, для этого нужен специальный инструмент, которым и является тег <table> </table >. Данный тег как раз и предназначен для создания таблиц на веб – страницах.

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

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

      С развитием веб–технологий этот метод становился все менее популярен, так как используя таблицы для каркаса сайта получался слишком большой код, в котором было сложно потом разобраться. Ну конечно же такие сайты медленно загружались так как браузеру нужно было просчитать все размеры таблиц. Таким образом такая ситуация ни кого не устраивала и на смену приходила новая технология CSS которая со временем стала, поддерживается всеми браузерами. Это стало гораздо удобней и быстрей, поэтому от таблиц отказались и ими пользуются только когда нужно представить какие-то табличные данные.

      Не смотря на отказ от таблиц для построения сайтов, таблицами все же нужно уметь пользоваться, так как они все равно частенько встречаются на сайтах. И так, ниже создадим таблицу с помощью тега <table>. Это парный тег и он должен иметь обязательно закрывающийся тег </table >. Рассмотрим для примера такую таблицу:

      Для создания таблицы одного тега <table> </table > мало, поэтому существуют вспомогательные теги, которые создают сроки и столбцы таблицы.

      1. Строки создаются с помощью тега <tr> сокращенно от английского table rows (строка таблицы). Этот тег также является парным и имеет закрывающийся тег </tr>. Что делать с этим тегом? Данный тег проставляется ровно столько раз, сколько наша таблица имеет строк. На картинке выше видно, что таблица имеет пять строк, поэтому и создаем пять сторок <tr> </tr>.

      HTML

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>

      </body> </html>

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

      2. В таблице бывают два вида ячеек: это ячейки для заголовков, в таблице на картинке они выделены жирным, и обычные ячейки для хранения данных имеющие простой вид. Ячейки для заголовков создаются с помощью тега <th> сокращенно от английского table header — табличный заголовок. Данный тег является парным тегом и всегда должен иметь закрывающей тег </th>. Таким образом, из примера с картинки, у нас восемь ячеек, поэтому создаем восемь таких парных тегов и сразу заполним их содержимым, чтобы не запутаться, иначе дальше будет каша.

      HTML

      датавремяпродектместоденьги
      В итоге что получилось: на примере, где ячейки (Жиры, Белки, углеводы) объединены в одну ячейку, в коде у нас осталось свободных целых три ячейки. Чтобы объединить три ячейки таблицы в одну используется атрибут colspan=»3″ где значение атрибута показывает сколько ячеек мы будем объединять. Данный атрибут вставляется в ПЕРВЫЙ тег той ячейки, которая будет объединять последующие 2 ячейки, это и будет означать объединение ячейки по горизонтали. Последующие две лишние ячейки <th> </th> мы удаляем. В итоге у нас должен получиться следующий результат.
      HTML
      датавремяпродектместожиры, белки, углеводыденьги
      Объединение ячеек в таблицах встречаются достаточно часто, а мы переходим к следующей строке. Здесь ячейки уже идут обычные для хранения данных, и создаются они с помощью тегов <td> сокращение с английского от table data — табличные данные. Создаем мы так же восемь ячеек как в примере, то есть восемь парных тегов <td> </td>. Заполним их данными из таблицы.
      HTML
      датавремяпродектместожиры, белки, углеводыденьги
      12.12.201119.00КефирМосква13530
      13. 12.201119.00МолокоСамара13570
      14.12.201119.00СокУфа13580
      14.12.201111.00ЙогуртВладимир36530
      Вот мы и создали нашу таблицу, но она немного отличается от той, что на картинке в примере выше. На ней имеется вертикальное объединение ячеек где указана дата 14.12.2011.
      Объединяется первая ячейка четвертой строки с первой ячейкой пятой строки. Как такое объединение делается? Как и с горизонтальным объединением находим первую ячейку для объединения и прописываем атрибут rowspan=»2″ где значение атрибута указывает, что будем объединять 2 вертикальные ячейки, себя и следующею за ней. Ниже идущий тег <td> </td> за ней удаляем.
И что бы у нашей таблицы появились границы, используется еще один атрибут border=»1″, он создаст рамку для таблицы. В и тоге получаем вот такой результат:
      HTML
      датавремяпродектместожиры, белки, углеводыденьги
      12.12.201119.00КефирМосква13530
      13.12.201119.00МолокоСамара13570
      14.12.201119.00СокУфа13580
      11.00ЙогуртВладимир36530
      В целом таблица уже готова. Все, что касается внешнего вида, исправляется с помощью CSS, но об этом немного позже. На этом мы остановимся, а в следующем уроке мы рассмотрим остальные атрибуты, которые нужно знать для создания таблиц.
      
<<< Предыдущий материал
      
Следующий материал >>> 

      Просмотреть демо: Демо
      Скачать исходник: Скачать
      Тест ответы — Стр 2
      Вопрос
№33 (ID — 259) Тип: Закрытая форма: верен только один
вариант из всех
      Какие
атрибуты тега <IMG> заданы для отображения следующего
рисунка:
      Бабочка
крапивница зимовала в стогу. Солнце
нагрело стог, и заструилось от него
тепло. К теплу, на припек, и выползла
неловкая и сонная бабочка…
      Крапивница
отогрелась и затрепетала от
нетерпения. Качнулся ветерок, она
вспорхнула и понеслась.
        
      «Теплая
струйка»
Н.Сладко
        
      Варианты
ответов:
      <img
src=»but.gif» align=»left» border=1 alt=»»>
      <img
src=»but.gif» align=»middle» border=0 alt=»Бабочка»>
      <img
src=»but. gif» align=»right» border=1 alt=»Бабочка»>
      <img
src=»but.gif» align=»bottom» border=0 alt=»»>
      <img
src=»but.gif» align=»right» border=0 alt=»Бабочка»>
      <img
src=»but.gif» align=»middle» border=1 alt=»»>
      Вопрос
№34 (ID — 260) Тип: Закрытая форма: верен только один
вариант из всех
      Какие
атрибуты тега <IMG> заданы для отображения следующего
рисунка:
      Бабочка
крапивница зимовала в стогу. Солнце
нагрело стог, и заструилось от него
тепло. К теплу, на припек, и выползла
неловкая и сонная бабочка…
Крапивница
отогрелась и затрепетала от
нетерпения. Качнулся ветерок, она
вспорхнула и понеслась.
        
      «Теплая
струйка»
Н.Сладко
        
      Варианты
ответов:
      <img
src=»but.gif» align=»left» border=5 alt=»Бабочка
крапивница«>
      <img
src=»but.gif» align=»middle» border=1 alt=»Бабочка»>
      <img
src=»but. gif» align=»right» border=5 alt=»Бабочка»>
      <img
src=»but.gif» align=»bottom» border=1 alt=»»>
      <img
src=»but.gif» align=»left» border=0 alt=»Бабочка»>
      <img
src=»but.gif» align=»middle» border=5 alt=»Бабочка
крапивница»>
      Вопрос
№35 (ID — 261) Тип: Открытая форма: безвариантный тип
вопроса
      Каким
тегом задается таблица в HTML-документе? (без символов «<>»)
      Правильные
ответы:(через
запятую): table
      Вопрос
№36 (ID — 262) Тип: Открытая форма: безвариантный тип
вопроса
      Каким
тегом задается строка таблицы в HTML-документе? (без символов «<>»)
      Правильные
ответы:(через
запятую): tr
      Вопрос
№37 (ID — 263) Тип: Открытая форма: безвариантный тип
вопроса
      Каким
тегом задается ячейка(столбец)
таблицы в HTML-документе? (без символов «<>»)
      Правильные
ответы:(через
запятую): td
      Вопрос
№38 (ID — 264) Тип: Закрытая форма: верен только один
вариант из всех
      Какой
HTML-код создает следующую таблицу:
      1
      2
      3
      4
      Варианты
ответов:
      <TABLE border=1>
<TBODY>
<TR bgColor=yellow>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD bgColor=aqua>3</TD>
<TD>4</TD>
</TR>
</TBODY>
</TABLE>
      <TABLE border=3>
<TBODY>
<TR>
<TD bgColor=yellow>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD bgColor=aqua>3</TD>
<TD>4</TD>
</TR>
</TBODY>
</TABLE>
      <TABLE border=1>
<TBODY>
<TR>
<TD bgColor=yellow>1</TD>
<TD bgColor=yellow>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD bgColor=aqua>4</TD>
</TR>
</TBODY>
</TABLE>
      <TABLE border=1>
<TBODY>
<TR>
<TD>1</TD>
<TD bgColor=yellow>2</TD>
</TR>
<TR bgColor=aqua>
<TD>3</TD>
<TD>4</TD>
</TR>
</TBODY>
</TABLE>
      Вопрос
№39 (ID — 265) Тип: Закрытая форма: верен только один
вариант из всех
      Какой
HTML-код создает следующую таблицу:
      1
      2
      3
      4
      Варианты
ответов:
      <TABLE border=1>
<TBODY>
<TR>
<TD bgColor=aqua
colSpan=2>1</TD>
</TR>
<TR>
<TD rowSpan=2>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
</TR>
</TR>
</TBODY>
</TABLE>
      <TABLE border=1>
<TBODY>
<TR bgColor=aqua
colSpan=2>
<TD>1</TD>
</TR>
<TR rowSpan=2>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
</TR>
</TR>
</TBODY>
</TABLE>
      <TABLE border=1>
<TBODY>
<TR colSpan=2>
<TD bgColor=aqua>1</TD>
</TR>
<TR>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD rowSpan=2>4</TD>
</TR>
</TR>
</TBODY>
</TABLE>
      Вопрос
№40 (ID — 266) Тип: Закрытая форма: верно несколько
вариантов из всех
      Отметьте
верные для HTML-таблиц высказывания:
      Варианты
ответов:
      Существует
атрибут для задания ширины таблицы
      Тег <TH> определяет заголовок для столбца
в таблице
      Тег <TD> определяет строку в таблице
      Таблица
на HTML задается по строкам
      Таблица
на HTML задается по столбцам
      Внутри
ячейки таблицы нельзя задать
другую таблицу
      Вопрос
№41 (ID — 267) Тип: Закрытая форма: верно несколько
вариантов из всех
      Отметьте ложные
для HTML-таблиц высказывания:
      Варианты
ответов:
      Тег <TH> задает строку таблицы
      Тег <TD> задает ячейку таблицы
      Таблицу
можно выровнять по горизонтали
      Можно
задать фоновый рисунок для отдельной
ячейки таблицы
      Нельзя задать
абсолютную высоту таблицы
      Вопрос
№42 (ID — 268) Тип: Закрытая форма: верен только один
вариант из всех
      C
помощью какого тега можно осуществить
принудительный перевод строки?
      Варианты
ответов:
      <HR>
      <BR>
      <P>
      <AREA>
      <DIV>
      Вопрос
№43 (ID — 269) Тип: Закрытая форма: верен только один
вариант из всех
      Что
делает тег <S>. ..</S>?
      Варианты
ответов:
      выводит
перечеркнутый текст
      выводит
подчеркнутый текст
      выводит
жирный текст
      выводит наклонный
текст (курсив)
      Вопрос
№44 (ID — 270) Тип: Закрытая форма: верен только один
вариант из всех
      Что
делает тег <TH>. ..</TH>?
      Варианты
ответов:
      группирует
строку (или строки) таблицы в нижний
колонтитул таблицы
      группирует
строку (или строки) таблицы в заголовок
таблицы
      определяет
ячейку таблицы как информационную,
т.е. заглавную
      Вопрос
№45 (ID — 271) Тип: Закрытая форма: верен только один
вариант из всех
      Чем
отличается Gif формат
от Jpeg?
      Варианты
ответов:
      тем,
что Gif содержит всю гамму цветов, а
Jpeg только 256
      тем,
что Gif содержит всего 256 цветов, а
Jpeg всю гамму цветов
      ничем,
так как это одно и тоже
      Вопрос
№46 (ID — 272) Тип: Закрытая форма: верен только один
вариант из всех
      Из
каких основных частей состоит
динамический HTML?
      Варианты
ответов:
      непосредственно
HTML, каскадных таблиц стилей (CSS) и
языков сценариев
      JavaScript,
VBScript и просто JAVA
      непосредственно
HTML, JavaScript и VBScript
      Вопрос
№47 (ID — 273) Тип: Закрытая форма: верен только один
вариант из всех
      Какой тег
выводит текст курсивом?
      Варианты
ответов:
      <I>. ..</I>
      <B>…</B>
      <Q>…</Q>
      <S>…</S>
      <U>…</U>
      Вопрос
№48 (ID — 274) Тип: Закрытая форма: верен только один
вариант из всех
      Существует
ли у тега <A>…</A> атрибут onfocus?
      Варианты
ответов:
      да
      нет
      в
исключительных случаях
      Вопрос
№49 (ID — 275) Тип: Закрытая форма: верен только один
вариант из всех
      Какой
из перечисленных тегов определяет
название страницы?
      Варианты
ответов:
      <HEAD>Название
страницы. </HEAD>
      <TITLE>Название
страницы.</TITLE>
      <HTML>Название
страницы.</HTML>
      Вопрос
№50 (ID — 276) Тип: Закрытая форма: верен только один
вариант из всех
      В
каком формате возможно создание
прозрачных изображений?
      Варианты
ответов:
      JPG
      GIF
      Вопрос
№51 (ID — 277) Тип: Закрытая форма: верен только один
вариант из всех
      Как
правильно задать e-mail ссылку?
      Варианты
ответов:
      <a
send=»some@where. ru»>
      <mail
to=»[email protected]»>
      <a
href=»mailto:[email protected]»>
      <a
send=»mail:[email protected]»>
      Вопрос
№52 (ID — 278) Тип: Закрытая форма: верен только один
вариант из всех
      Как
правильно задать цвет фона страницы?
      Варианты
ответов:
      <body
bgcolor=»#FFAA11″>
      <body
background=»red»>
      <body
color=»green»>
      Вопрос
№53 (ID — 279) Тип: Закрытая форма: верен только один
вариант из всех
      С
помощью какого набора тэгов можно
описать таблицу?
      Варианты
ответов:
      <table><tr><td>
      <table><head><tfoot>
      <thead><body><tr>
      <table><tr><tt>
      Вопрос
№54 (ID — 280) Тип: Закрытая форма: верен только один
вариант из всех
      Как
описать флажок (поле для галочки)?
      Варианты
ответов:
      <input
type=»checkbox»>
      <input
type=»check»>
      <check>
      <checkbox>
      Вопрос
№55 (ID — 281) Тип: Закрытая форма: верен только один
вариант из всех
      Как
задать область для ввода текста?
      Варианты
ответов:
      <input
type=»textfield»>
      <textinput
type=»text»>
      <input
type=»text»>
      <textfield>
      Вопрос
№56 (ID — 282) Тип: Закрытая форма: верен только один
вариант из всех
      С
помощью какого тега создается
выпадающий список?
      Варианты
ответов:
      <input
type=»list»>
      <list>
      <input
type=»dropdown»>
      <select>
      Вопрос
№57 (ID — 283) Тип: Закрытая форма: верен только один
вариант из всех
      Какой
тег используется для описания полей
ввода?
      Варианты
ответов:
      <form>
      <name>
      <type>
      <action>
      <input>
      Вопрос
№58 (ID — 286) Тип: Закрытая форма: верен только один
вариант из всех
      На
диске C: есть 2 папки: «c1»
и «c2«. В папке «c1»
находится файл “1.html”,
а в «c2»
— файл “2.html”.
Как указать относительный
адрес в гиперссылке со страницы «1.html»
на страницу «2.html«?
      Варианты
ответов:
      <A
HREF=»C:/С2/2.HTML»>
      <A
HREF=»../C2/2.HTML»>
      <A
HREF=»../C:/C2/2.HTML»>
      <A
HREF=»2.HTML»>
       Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
      • #
        27. 05.201550.18 Кб34Темы сочинений 2014.doc
      • #
        24.11.2019436.04 Кб0ТЕОРИЯ ЯЗЫКА. Методичка.rtf
      • #
        25.03.201691.65 Кб173Теория. ФУНКЦИОНАЛЬНЫЕ СТИЛИ. ОБЩАЯ ХАРАКТЕРИСТИКА.doc
      • #
        27.05.201528.2 Кб24Тест гОЛЛОНДА пО Определению типа личности.docx
      • #
        25.03.201652.11 Кб56Тест Кеттелла 16 PF.docx
      • #
        27.05.2015376.32 Кб155Тест ответы.docx
      • #
        23.12.201832.09 Кб6Тестовые методики для проверки готовности ребен….docx
      • #
        27.05.2015524.29 Кб27тесты возрастная сурдопедагогика.doc
      • #
        27.05.2015121.34 Кб51тесты общие осногвы сурдопедагогики.doc
      • #
        25.03.2016101.38 Кб36технологическая карта урока Виды глагола. doc
      • #
        14.08.201923.25 Кб0технология.конспект.docx
       Создание таблицы с использованием тега table и его атрибутов 
       Просмотр обсуждения
       Улучшить статью
       Сохранить статью
      •  Последнее обновление:
14 Дек, 2020
    •  Читать
    •  Обсудить
      •  Посмотреть обсуждение
       Улучшить статью
       Сохранить статью
       В этой статье мы создадим таблицу с помощью HTML. Чтобы создать эту таблицу, мы должны знать теги, необходимые для создания таблицы. Сначала мы создадим структуру таблицы и будем использовать атрибуты для оформления таблицы.
        Подход:  Чтобы создать таблицу, мы должны использовать тег
      , и мы будем использовать атрибуты тега
       для оформления таблицы. The attributes that we will use to design the table are: cellspacing, cellpadding, border, bg color, etc.
        Example: 
         
        <   html   > 
            
       <  Body   BGColor   =   "Pink"  > 
          <    BGCOLOR 999999900440404040404040404040404040404040404040404040404040404040404040404040404040404040404039 ""  ""  ""  ""  ""  ". 
          Граница   =   "5"   сотовой связи   =   "5" 
          "
         " 
          
          
          
          
          "=   "5"   > 
                    
                   <   tr   bgcolor   =   "purple"   > 
                       <   caption   align   =   "Топ"  > 
          <  H3   Стиль   =   "Цвет: #FF3300;   > 
                               Train 
                             h3   > 
                         caption   > 
            
                       <   th   bgcolor   =   "пурпурный"   >номер поезда  th   > 
                       <   th   bgcolor   =   "magenta"   >departure  th   > 
                       <   th   bgcolor   =   "пурпурный"   >прибытие  th   > 
                       <
       bg   0 th0040  =   "magenta"   >category  th   > 
                     tr   > 
                   <   tr   > 
          <  TD  > 12267   TD  > 
          <  TD     <  TD  . >23:25  td   > 
                       <   td   >05:15  td   > 
                       <   td   >duronto   TD  > 
            TR  > 
          <  TR  >   <  TR  > .0040
                       <   td   >12426  td   > 
                       <   td   >19:40  td   > 
          <  TD  > 05:05   TD  > 
          <  TD  > RAJDHANI  TD  >0040  td   > 
                     tr   > 
                   <   tr   > 
                       <   td   >12019  TD  > 
          <  TD  > 06:05   TD  > 
       0039                <   td   >13:15  td   > 
                       <   td   >shatabdi express  td   > 
                     TR  > 
            Таблица  > 
          Корпус  > 
        
          HTML  > 
        Выход:  9053
       SO, что использует Attributes Sate Tagts.
       
       Рекомендованные статьи
       Страница :
       Теги HTML-таблицы – Инженерно-технические услуги 
       Обзор 
       Этот тег также необходим для отображения информации в строках и столбцах на вашей странице. Он предназначен в первую очередь для отображения форматированных данных. Его также можно использовать для создания макета веб-страницы, но это использование постепенно прекращается в пользу использования каскадных таблиц стилей (CSS) для форматирования.
       Недостатком использования таблиц является сложность их использования и понимания. Использование редактора HTML чрезвычайно полезно при работе с таблицами. Тем не менее, понимание того, как устроены таблицы, поможет вам решить любые проблемы.
       Известно, что глубоко вложенные таблицы (таблицы внутри таблиц внутри таблиц и т. д.) вызывают проблемы с некоторыми браузерами, и их следует по возможности избегать.
       Все теги ниже требуют конечного тега, если не указано иное.
        
       Этот тег создает таблицу на веб-странице. Но без каких-либо дополнительных тегов для определения строк таблицы 
       и ячеек  и далее внутри него укладывается каждый кирпич 
       Пример второй строки: 

       Обратите внимание, что второй 
        
         на вашей странице ничего не появится. Таблица строится с использованием этих тегов так же, как вы строите кирпичную стену. Каждый ряд начинается со слоя цемента 
      .
      •   Атрибуты для тега  : 
        •   выравнивание  — Это может привести к выравниванию таблицы по левому, правому или центру окна браузера.
        •   background  — Этот атрибут указывает на расположение файла изображения, которое будет отображаться на фоне таблицы. Если размер изображения меньше, чем границы таблицы, изображение будет повторяться или «мозаично».
        •   цвет  - устанавливает цвет фона таблицы.
        •   граница  - определяет толщину внешних границ таблицы. Граница появится в трехмерном стиле, а таблица «поднимется» над страницей. По умолчанию 0.
        •   cellpadding  — это пустое пространство между границей ячейки таблицы и содержимым ячейки. Используйте это, чтобы создать пространство между текстом и границами таблицы.
        •   Cellspacing  - Изменяет толщину внутренних границ таблицы.
        •   ширина  — это изменяет ширину таблицы на указанное вами значение. Вы можете использовать либо фиксированное количество пикселей, либо процентное значение.
      •  Пример: 
        •   
         Это создаст таблицу, центрированную на странице, с фоном. взято из изображения gif под названием «bgrnd.gif», граница 3 пикселя, отступ внутри каждой ячейки 2 пикселя, расстояние между ячейками 3 пикселя и ширина 90% окна браузера.
          
         Этот тег создает «строку» в таблице. Вы поместите теги ячеек 
        . У вас будет тег  для каждой строки в вашей таблице, а в каждом теге  у вас будет набор тегов  тег: 
        •   align  — определяет, как выравнивается содержимое ячеек каждой строки. Варианты слева, справа и по центру. По умолчанию «центр».
        •   bgcolor  — это точно такой же атрибут «bgcolor» для тега 
         
            в каждый из тегов 
         
         
           для определения столбцов.
        •   Атрибуты для  
          
         выше, за исключением того, что он применяется только к конкретной строке, в которую помещен этот атрибут.
      •   valign  — определяет, как содержимое ячеек в этой строке выравнивается по вертикали. Возможные варианты: верхний, средний, нижний и базовый. По умолчанию «средний». Опция baseline выравнивает текст в ячейках строки.
      •  Пример: 
        •  Это создаст строку в таблице, в которой все содержимое будет выровнено по правому краю. Все ячейки строки будут иметь желтый фон, а содержимое будет отображаться в верхней части границы строки.
          
         пара тегов. Теги  в таблице должны содержать одинаковое количество тегов , каждый из которых содержит четыре тега  или 
         
           
         Это тег для ячеек данных таблицы, где вы фактически будете размещать содержимое, которое хотите в своей таблице. Эти теги должны быть размещены в пределах 
           определяют количество столбцов в таблице. Кроме того, если они не изменены атрибутом, все теги 
          . Таким образом, если вы хотите создать таблицу с тремя строками и четырьмя столбцами, таблица должна иметь три набора тегов 
          . Любые атрибуты, созданные для  9Тег 0040 переопределит любые идентичные атрибуты, созданные окружающими тегами 
         
        .
        •   Атрибуты для тега  
        a1
         
          : 
        •   align  — выравнивает содержимое тега 
        		 . Возможные варианты: по центру, слева, справа и по ширине. По умолчанию «слева». Justify сделает текст таким, чтобы он был выровнен как по правому, так и по левому краю ячейки.
      •   фон  — как и атрибут фона для тега  выше, за исключением того, что он применяется только к определенной ячейке таблицы.
      •   bgcolor  — аналогично тегам 
        •  
         и  выше, за исключением того, что применяется только к определенной ячейке таблицы.
      •   высота  - Определяет высоту ячейки либо с определенным числом в пикселях, либо в процентах от высоты таблицы.
      •   nowrap  - Это заставляет отображать ячейку таблицы как можно шире, чтобы отображать текст на как можно меньшем количестве строк. Пераметоров для nowrap нет.
      •   colspan  — вот здесь все становится сложнее. Этот атрибут говорит браузеру, что он предполагает, что эта ячейка охватывает более чем одну ячейку в таблице. Или, другими словами, colspan используется для создания многоколоночной ячейки. По умолчанию colspan, очевидно, равен 1. Сложность заключается в том, чтобы убедиться, что номера colspan идентичны для каждой строки таблицы. Если у вас есть четыре ячейки в одной строке таблицы, то вы можете иметь две ячейки в другой строке, если числа столбцов для этой строки ячеек равны четырем. Таким образом, в этой строке ячеек может быть одна ячейка с colspan 3, а другая со значением по умолчанию 1. Первая ячейка будет охватывать первые три столбца таблицы, а последняя ячейка будет соответствовать последнему или четвертому столбцу. См. дополнительную информацию ниже.
      •   rowspan  — это то же самое, что и «colspan» выше, за исключением того, что оно применяется к строке таблицы, а не к столбцу. Это количество строк, через которые текущая ячейка таблицы простирается вниз по таблице. Это число не должно превышать количество оставшихся 
        •  тегов в таблице. Другими словами, должно быть «место» для клетки, чтобы простираться вниз. Кроме того, во всех последующих строках после использования атрибута rowspan вам нужно на 9 меньше.0039 Тег
         
         
          . См. дополнительную информацию ниже.
      •   ширина  — определяет ширину конкретной ячейки таблицы либо числом в пикселях, либо процентом от ширины таблицы.
        •   
        		  
         Это тег ячейки заголовка таблицы. Он идентичен тегу 
        		  во всех отношениях, за исключением того, что любой текст, помещенный в тег  , автоматически выделяется жирным шрифтом и центрируется в большинстве браузеров. Обычно вы должны использовать это в первой строке для создания заголовков для ваших столбцов в таблице.
         Примеры colspan и rowspan 
         Вот таблица с тремя строками и четырьмя столбцами. Каждая строка в таблице будет выглядеть идентично первой строке (за исключением содержимого ячеек). 
         Пример первой строки: 
        a1a2a3a4
         
         а1 а2 а3 а4
         б1 б2 б3 б4
         с1 с2 с3 с4
         Вот та же таблица с ячейкой «a1», имеющей столбец 3. Обратите внимание, что ячейка покрывает то, что когда-то было ячейками «a2» и «a3», и теперь в первой всего две ячейки. строка. 
         Пример первой строки: 
        • a4
         
         a1 а4
         б1 б2 б3 б4
         с1 с2 с3 с4
         Вот предыдущая таблица с "c3" для столбца, равного 2. Обратите внимание, что столбец простирается справа, а не слева от "a1" и "c3"
         a1 а4
         б1 б2 б3 б4
         с1 с2 с3
         Вот исходная таблица с "a2" для диапазона строк, равного 2. Обратите внимание, что вторая или "b" строка выглядит идентично первой строке, но код сильно отличается. 
         Пример первой строки: 
         
      a1a2a3a4   
      b1b3b4
        
        (ячейка "b2") отсутствует в коде для второй строки. Его нужно удалить, потому что иначе во второй строке будет слишком много ячеек.
       а1 а2 а3 а4
       б1 б3 б4
       с1 с2 с3 с4
       Вот предыдущая таблица с удаленным вторым 
      		   не  во второй строке (и таким образом создавая ошибку в коде для таблицы). Обратите внимание, как смещается строка, а ячейка «b4» вытесняется в несуществующий столбец.
       а1 а2 а3 а4
       б1 б2 б3 б4
       с1 с2 с3 с4
       Вы также можете комбинировать colspan и rowspan. Ячейка "b2" этой таблицы имеет colspan 3 и rowspan 2.
       а1 а2 а3 а4
       б1 б2
       с1
       Тег таблицы HTML 4 
       Тег HTML 
       используется для определения таблицы. Тег table содержит другие теги, определяющие структуру таблицы.
       Элементы таблицы 
       Таблицы
       состоят из элемента 
       
      , а также других элементов, связанных с таблицами. Эти другие элементы вложены в теги 
       
      , чтобы определить, как создается таблица.
       Дочерние элементы элемента 
       
       должны быть в следующем порядке:
      1.  Ноль или единица 
       элементов
    •  Ноль или единица 
      •  элементов
    •  Ноль или один 
      •  элементов (но только если последний элемент в таблице не является элементом )
    •  Либо:
      •  Ноль или более 
      •  элементов или
    •  Один или несколько 
      •  элементов (они представляют строки таблицы)
    •  Ноль или один 
      •  элементов (но только если нет других  элементов в документе)
       Каждый элемент 
       представляет строку в таблице. Строка может иметь один или несколько элементов   
 
       Атрибуты 
         элементов
    •  Ноль или один 
      •      
       
        
         или  , которые определяют столбцы в таблице. В частности,   представляет данные таблицы, а   представляет заголовок таблицы.
       Пример 
        <граница таблицы = "1"> 

      
Ячейка 1
Ячейка 2

      
 
       Атрибуты, специфичные для этого тега:
       summary Предоставляет краткую информацию о структуре и назначении таблицы для невизуальных пользовательских агентов.
       выравнивание Визуальное выравнивание таблицы (т.е. слева, по центру, справа). Этот атрибут устарел, используйте вместо него CSS.
       Ширина Ширина стола.
       Другие атрибуты:
       Атрибут Описание
       dir Задает направление текста
       class Широкий идентификатор документа.
       id Широкий идентификатор документа
       язык Код языка
       title Определяет заголовок, связанный с элементом. Многие браузеры отображают это при наведении курсора на элемент (аналогично «подсказке»).
       Стиль Встроенный стиль (CSS)
       bgcolor Цвет фона таблицы.
        Примечание : этот атрибут устарел, вместо него используйте свойство background-color CSS.
       frame Используется в сочетании с атрибутом  border , указывает, с какой стороны кадра, образующего границу, окружающую таблицу, отображается. Возможные значения:
      •  void: ничего не отображается. Это значение по умолчанию
      •  вверху: верхняя сторона рамы
      •  внизу: Нижняя сторона рамы
      •  стороны: верхняя и нижняя стороны
      •  vsides: правая и левая стороны
      •  лев: Левая сторона
      •  правая сторона: правая сторона
      •  коробка: все стороны
      •  граница: Все стороны
       rules Используется в сочетании с атрибутом  border , указывает, какие правила появляются между ячейками таблицы. Возможные значения:
      •  Нет: ничего не отображается. Это значение по умолчанию
        • .
      •  группы: правила появляются между группами строк и группами столбцов
      •  рядов: Между рядами
      •  cols: Между столбцами
      •  все: Между всеми строками и столбцами
       граница Задает ширину границы вокруг таблицы. Для отсутствия границы используйте 0 (ноль).
       Cellspacing Задает расстояние между ячейками.
       cellpadding Задает расстояние между границами ячеек и их содержимым
       onclick Внутреннее событие (см. обработчики событий)
       ondbclick Внутреннее событие (см. обработчики событий)
       onmousedown Внутреннее событие (см. обработчики событий)
       onmouseup Внутреннее событие (см. обработчики событий)
       onmouseover Внутреннее событие (см. обработчики событий)
       onmousemove Внутреннее событие (см. обработчики событий)
       onmouseout Внутреннее событие (см. обработчики событий)
       onkeypress Внутреннее событие (см. обработчики событий)
       onkeydown Внутреннее событие (см. обработчики событий)
       onkeyup Внутреннее событие (см. обработчики событий)
       Попробуйте сами! 
       Измените приведенный ниже код, затем нажмите  Обновление  . Ниже приведены атрибуты.
       Информация на этой странице основана на HTML версии 4.01. Большинство современных браузеров теперь поддерживают HTML5.
       См. HTML5 
       Тег для HTML5-версии вышеуказанного элемента.
       См. этот список тегов HTML для получения последнего списка элементов HTML.
       таблиц в документах HTML 
       таблиц в документах HTML
       предыдущий
следующий
содержимое   элементы   атрибуты   индекс
        Содержание 
      1.  Знакомство с таблицами
      2.  Элементы для построения таблиц
        1.  СТОЛ   элемент
          •  Таблица направленности
        2.  Заголовки таблиц: элемент  CAPTION 
        3.  Группы строк:  THAD ,  TFOOT  и  TBODY  элементов
        4.  Группы столбцов: элементы  COLGROUP  и  COL 
          •   КОЛГРУПП  элемент
          •   COL  элемент
          •  Расчет количества столбцов в
стол
          •  Расчет ширины
столбцы
        5.  Строки таблицы:  ТР  элемент
        6.  Ячейки таблицы:  Элементы TH  и  TD 
          •  Ячейки, занимающие несколько строк или
столбцы
      3.  Форматирование таблицы визуальным пользователем
агенты
        1.  Границы и правила
        2.  Горизонтальное и вертикальное выравнивание
          •  Наследование выравнивания
технические характеристики
        3.  Поля ячеек
      4.  Отображение таблицы невизуальным пользователем
агенты
        1.  Связывание информации заголовка с
ячейки данных
        2.  Классификация ячеек
        3.  Алгоритм поиска заголовка
информация
      5.  Образец таблицы
       11.
       1 Знакомство с таблицами
       Модель таблицы HTML позволяет авторам упорядочивать данные — текст, предварительно отформатированный
текст, изображения, ссылки, формы, поля форм, другие таблицы и т. д. -- в строки и
столбцы клеток.
       Каждая таблица может иметь соответствующий заголовок (см.  CAPTION ), в котором приводится краткое описание содержимого таблицы.
цель. Также может быть предоставлено более подробное описание (через  суммарный атрибут ) в интересах людей, использующих речь или
Пользовательские агенты на основе Брайля.
       Строки таблицы могут быть сгруппированы в головную, нижнюю и
секции кузова, (через  THEAD ,  TFOOT  и  TBODY  элементы соответственно). Группы строк передают дополнительную структурную информацию
и может отображаться агентами пользователя таким образом, чтобы подчеркнуть эту структуру. Пользователь
агенты могут использовать разделение головы/тела/ноги для поддержки прокрутки тела
секции независимо от головной и ножной секций. Когда длинные столы
распечатаны, информация о голове и ноге может повторяться на каждой странице, которая
содержит табличные данные.
       Авторы также могут группировать столбцы, чтобы обеспечить
дополнительная структурная информация, которая может быть использована пользовательскими агентами.
Кроме того, авторы могут объявлять свойства столбцов в начале таблицы.
определение (посредством элементов  COLGROUP  и  COL ) таким образом, чтобы
пользовательские агенты отображают таблицу постепенно, вместо того, чтобы ждать
все данные таблицы должны поступить до рендеринга.
       Ячейки таблицы могут содержать информацию «заголовок».
(см.  ТД ) или «данные» (см. элемент  ТД ). Ячейки могут охватывать несколько
строки и столбцы. Модель таблицы HTML 4 позволяет авторам маркировать каждую ячейку так, чтобы
что невизуальные пользовательские агенты могут легче
сообщать пользователю информацию о заголовке ячейки. Не только эти
механизмы очень помогают пользователям с нарушениями зрения, они позволяют
для мультимодальных беспроводных браузеров с ограниченными возможностями отображения (например,
веб-пейджеры и телефоны) для обработки таблиц.
       Таблицы не следует использовать исключительно как средство размещения содержимого документа в
это может вызвать проблемы при рендеринге на невизуальные носители. Кроме того,
при использовании с графикой эти таблицы могут заставлять пользователей прокручивать по горизонтали до
просмотреть таблицу, разработанную в системе с большим дисплеем. Чтобы свести к минимуму эти
проблемы, авторы должны использовать таблицы стилей
для управления макетом, а не таблицами.
         Примечание.  Эта спецификация включает более подробные
информация о таблицах в разделах по обоснованию дизайна таблиц и реализации
вопросы. 
       Вот простая таблица, иллюстрирующая некоторые возможности HTML
настольная модель. Следующее определение таблицы:
      <ТАБЛИЦА граница="1"
          summary="В этой таблице приведены некоторые статистические данные о фруктах.
                   мухи: средний рост и вес, процент
                   с красными глазами (как для мужчин, так и для женщин). ">

       ...информация нижнего колонтитула... 

 ...первая строка данных первого блока... 
      ...вторая строка первого блока данных... 
 . ..первая строка второго блока данных... 
      ...вторая строка второго блока данных... 
      ...третья строка второго блока данных... 

        TFOOT  должен стоять перед  TBODY  в таблице  TABLE .
определение, чтобы пользовательские агенты могли визуализировать стопу до получения всех
(потенциально многочисленные) строки данных. Ниже приводится краткое описание тегов.
требуется и может быть опущен:
      •   Начальный тег TBODY  требуется всегда, за исключением случаев, когда таблица содержит
только один корпус стола и без головной или ножной секций стола.  TBODY  конечный тег всегда можно безопасно опустить.
      •  Начальные теги для  THEAD  и  TFOOT  требуются, когда заголовок таблицы
и ножные секции присутствуют соответственно, но соответствующие конечные теги могут
всегда можно безопасно опустить.
       Соответствующие синтаксические анализаторы пользовательских агентов должны подчиняться этим правилам по причинам обратного
совместимость.
       Таблицу из предыдущего примера можно было бы сократить, удалив определенные концы
теги, например:
      <ТАБЛИЦА>
<ГОЛОВА>
     
       ...информация заголовка... 
<ТФУТ>
      ...информация нижнего колонтитула... 
 ...первая строка данных первого блока... 
      ...вторая строка первого блока данных... 
 ...первая строка второго блока данных... 
      ...вторая строка второго блока данных... 
      ...третья строка второго блока данных... 

 
        THEAD ,  TFOOT  и  TBODY  разделов должны содержать одинаковое количество
столбцы.
       11.2.4 Группы столбцов: 
        COLGROUP  и  COL  элементы
       Группы столбцов позволяют авторам создавать
структурные подразделения внутри таблицы. Авторы могут выделить эту структуру
через таблицы стилей или атрибуты HTML (например,  rules  для элемента  TABLE ). Для примера
визуальное представление групп столбцов, см.
образец таблицы.
       Таблица может содержать одну неявную группу столбцов (без  COLGROUP  разделяет столбцы) или любое количество явных
группы столбцов (каждая из которых разделена экземпляром  элемент COLGROUP ).
        Элемент COL  позволяет авторам совместно использовать атрибуты в нескольких столбцах.
без какой-либо структурной группировки. "Размах"  COL  element — это количество столбцов, которые будут иметь общие атрибуты элемента.
        COLGROUP  элемент
       COLGROUP  - O (COL)* -- группа столбцов таблицы -->
 span  NUMBER 1 -- количество столбцов в группе по умолчанию --
    ширина  %Многодлина; #ПРЕДПОЛАГАЕТСЯ -- ширина по умолчанию для вложенных COL --
  %cellhalign; -- горизонтальное выравнивание в ячейках --
  %cellvalign; -- вертикальное выравнивание в ячейках --
  >
 
        Начальный тег:  требуется  , Конечный тег:  дополнительно  
        Определения атрибутов 
        диапазон  =  номер  [CN]
       Этот атрибут, который должен быть целым числом > 0, определяет количество
столбцы в группе столбцов. Значения означают следующее:
      •  При отсутствии атрибута  span  каждый  COLGROUP  определяет группу столбцов, содержащую один столбец.
      •  Если для атрибута  span  установлено значение N > 0, текущий  Элемент COLGROUP  определяет группу столбцов, содержащую N столбцов.
       Пользовательские агенты должны игнорировать этот атрибут, если  Элемент COLGROUP  содержит один или несколько элементов  COL .
        ширина  =  мультидлина  [CN]
       Этот атрибут указывает ширину по умолчанию для каждого столбца в текущем
группа столбцов. В дополнение к стандартным пикселям, процентам и относительным
значений, этот атрибут допускает специальную форму "0*" (ноль звездочек), что означает
что ширина каждого столбца в группе должна быть минимальной шириной
необходимо для хранения содержимого столбца. Это означает, что весь столбец
содержимое должно быть известно, прежде чем его ширина может быть правильно вычислена. Авторы
следует знать, что указание "0*" предотвратит визуальные пользовательские агенты от
рендеринг таблицы пошагово.
       Этот атрибут переопределяется для любого столбца в группе столбцов,  ширина  указывается через элемент  COL .
        Атрибуты, определенные в другом месте 
      •   id  ,  class  (идентификаторы всего документа)
      •   язык  (язык
информация),  дир  (текст
направление)
      •   название  (название элемента)
      •   стиль  (встроенный
информация о стиле )
      •   onclick ,  ondblclick ,  onmousedown ,  onmouseup ,  onmouseover ,  onmousemove ,  onmouseout ,  onkeypress ,  onkeydown ,  onkeyup  (внутренние события)
      •   выровнять ,  символов ,  charoff ,  valign  (ячейка
выравнивание)
        Элемент COLGROUP  создает явную группу столбцов. Количество
столбцы в группе столбцов могут быть указаны в двух, взаимоисключающих
способы:
      1.  Атрибут элемента  span  (значение по умолчанию 1) указывает
количество столбцов в группе.
      2.  Каждый  Элемент COL  в  COLGROUP  представляет один или несколько столбцов
в группе.
       Преимущество использования атрибута  span  заключается в том, что авторы
может группировать информацию о ширине столбцов. Таким образом, если таблица содержит
сорок столбцов, все из которых имеют ширину 20 пикселей, проще
написать:
         
       чем:
         <КОЛГРУПП>
      <ЦВЕТ>
      <ЦВЕТ>
        ...всего сорок элементов COL... 
   
 
       Когда необходимо выделить столбец (например, для информации о стиле, для
указать информацию о ширине и т. д.) внутри группы, авторы должны указать, что
колонка с элементом  COL . Таким образом, чтобы применить специальную информацию о стиле к
последний столбец предыдущей таблицы, выделим его следующим образом:
         <КОЛГРУПП>
      
      <ЦВЕТ>
   
 
       Атрибут  ширины   Элемент COLGROUP  наследуется всеми 40 столбцами. Первый  COL  элемент ссылается на первые 39 столбцов (не делая для них ничего особенного), а
второй присваивает значение  id  сороковому столбцу, чтобы таблицы стилей могли
обратитесь к нему.
       Таблица в следующем примере содержит две группы столбцов. Первый
группа столбцов содержит 10 столбцов, а вторая содержит 5 столбцов. По умолчанию
ширина каждого столбца в первой группе столбцов составляет 50 пикселей. Ширина каждого
столбец во второй группе столбцов будет минимально необходимым для этого
столбец.
      <ТАБЛИЦА>

      <ГОЛОВА>

  <ТД><ТД><ТД>

       Расчет ширины столбцов 
       Авторы могут указывать ширину столбцов тремя способами:
        Фиксированный 
       Спецификация фиксированной ширины задается в пикселях (например,  ширина ="30"). Спецификация фиксированной ширины позволяет
рендеринг.
        Процент 
       Спецификация в процентах (например,  ширина  = "20%")
основан на проценте горизонтального пространства, доступного для таблицы
(между текущими левым и правым полями, включая числа с плавающей запятой). Обратите внимание, что это
пространство не зависит от самой таблицы и, следовательно, процентных характеристик
включить инкрементный рендеринг.
        Пропорциональный 
       Пропорциональные характеристики (например,  ширина  ="3*")
см. части горизонтального пространства  требуемого  по таблице. Если
ширине таблицы присваивается фиксированное значение через ширину   атрибут элемента  TABLE , пользовательские агенты могут отображать таблицу
постепенно даже с пропорциональными столбцами.
       Однако, если таблица не имеет фиксированной ширины, пользовательские агенты должны получать
все табличные данные, прежде чем они смогут определить горизонтальное пространство, требуемое
стол. Только тогда это пространство может быть выделено для пропорциональных столбцов.
       Если автор не указывает информацию о ширине для столбца, пользовательский агент может
не может постепенно форматировать таблицу, так как она должна ждать всего
столбец данных, чтобы получить соответствующую ширину.
       Если ширина столбцов слишком мала для содержимого определенного
ячейка таблицы, пользовательские агенты могут выбрать перекомпоновку таблицы.
       Таблица в этом примере содержит шесть столбцов. Первый не
принадлежат явной группе столбцов. Следующие три принадлежат первому явному
группа столбцов, а последние два принадлежат второй явной группе столбцов. Этот
таблица не может быть отформатирована постепенно, так как она содержит пропорциональный столбец
спецификации ширины и нет значения для  атрибут width  для элемента  TABLE .
       После того, как (визуальный) пользовательский агент получил данные таблицы: доступные
горизонтальное пространство будет выделено агентом пользователя следующим образом: сначала пользователь
агент выделит 30 пикселей для столбцов один и два. Тогда минимальное пространство
необходимые для третьего столбца будут зарезервированы. Оставшееся горизонтальное пространство
будет разделен на шесть равных частей (поскольку 2* + 1* + 3* = 6 частей). Четвертая колонка (2*) получит две такие порции, пятая колонка (1*) получит
получите один, а шестой столбец (3*) получит три.
          
<ТАБЛИЦА>
<КОЛГРУПП>
   <ЦВЕТ>
<КОЛГРУПП>
   <ЦВЕТ>
   <ЦВЕТ>
   <ЦВЕТ>

      <ЦВЕТ>
   <ГОЛОВА>
<КОЛГРУПП>
   <ЦВЕТ>
   <ЦВЕТ>
<ГОЛОВА>

       Тестовая таблица с объединенными ячейками

      Среднее
    Красные
      глаза

      роствес

      Кобели1,90,00340%

      Самки1,70,00243%

 
       может отображаться примерно так на устройстве tty:
                Тестовая таблица с объединенными ячейками
    /----------------------------------------------------------------------\
    | | Средний | Красный |
    | |-------------------| глаза |
    | | высота | вес | |
    |--------------------------------------------------------|
    | Кобели | 1,9 | 0,003 | 40% |
    |--------------------------------------------------------|
    | Женщины | 1,7 | 0,002 | 43% |
    \-------------------------------------------------------/
 
       или подобное графическому пользовательскому агенту:
       11.2 Элементы для изготовления столов 
       11.2.1 
        ТАБЛИЦА  элемент
       ТАБЛИЦА  - -
     (ЗАГОЛОВОК?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
 сводка  %текст; #ПРЕДПОЛАГАЕТСЯ -- назначение/структура речевого вывода--
    ширина  %Длина; #ПРЕДПОЛАГАЕТСЯ -- ширина таблицы --
    граница  % пикселей; #ПРЕДПОЛАГАЕТСЯ -- контролирует ширину рамки вокруг таблицы --
    кадр  %TFrame; #ПРЕДПОЛАГАЕТСЯ -- какие части кадра отображать --
    правил  %TRules; #ПРЕДПОЛАГАЕТСЯ -- правила между строками и столбцами --
    Cellspacing  %Длина; #ПРЕДПОЛАГАЕТСЯ -- расстояние между ячейками --
    Cellpadding  %Длина; #ПРЕДПОЛАГАЕТСЯ -- интервал внутри ячеек --
  >
 
        Начальный тег:  требуется  , Конечный тег:  требуется  
        Определения атрибутов 
        сводка  =  текст  [CS]
       Этот атрибут предоставляет сводную информацию о назначении и структуре таблицы для
пользовательские агенты, отображающие невизуальные носители, такие как речь и шрифт Брайля.
        выровнять  =  слева|в центре|справа  [CI]
        Устарело.  Это
Атрибут определяет положение таблицы относительно документа.
Допустимые значения:
      •   слева:  Таблица находится слева от документа.
      •   центр:  Таблица находится в центре документа.
      •   справа:  Таблица находится справа от документа.
        ширина  =  длина  [CN]
       Этот атрибут указывает желаемую ширину всей таблицы и
предназначен для визуальных пользовательских агентов. Если значение представляет собой процентное значение,
значение относится к доступному горизонтальному пространству пользовательского агента. в
отсутствие какого-либо указания ширины, ширина таблицы определяется пользователем
агент.
        Атрибуты, определенные в другом месте 
      •   id  ,  class  (идентификаторы всего документа)
      •   язык  (язык
информация),  дир  (текст
направление)
      •   название  (название элемента)
      •   стиль  (встроенный
информация о стиле)
      •   onclick ,  ondblclick ,  onmousedown ,  onmouseup ,   ,  onmousemove  ,  onmouseout ,  onkeypress ,  onkeydown  ,  onkeyup  (внутренние события)
      •   bgcolor  (цвет фона)
      •   рамка ,  правила ,  граница  (границы и правила)
      •   интервал ячеек  ,  cellpadding  (ячейка
поля)
        Элемент TABLE  содержит все остальные элементы, определяющие заголовок,
строки, содержимое и форматирование.
       Следующий информативный список описывает, какие операции пользовательские агенты могут
выполнять при рендеринге таблицы:
      •  Сделать таблицу  сводной  доступной для пользователя. Авторы должны предоставить
сводка содержимого и структуры таблицы, чтобы люди, использующие невизуальные
пользовательские агенты могут лучше понять это.
      •  Визуализация подписи, если она определена.
      •  Отображение заголовка таблицы, если он указан. Отобразить нижний колонтитул таблицы, если
указан один. Пользовательские агенты должны знать, где отображать верхний и нижний колонтитулы.
Например, если носитель вывода выгружается, пользовательские агенты могут поместить заголовок в
вверху каждой страницы и в нижнем колонтитуле. Точно так же, если пользовательский агент
предоставляет механизм прокрутки строк, заголовок может отображаться в верхней части
прокручиваемая область и нижний колонтитул внизу.
      •  Подсчитать количество столбцов в таблице.
Обратите внимание, что количество строк в таблице равно
к числу элементов  TR , содержащихся в ТАБЛИЦЕ   элемент.
      •  Сгруппировать столбцы в соответствии с любой группой столбцов
технические характеристики.
      •  Визуализировать ячейки построчно и сгруппировать в соответствующие столбцы между
верхний и нижний колонтитулы. Визуальные пользовательские агенты должны
отформатировать таблицу в соответствии с атрибутами HTML и таблицей стилей
Технические характеристики.
       Модель таблицы HTML была разработана таким образом, чтобы с помощью автора пользователь
агенты могут отображать таблицы  постепенно  (т. е. по мере
поступают строки таблицы) вместо того, чтобы ждать всех данных перед началом
рендерить.
       Чтобы пользовательский агент мог отформатировать таблицу за один проход, авторы должны указать
пользовательский агент:
      •  Количество столбцов в таблице. Пожалуйста, обратитесь к разделу о расчете количества столбцов в таблице для получения подробной информации о
как предоставить эту информацию.
      •  Ширина этих столбцов. Пожалуйста, обратитесь к разделу о расчете ширины столбцов для получения подробной информации о том, как
предоставить эту информацию.
       Точнее, пользовательский агент может отображать таблицу за один проход, когда
ширина столбца указывается с помощью комбинации  Элементы COLGROUP  и  COL . Если какой-либо из столбцов указан в
относительном или процентном выражении (см. раздел о
расчет ширины столбцов), авторы также должны указать ширину
сам стол.
       Таблица направленности 
       Направленность стола
является либо унаследованной направленностью (по умолчанию слева направо), либо
определяется атрибутом  dir  для элемента  TABLE .
       Для таблицы с письмом слева направо нулевой столбец находится слева, а нулевая строка — слева.
наверху. Для таблицы с письмом справа налево нулевой столбец находится справа, а строка
ноль находится вверху.
       Когда пользовательский агент выделяет дополнительные ячейки для строки (см. раздел о подсчете количества столбцов в таблице), дополнительная строка
ячейки добавляются справа от таблицы для таблиц с письмом слева направо и в
левая сторона для таблиц справа налево.
       Обратите внимание, что  TABLE  является единственным элементом, на котором  dir  меняет визуальный порядок столбцов на противоположный; одна строка таблицы (  TR  ) или
Группа столбцов (  COLGROUP  ) не может быть реверсирована независимо.
       При установке для элемента  TABLE  атрибут  dir  также влияет на
направление текста в ячейках таблицы (поскольку атрибут  dir  наследуется
элементы блочного уровня).
       Чтобы указать таблицу с письмом справа налево, установите  dir  атрибут следующим образом:
      <ТАБЛИЦА директор="RTL">
  ...остальная часть таблицы... 

 
       Направление текста в отдельных ячейках можно изменить, задав параметр  dir  атрибут в элементе, который определяет ячейку. Пожалуйста, обратитесь к разделу о двунаправленном тексте для получения дополнительной информации.
по вопросам направления текста.
       11.
       2.2 Заголовки таблиц: элемент  CAPTION 
       CAPTION  - - (%inline;)* -- заголовок таблицы -->

 
        Начальный тег:  требуется  , Конечный тег:  требуется  
        Определения атрибутов 
        выравнивание  =  сверху|снизу|слева|справа  [КИ]
        Устарело.  Для
визуальные пользовательские агенты, этот атрибут указывает положение заголовка с
уважение к столу. Возможные значения:
      •   top:  Заголовок вверху таблицы. Это
значение по умолчанию.
      •   внизу:  Заголовок внизу таблицы.
      •   слева:  Заголовок слева от таблицы.
      •   справа:  Подпись справа от таблицы.
        Атрибуты, определенные в другом месте 
      •   id  ,  class  (идентификаторы всего документа)
      •   язык  (язык
информация),  дир  (текст
направление)
      •   название  (название элемента)
      •   стиль  (встроенный
информация о стиле)
      •   onclick ,  ondblclick ,  onmousedown ,  onmouseup ,  onmouseover ,  onmousemove ,  onmouseout ,  onkeypress ,  onkeydown ,  onkeyup  (внутренние события)
       Текст элемента  CAPTION , если он присутствует, должен описывать природу
стол.  ЗАГЛАВИЕ 9Элемент 1326 разрешен только сразу после  ТАБЛИЦА  начальный тег. А  ТАБЛИЦА  элемент может содержать только один элемент  ЗАГОЛОВОК  элемент.
       Визуальные пользовательские агенты позволяют зрячим людям быстро понять структуру
таблицу из заголовков, а также подписи. Следствием этого является
что подписи часто неадекватны для краткого изложения цели и
структура таблицы с точки зрения людей, полагающихся на невизуальные
пользовательские агенты.
       Поэтому авторы должны позаботиться о том, чтобы предоставить
дополнительная информация, резюмирующая цель и структуру
таблица с использованием сводного атрибута   элемента  TABLE . Это особенно
важно для таблиц без подписей. Примеры ниже иллюстрируют использование  сводка  атрибут.
       Визуальные пользовательские агенты должны избегать обрезки любой части
таблицу, включая заголовок, если не предоставлены средства для доступа ко всем
частей, например, горизонтальной или вертикальной прокруткой. Мы рекомендуем использовать заголовок
текст должен быть перенесен на ту же ширину, что и таблица. (См. также раздел о рекомендуемых алгоритмах компоновки.)
       11.2.3 Группы рядов: 
        THEAD  ,  TFOOT  и  TBODY  элементы
       THEAD  - O (TR)+ -- заголовок таблицы -->
 TFOOT  - O (TR)+ -- нижний колонтитул таблицы -->
 
        Начальный тег:  требуется  , Конечный тег:  дополнительно  
       TBODY  O O (TR)+ -- корпус стола -->
 
        Начальный тег:  необязательный  , Конечный тег:  дополнительно  
      
 
        Атрибуты, определенные в другом месте 
      •   id  ,  class  (идентификаторы всего документа)
      •   язык  (язык
информация),  дир  (текст
направление)
      •   название  (название элемента)
      •   стиль  (встроенный
информация о стиле)
      •   onclick ,  ondblclick ,  onmousedown ,  onmouseup ,  onmouseover ,  onmousemove ,  onmouseout ,  onkeypress ,  onkeydown ,  onkeyup  (внутренние события)
      •   выровнять ,  символов ,  charoff ,  valign  (ячейка
выравнивание)
       Строки таблицы могут быть сгруппированы в заголовок таблицы, таблицу
ножка и одна или несколько секций корпуса стола с помощью  THEAD  ,  Элементы TFOOT  и  TBODY  соответственно. Это деление позволяет
пользовательские агенты для поддержки прокрутки тела таблицы независимо от таблицы
голова и нога. При печати длинных таблиц верхняя и нижняя части таблицы
информация может повторяться на каждой странице, содержащей табличные данные.
       Верхняя и нижняя части стола должны содержать информацию о
столбцы. Тело таблицы должно содержать строки табличных данных.
       При наличии, каждый  THEAD ,  TFOOT  и  TBODY  содержит группу строк   . Каждая группа строк должна содержать хотя бы одну строку,
определяется элементом  TR .
       Этот пример иллюстрирует порядок и структуру головок, ножек и
тела.
      <ТАБЛИЦА>
<ГОЛОВА>
     <ТР>  ...информация заголовка... 

<ТФУТ>
     
       
      
     
       
       
      

     
       
       
       
      

 
       
       
      
     
       
       
      
     
       
       
       
      
   
 
      


        ... 

 
       Элемент 
       COL 
       COL  - O EMPTY -- столбец таблицы -->
 span  NUMBER 1 -- Атрибуты COL влияют на N столбцов --
    ширина  %Многодлина; #ПРЕДПОЛАГАЕТСЯ -- спецификация ширины столбца --
  %cellhalign; -- горизонтальное выравнивание в ячейках --
  %cellvalign; -- вертикальное выравнивание в ячейках --
  >
 
        Начальный тег:  требуется  , Конечный тег:  запрещено  
        Определения атрибутов 
        диапазон  =  номер  [CN]
       Этот атрибут, значение которого должно быть целым числом > 0, указывает число
столбцов, "натянутых" на 9элемент 1325 COL ; элемент  COL  разделяет свои атрибуты с
все столбцы, которые он охватывает. Значение по умолчанию для этого атрибута равно 1 (т.  элемент COL  относится к одному столбцу). Если  Атрибут span  имеет значение N > 1, текущий  COL  элемент разделяет свои атрибуты со следующими столбцами N-1.
        ширина  =  мультидлина  [CN]
       Этот атрибут указывает ширину по умолчанию для каждого столбца, охватываемого
текущий  Элемент COL . Имеет то же значение, что и .
width  для элемента  COLGROUP  и переопределяет его.
        Атрибуты, определенные в другом месте 
      •   id  ,  class  (идентификаторы всего документа)
      •   язык  (язык
информация),  дир  (текст
направление)
      •   название  (название элемента)
      •   стиль  (встроенный
информация о стиле )
      •   onclick ,  ondblclick ,  onmousedown ,  onmouseup ,  onmouseover ,  onmousemove ,  onmouseout ,  onkeypress ,  onkeydown ,  onkeyup  (внутренние события)
      •   выровнять ,  символов ,  charoff ,  valign  (ячейка
выравнивание)
        Элемент COL  позволяет авторам группировать атрибуты
спецификации столбцов таблицы.  COL  делает группу , а не  колонны вместе конструктивно - это роль  Элемент COLGROUP .
Элементы  COL  пусты и служат только в качестве
поддержка атрибутов. Они могут появляться внутри или вне явного столбца.
группа (т. е. элемент  COLGROUP ).
       Атрибут  width  для  COL  относится к ширине каждого
столбец в диапазоне элемента.
       Расчет количества столбцов в
таблица 
       Есть два способа определить количество столбцов в таблице (в порядке
приоритета):
      1.  Если  Элемент TABLE  содержит любой  COLGROUP  или  COL  элементы, пользовательские агенты должны вычислить количество столбцов путем суммирования
следующий:
        •  Для каждого  элемент COL , возьмите значение его  атрибут span  (значение по умолчанию 1).
        •  Для каждого элемента  COLGROUP , содержащего хотя бы один  COL  элемент, игнорируйте  атрибут span  для  Элемент COLGROUP . Для каждого элемента  COL  выполните расчет
шаг 1.
        •  Для каждого пустого элемента  COLGROUP  взять значение его  атрибут span  (значение по умолчанию 1).
      2.  В противном случае, если элемент  TABLE  не содержит  COLGROUP  или  элементов COL , пользовательские агенты должны основывать число
столбцы на то, что требуется строками. Количество столбцов равно
количество столбцов, необходимых для строки с наибольшим количеством столбцов, включая ячейки
которые охватывают несколько столбцов. Для любой строки, в которой меньше этого количества
столбцы, конец этой строки должен быть заполнен пустыми ячейками. «Конец» а.
строка зависит от таблицы
направленность.
       Ошибка, если таблица содержит  COLGROUP  или  COL  элементов, и два вычисления не приводят к тому же количеству
столбцы.
       После того, как пользовательский агент подсчитал количество столбцов в таблице, он
может группировать их в группы столбцов.
       Например, для каждой из следующих таблиц вычисление двух столбцов
методы должны привести к трем столбцам. Первые три таблицы могут быть отображены
постепенно.
      <ТАБЛИЦА>

      

       ...
  ... строк... 

<ТАБЛИЦА>
<КОЛГРУПП>
<ЦВЕТ>

      


        ... 
  ... строк... 

<ТАБЛИЦА>
<КОЛГРУПП>
<ЦВЕТ>


      

        ... 
  ... строк... 

<ТАБЛИЦА>

      

       
   

        ... 
  ... строк... 

 
       Мы установили значение атрибута  align  в третьем столбце
группу в «центр». Все ячейки в каждом столбце этой группы наследуют это
значение, но может переопределить его. На самом деле последние  COL  делает именно это, указав
что каждая ячейка в столбце, которым она управляет, будет выровнена по ":"
персонаж.
       В следующей таблице спецификации ширины столбца позволяют агенту пользователя
для постепенного форматирования таблицы:
          
<ТАБЛИЦА>

      

        ... 
  ... строк... 

 
       Первые десять столбцов будут иметь ширину 15 пикселей каждый. Последние два столбца будут
каждый получает половину оставшихся 50 пикселей. Обратите внимание, что  COL  элементы появляются только так, что  Значение id  может быть указано для двух последних
столбцы.
         Примечание.  Хотя  атрибут width  в элементе  TABLE  не устарел,
авторам рекомендуется использовать таблицы стилей для указания ширины таблицы. 
       11.2.5 Строки таблицы: элемент 
       TR 
       TR  - O (TH|TD)+ -- строка таблицы -->

 
        Начальный тег:  требуется  , Конечный тег:  дополнительно  
        Атрибуты, определенные в другом месте 
      •   id  ,  class  (идентификаторы всего документа)
      •   язык  (язык
информация),  дир  (текст
направление)
      •   название  (название элемента)
      •   стиль  (встроенный
информация о стиле)
      •   onclick  ,  ondblclick  ,  onmousedown ,  onmouseup ,  onmouseover ,  onmousemove ,  onmouseout ,  onkeypress ,  onkeydown ,  onkeyup  (внутренние события)
      •   bgcolor  (цвет фона)
      •   выровнять ,  символов ,  charoff ,  valign  (ячейка
выравнивание)
        Элементы TR  действуют как контейнер для строки ячеек таблицы. Конец
тег может быть опущен.
       Этот пример таблицы содержит три строки, каждая из которых начинается с  TR  элемент:
       ... Строка заголовка...  ...Первая строка данных... 
<ТР>  ...Вторая строка данных...  ...остальная часть таблицы... 
       11.2.6 Ячейки таблицы: элементы 
       TH  и  TD 
       TH  |  TD  ) - O (%flow;)* -- ячейка заголовка таблицы, ячейка данных таблицы -->



 аббр  %текст; #ПРЕДПОЛАГАЕТСЯ -- сокращение для ячейки заголовка --
    ось  CDATA #ПРЕДПОЛАГАЕТСЯ -- список связанных заголовков, разделенных запятыми--
    заголовков  IDREFS #IMPLIED -- список идентификаторов для ячеек заголовков --
    область  %область; #ПРЕДПОЛАГАЕТСЯ -- область действия, охватываемая ячейками заголовка --
    rowspan  NUMBER 1 -- количество строк, охваченных ячейкой --
    colspan  NUMBER 1 -- количество столбцов, занимаемых ячейкой --
  %cellhalign; -- горизонтальное выравнивание в ячейках --
  %cellvalign; -- вертикальное выравнивание в ячейках --
  >
 
        Начальный тег:  требуется  , Конечный тег:  дополнительно  
        Определения атрибутов 
        заголовки  =  idrefs  [CS]
       Этот атрибут указывает список ячеек заголовков, которые предоставляют заголовок
информация для текущей ячейки данных. Значение этого атрибута равно
разделенный пробелами список имен ячеек; эти ячейки должны быть названы путем установки их  идентификатор  атрибут. Авторы обычно используют  заголовков  атрибут для помощи невизуальным
пользовательские агенты отображают информацию заголовка о ячейках данных (например, заголовок
информация произносится до данных ячейки), но атрибут также может быть
используется вместе с таблицами стилей. См. также прицел  .
атрибут.
        прицел  =  имя области  [CI]
       Этот атрибут указывает набор ячеек данных, для которых текущий заголовок
ячейка предоставляет информацию заголовка. Этот атрибут можно использовать вместо  атрибут headers , особенно для простых таблиц. Когда указано,
этот атрибут должен иметь одно из следующих значений:
      •   строка:  Текущая ячейка предоставляет информацию заголовка для
остальная часть строки, которая его содержит (см. также раздел о направленности таблицы).
      •   col:  Текущая ячейка предоставляет информацию заголовка для
остальная часть столбца, который его содержит.
      •   rowgroup:  В ячейке заголовка содержится информация заголовка для
остальная часть группы строк, которая его содержит.
      •   colgroup:  В ячейке заголовка содержится информация заголовка для
остальная часть группы столбцов, которая его содержит.
        аббр  =  текст  [CS]
       Этот атрибут следует использовать для предоставления сокращенной формы ячейки.
содержимое и может быть отображено пользовательскими агентами, когда это уместно, вместо
содержимое ячейки. Сокращенные имена должны быть короткими, так как пользовательские агенты могут отображать
их неоднократно. Например, синтезаторы речи могут отображать сокращенное
заголовки, относящиеся к конкретной ячейке, перед рендерингом этой ячейки
содержание.
        ось  =  cdata  [CI]
       Этот атрибут может использоваться для помещения ячейки в концептуальные категории, которые
можно рассматривать как образующие оси в n-мерном пространстве. Пользовательские агенты могут давать
пользователям доступ к этим категориям (например, пользователь может запросить у пользовательского агента
все ячейки, принадлежащие к определенным категориям, пользовательский агент может представить таблицу
в виде оглавления и др.). Пожалуйста, обратитесь к разделу о категоризации ячеек для получения дополнительной информации. Значение
этого атрибута представляет собой список имен категорий, разделенных запятыми.
        рядов  =  номер  [CN]
       Этот атрибут указывает количество строк, охваченных текущей ячейкой.
Значение по умолчанию этого атрибута равно единице ("1"). Нулевое значение ("0") означает
что ячейка охватывает все строки от текущей строки до последней строки таблицы
раздел (  THEAD  ,  TBODY  или  TFOOT  ), в котором ячейка
определенный.
        столбец  =  номер  [CN]
       Этот атрибут указывает количество столбцов, охваченных текущей ячейкой. Значение по умолчанию этого атрибута равно единице ("1"). Нулевое значение ("0") означает
что ячейка охватывает все столбцы от текущего столбца до последнего столбца
группа столбцов (  COLGROUP  ), в котором определена ячейка.
        сейчас  [CI]
        Устарело.  Когда
присутствует, этот логический атрибут указывает визуальным пользовательским агентам отключить автоматический
перенос текста для этой ячейки. Таблицы стилей
следует использовать вместо этого атрибута для достижения эффекта переноса.  Примечание.  при неосторожном использовании этот атрибут может привести к чрезмерному
широкие клетки.
        ширина  =  длина  [CN]
        Устарело.  Это
атрибут предоставляет агентам пользователя рекомендуемую ширину ячейки.
        высота  =  длина  [CN]
        Устарело.  Это
атрибут предоставляет агентам пользователя рекомендуемую высоту ячейки.
        Атрибуты, определенные в другом месте 
      •   id  ,  class  (идентификаторы всего документа)
      •   язык  (язык
информация),  дир  (текст
направление)
      •  название  (название элемента)
      •   стиль  (встроенный
информация о стиле)
      •   onclick ,  ondblclick ,  onmousedown ,  onmouseup ,  onmouseover ,  onmousemove ,  onmouseout ,  onkeypress ,  onkeydown ,  onkeyup  (внутренние события)
      •   bgcolor  (цвет фона)
      •   выровнять ,  символов ,  charoff ,  valign  (ячейка
выравнивание)
       Ячейки таблицы могут содержать два типа информации: заголовок
информация и данные. Этот
Различие позволяет пользовательским агентам четко отображать заголовки и ячейки данных,
даже при отсутствии таблиц стилей. Например, визуальные пользовательские агенты могут
представить текст ячейки заголовка жирным шрифтом. Синтезаторы речи могут отображать
информация заголовка с отчетливой голосовой интонацией.
        Элемент TH  определяет ячейку, содержащую информацию заголовка. Пользователь
агентам доступны две части информации заголовка: содержимое  ТД  элемент и значение  сокращение  атрибут. Пользовательские агенты должны отображать либо
содержимое ячейки или значение атрибута  abbr . Для визуальных медиа,
последнее может быть уместно, когда недостаточно места для рендеринга
полное содержимое ячейки. Для невизуальных носителей  аббр.  может использоваться как
сокращение для заголовков таблиц, когда они отображаются вместе с содержимым
ячеек, к которым они применяются.
        заголовки 9Атрибуты области 1326 и   также позволяют авторам помогать невизуальным
пользовательские агенты обрабатывают информацию заголовка. Пожалуйста, обратитесь к разделу по маркировке ячеек для невизуальных пользовательских агентов для
Информация и примеры.
        Элемент TD  определяет ячейку, содержащую данные.
       Ячейки могут быть пустыми (т. е. не содержать данных).
       Например, следующая таблица содержит четыре столбца данных, каждый из которых
по описанию столбца.
      
Чашки кофе, выпитые каждым сенатором

       

       
 

 
      
   <ТД>Т. Секстон
       Пользовательский агент, визуализирующий tty-устройство, может отображать это следующим образом:
        Название Чашки Тип кофе Сахар? 
Т.  Секстон 10 Эспрессо Нет
J. Dinnen 5 без кофеина Да
 
       Ячейки, занимающие несколько строк или
столбцы 
       Ячейки могут занимать несколько строк или столбцов. Количество строк или столбцов
охватывается ячейкой, задается  rowspan  и  атрибуты colspan  для  TH  и  ТД  элементов.
       В этом определении таблицы мы указываем, что ячейка в четвертой строке второго столбца
должен охватывать в общей сложности три столбца, включая текущий столбец.
      <ТАБЛИЦА граница="1">

      
   <ТД>Т. Секстон
       В следующем примере пользовательский агент должен отображать границы в пять пикселей.
толстые слева и справа от стола, с нарисованными правилами
между каждым столбцом.
      
Чашки кофе, выпитые каждым сенатором

      
   Имя
   Кубки
   Тип кофе
   Сахар?

      
   10
   Эспрессо
   Нет

      
    Дж. Ужин
   5
   Без кофеина
   Да

 
      Чашки кофе, выпитые каждым сенатором

      НазваниеЧашкиТип кофеСахар?

      Т. Sexton10ЭспрессоНет

      Дж. Диннен5Без кофеинаДа

      А. СорияНедоступно

 
       Эта таблица может отображаться на устройстве tty визуальным агентом пользователя как
следует:
      Чашек кофе, выпитых каждым сенатором
 --------------------------------------
 | Имя |Чашки|Тип кофе|Сахар?|
 --------------------------------------
 |Т.  Секстон|10 |Эспрессо |Нет |
 --------------------------------------
 |Дж. Обед|5 |Без кофеина |Да |
 --------------------------------------
 |А. Сория |Недоступно |
 --------------------------------------
 
       Следующий пример иллюстрирует (с помощью границ таблицы), как ячейка
определения, охватывающие более одной строки или столбца, влияют на определение
более поздние клетки. Рассмотрим следующее определение таблицы:
      <ТАБЛИЦА граница="1">

      1 2 3

      4 6

      7 8 9

 
       Поскольку ячейка "2" охватывает первую и вторую строки, определение второй
row примет это во внимание. Таким образом, вторая  TD  во второй строке фактически определяет
третья ячейка строки. Визуально таблица может отображаться на tty-устройстве.
как:
      -------------
| 1 | 2 | 3 |
----| |----
| 4 | | 6 |
----|---|----
| 7 | 8 | 9 |
-------------
 
      , в то время как графический агент пользователя может отобразить это как:
       Обратите внимание, что если  TD , определяющая ячейку «6», была опущена, лишняя пустая ячейка
был бы добавлен агентом пользователя для завершения строки.
       Аналогично, в следующем определении таблицы:
      <ТАБЛИЦА граница="1">

      1 2 3

      4 6

      7 8 9

 
       ячейка "4" охватывает два столбца, поэтому второй  TD  в строке фактически определяет
третья ячейка ("6"):
      -------------
| 1 | 2 | 3 |
--------|----
| 4 | 6 |
--------|----
| 7 | 8 | 9 |
-------------
 
       Графический пользовательский агент может отображать это как:
       Ошибка при определении перекрывающихся ячеек. Пользовательские агенты могут отличаться в том, как они
обработать эту ошибку (например, рендеринг может отличаться).
       Следующий недопустимый пример иллюстрирует, как можно создать перекрывающиеся
клетки. В этой таблице ячейка «5» занимает две строки, а ячейка «7» — два столбца.
поэтому в ячейке между «7» и «9» есть перекрытие:
      <ТАБЛИЦА граница="1">

      1 2 3

      4 5 6

      7 9
 
         Примечание.  В следующих разделах описывается таблица HTML.
атрибуты, относящиеся к визуальному форматированию. Когда эта спецификация была впервые
опубликованный в 1997 году, [CSS1] не предлагал механизмов для контроля всех аспектов
визуальное форматирование таблицы. С тех пор [CSS2] добавил свойства
для визуального форматирования таблиц. 
       HTML 4 включает механизмы для управления:
      •  стили границ
      •  горизонтальное и вертикальное выравнивание ячейки
содержание
      •  и поля ячейки
       11.3.1
Границы и правила 
       Следующие атрибуты влияют на внешнюю и внутреннюю рамки таблицы.
правила.
        Определения атрибутов 
        кадр  =  пустота|выше|ниже|hsides|lhs|rhs|vsides|box|граница  [CI]
       Этот атрибут указывает, какие стороны рамки, окружающей стол, будут
быть видимым. Возможные значения:
      •   пустота:  Нет сторон. Это значение по умолчанию.
      •   сверху:  Только верхняя сторона.
      •   снизу:  Только нижняя сторона.
      •   стороны:  Только верхняя и нижняя стороны.
      •   vsides:  Только правая и левая стороны.
      •   левая сторона:  Только левая сторона.
      •   правая сторона:  Только правая сторона.
      •   коробка:  Все четыре стороны.
      •   граница:  Все четыре стороны.
        правила  =  нет|группы|строки|столбцы|все  [КИ]
       Этот атрибут указывает, какие правила будут отображаться между ячейками внутри
стол. Рендеринг правил зависит от агента пользователя. Возможные значения:
      •   нет:  Нет правил. Это значение по умолчанию.
      •   групп:  Правила появятся между группами строк (см.  THEAD  ,  TFOOT  и  TBODY  ) и группы столбцов (см.  только COLGROUP  и  COL  ).
      •   строк:  Правила будут отображаться только между строками.
      •   cols:  Правила появятся только между столбцами.
      •   все:  Правила появятся между всеми строками и столбцами.
        граница  =  пикселей  [CN]
       Этот атрибут указывает ширину (только в пикселях) рамки вокруг
table (см. примечание ниже для получения дополнительной информации об этом атрибуте).
       Чтобы различать ячейки таблицы, мы можем установить  атрибут border  элемента  TABLE . Рассмотрим предыдущий
пример:
      <ТАБЛИЦА граница="1"
       summary="Эта таблица отображает количество чашек
                кофе, выпитого каждым сенатором, тип
                кофе (без кофеина или обычный) и
                принимать с сахаром.">

      Чашки кофе, выпитые каждым сенатором

      
   Имя
   Кубки
   Тип кофе
   Сахар?

      
   10
   Эспрессо
   Нет

      
    Дж.  Ужин
   5
   Без кофеина
   Да

 
      

       1 2 3

       4 5 6

       7 8 9

 
       Агенты пользователя должны соблюдать следующие настройки для обратного
совместимость.
      •  Настройка  границы  ="0" подразумевает  кадр  ="пусто" и, если
иначе указано,  правил  = "нет".
      •  Другие значения  граница  подразумевает  кадр  = "граница" и, если не указано иное,  правила  = "все".
      •  Значение "border" в начальном теге элемента  TABLE  должно быть
интерпретируется как значение атрибута кадра  . Это подразумевает  правила  = "все" и некоторое значение по умолчанию (ненулевое) для  граница  атрибут.
       Например, следующие определения эквивалентны:
      <ТАБЛИЦА граница="2">

      , а также следующие:
      <Граница ТАБЛИЦЫ>

      
 
         Примечание.  Атрибут  border  также определяет
поведение границ для элементов  OBJECT  и  IMG , но принимает разные
значения этих элементов. 
       11.3.2 Горизонтальное и вертикальное выравнивание 
       Следующие атрибуты могут быть установлены для разных элементов таблицы (см.
определения).
      
 выравнивание  (по левому краю | по центру | по правому краю | по ширине | символ) # ПРЕДПОЛАГАЕТСЯ
     символов  % символов; #ПРЕДПОЛАГАЕТСЯ -- выравнивание символа, например. символ = ':' --
     уголь  %Длина; #ПРЕДПОЛАГАЕТСЯ -- смещение для выравнивания char --"
  >

 valign  (верхний | средний | нижний | базовый уровень) # ПРЕДПОЛАГАЕТСЯ"
  >
 
        Определения атрибутов 
        выравнивание  =  слева|по центру|справа|по ширине|char  [КИ]
       Этот атрибут определяет выравнивание данных и обоснование
текст в ячейке. Возможные значения:
      •   слева:  Выровнять данные по левому краю/Выровнять текст по левому краю. Это значение по умолчанию
значение для табличных данных.
      •   center:  Данные по центру/текст с выравниванием по центру. Это значение по умолчанию
значение для заголовков таблицы.
      •   справа:  Данные по правому краю/текст по правому краю.
      •   по ширине:  Двойное выравнивание текста.
      •   char:  Выровнять текст вокруг определенного символа. Если пользовательский агент
не поддерживает выравнивание символов, поведение при наличии этого значения
неопределенные.
        выравнивание  =  верхний|средний|нижний|базовый уровень  [КИ]
       Этот атрибут указывает вертикальное положение данных в ячейке.
Возможные значения:
      •   top:  Данные ячейки находятся на одном уровне с верхней частью ячейки.
      •   посередине:  Данные ячейки центрируются по вертикали внутри ячейки. Этот
является значением по умолчанию.
      •   снизу:  Данные ячейки находятся на одном уровне с нижней частью ячейки.
      •   базовый уровень:  Все ячейки в той же строке, что и ячейка,  атрибут valign  имеет это значение, должен иметь свои текстовые данные
позиционируется так, чтобы первая текстовая строка располагалась на базовой линии, общей для всех ячеек.
в ряду. Это ограничение не применяется к последующим строкам текста в этих
клетки.
        символов  =  символов  [CN]
       Этот атрибут указывает, что один символ в пределах текстового фрагмента должен действовать
как ось для выравнивания. Значением по умолчанию для этого атрибута является десятичное число.
точечный символ для текущего языка, установленный  lang  атрибут (например, точка ("".") на английском языке и запятая (",") на французском языке).
Пользовательские агенты не обязаны поддерживать этот атрибут.
        уголь  =  длина  [CN]
       При наличии этот атрибут указывает смещение до первого вхождения
символа выравнивания в каждой строке. Если строка не включает
символ выравнивания, он должен быть смещен по горизонтали, чтобы закончиться на выравнивании
должность.
       Когда  charoff  используется для установки смещения символа выравнивания,
направление смещения определяется текущим направлением текста (задается параметром  dir  атрибут). В текстах с письмом слева направо (по умолчанию) смещение слева
поле. В текстах с написанием справа налево смещение делается от правого поля. Пользовательские агенты
не обязаны поддерживать этот атрибут.
       Таблица в этом примере выравнивает строку значений валюты по десятичной дроби.
точка. Мы устанавливаем символ выравнивания на "." явно.
      <ТАБЛИЦА граница="1">
<КОЛГРУПП>

      <ГОЛОВА>

      
 

      Овощи Стоимость за килограмм

      

      Салат $1

      Серебряная морковь $10.50

      Золотая репа $100.30

 
       Отформатированная таблица может выглядеть следующим образом:
      ------------------------------
| Овощи |Стоимость за килограмм|
|--------------|--------------|
|Салат | $1 |
|--------------|--------------|
|Серебряная морковь| 10,50 долларов США |
|--------------|--------------|
|Золотая репа| 100,30 долларов США |
------------------------------
 
       Когда содержимое ячейки содержит более одного экземпляра выравнивания
символ, указанный  char  и перенос содержимого, поведение пользовательского агента
неопределенный. Поэтому авторам следует быть внимательными при использовании  символов  .
         Примечание.  Визуальные пользовательские агенты обычно отображают  элементов TH  вертикально и горизонтально по центру ячейки и полужирным шрифтом
масса. 
       Наследование выравнивания
технические характеристики 
       Выравнивание содержимого ячейки может быть указано для каждой ячейки или
унаследовано от вмещающих элементов, таких как строка, столбец или таблица
сам.
       Порядок старшинства (от высшего к низшему) для атрибутов  выровняйте  ,  char  и  charoff  это следующее:
      1.  Атрибут выравнивания, установленный для элемента в данных ячейки (например,  P  ).
      2.  Атрибут выравнивания, установленный для ячейки ( TH  и  TD ).
      3.  Атрибут выравнивания, установленный для элемента группировки столбцов (  COL  и  КОЛГРУПП ). Когда ячейка является частью диапазона с несколькими столбцами, выравнивание
свойство наследуется от определения ячейки в начале
охватывать.
      4.  Атрибут выравнивания, установленный для строки или элемента группировки строк (  TR  ,  THEAD ,  TFOOT  и  TBODY  ). Когда ячейка является частью многострочного диапазона,
свойство выравнивания наследуется от определения ячейки в начале
пролета.
      5.  Атрибут выравнивания установлен для таблицы (  ТАБЛИЦА  ).
      6.  Значение выравнивания по умолчанию.
       Порядок старшинства (от высшего к низшему) атрибута  валайн  (а также другие унаследованные атрибуты  lang  ,  dir  и  стиль  ) выглядит следующим образом:
      1.  Атрибут, установленный для элемента в данных ячейки (например,  P  ).
      2.  Набор атрибутов для ячейки ( TH  и  TD ).
      3.  Атрибут, установленный для строки или элемента группировки строк (  TR  ,  THEAD ,  TFOOT  и  TBODY  ). Когда ячейка является частью многострочного диапазона,
значение атрибута наследуется от определения ячейки в начале
пролет.
      4.  Атрибут, установленный для элемента группировки столбцов (  COL  и  КОЛГРУПП ). Когда ячейка является частью диапазона с несколькими столбцами, атрибут
значение наследуется от определения ячейки в начале диапазона.
      5.  Набор атрибутов для таблицы (  ТАБЛИЦА  ).
      6.  Значение атрибута по умолчанию.
       Кроме того, при рендеринге ячеек горизонтальное выравнивание определяется
столбцы предпочтительнее строк, а для вертикального выравнивания даны строки
предпочтение столбцам.
       Выравнивание ячеек по умолчанию зависит от агента пользователя. Тем не менее, пользователь
агенты должны заменить атрибут по умолчанию на текущую направленность
(т. е. не просто «лево» во всех случаях).
       Пользовательские агенты, которые не поддерживают значение «обоснования»  атрибут align  должен использовать значение унаследованной направленности
на своем месте.
         Примечание.  Обратите внимание, что ячейка может наследовать
атрибут не из его родителя, а из первой ячейки в диапазоне. Это
исключение из общих правил наследования атрибутов. 
       11.3.3 Ячейка
поля 
        Определения атрибутов 
        Cellspacing  =  длина  [CN]
       Этот атрибут указывает, сколько места пользовательский агент должен оставлять между
левой части таблицы и левой части крайнего левого столбца,
верхней части таблицы и верхней части самой верхней строки, и так далее для правого
и дно таблицы. Атрибут также определяет количество места для
оставить между ячейками.
        набивка  =  длина  [CN]
       Этот атрибут определяет расстояние между границей ячейки
и его содержание. Если значением этого атрибута является длина пикселя, все четыре
поля должны быть на этом расстоянии от содержимого. Если значение
атрибут представляет собой процентную длину, верхнее и нижнее поля должны быть одинаковыми
отделены от контента на основе процента доступной вертикали
пространство, а левое и правое поля должны быть одинаково отделены от
контент на основе процента доступного горизонтального пространства.
       Эти два атрибута управляют расстоянием между ячейками и внутри них. Следующее
иллюстрация объясняет, как они соотносятся:
       В следующем примере атрибут  CellsPacing  указывает, что
ячейки должны быть отделены друг от друга и от рамки таблицы двадцатью
пикселей. Атрибут  cellpadding  указывает, что верхнее поле
ячейка и нижнее поле ячейки будут отделены от
содержимого на 10% доступного вертикального пространства (всего 20%).
Точно так же левое поле ячейки и правое поле ячейки будут
каждая должна быть отделена от содержимого ячейки на 10% доступной горизонтальной
пространство (всего 20%).
       Синтезатор речи может представить эту таблицу следующим образом:
      Надпись: Чашки кофе, выпитые каждым сенатором
Резюме: В этой таблице показано количество чашек
         кофе, выпитого каждым сенатором, тип
         кофе (без кофеина или обычный) и
         принимать с сахаром.
Имя: Т. Секстон, Чашек: 10, Тип: Эспрессо, Сахар: Нет
Название: J. Dinnen, Стаканчики: 5, Тип: Без кофеина, Сахар: Да
 
       Обратите внимание, что заголовок «Тип кофе» сокращен до «Тип» с помощью  сокр.  атрибут.
       Вот тот же пример, заменяющий атрибут  области действия  на атрибут .
заголовки  атрибут. Обратите внимание на значение «col» для осциллографа  .
атрибут, означающий «все ячейки в текущем столбце»:
      <ТАБЛИЦА граница="1"
       summary="Эта таблица отображает количество чашек
                кофе, выпитого каждым сенатором, тип
                кофе (без кофеина или обычный) и
                принимать с сахаром. ">

      
   <ТД>Т. Секстон
       Вот несколько более сложный пример, иллюстрирующий другие значения для .
атрибут области :
      

       Данные1 Данные2 Данные3

 
       Если таблица или данный столбец имеют фиксированную ширину,  cellpacing  и  cellpadding  может потребовать больше места, чем
назначенный. Пользовательские агенты могут давать этим атрибутам приоритет над атрибутами . атрибут width  при возникновении конфликта, но не обязательно.
       11.4.1 Связывание заголовка
информация с ячейками данных 
       Невизуальные пользовательские агенты, такие как синтезаторы речи и устройства на основе Брайля
могут использовать следующие атрибуты элементов  TD  и  TH  для отображения ячеек таблицы.
интуитивно:
      •  Для данной ячейки данных атрибут  заголовков  перечисляет, какие ячейки
предоставлять соответствующую информацию в заголовке. Для этого каждая ячейка заголовка должна
быть назван с использованием атрибута  id . Обратите внимание, что не всегда возможно сделать
чистое разделение ячеек на заголовки или данные. Вы должны использовать  ТД  элемент
для таких клеток вместе с  id  или  Scope  атрибуты в зависимости от ситуации.
      •  Для данной ячейки заголовка  Атрибут scope  сообщает пользовательскому агенту ячейки данных, для которых этот
заголовок предоставляет информацию. Вместо этого авторы могут использовать этот атрибут.
из  заголовки  по какому удобнее; два атрибута
выполнять ту же функцию. Обычно требуется атрибут  заголовков .
когда заголовки расположены в неправильном положении по отношению к данным, которые они
обратиться к.
      •  Атрибут  abbr  указывает сокращенный заголовок для
ячейки заголовка, чтобы пользовательские агенты могли отображать информацию заголовка более
быстро.
       В следующем примере мы назначаем заголовок ячейкам, устанавливая  заголовки  атрибут. Каждая ячейка в одном столбце относится к одному и тому же
ячейка заголовка (через атрибут  id ).
      <ТАБЛИЦА граница="1"
       summary="Эта таблица отображает количество чашек
                кофе, выпитого каждым сенатором, тип
                кофе (без кофеина или обычный) и
                принимать с сахаром.">

      Чашки кофе, выпитые каждым сенатором

      
   Имя
   Кубки
   Тип кофе
   Сахар?

      
   Т.  Секстон
   10
   Эспрессо
   Нет

      
   Дж. Ужин
   5
   Без кофеина
   Да

 
      Чашки кофе, выпитые каждым сенатором

      
   Имя
   Кубки
   Тип кофе
   Сахар?

      
   10
   Эспрессо
   Нет

      
    Дж. Ужин
   5
   Без кофеина
   Да

 
      
    <ТД>Доктор.  Джон Роутон
       Графический пользовательский агент может отобразить это как:
       Обратите внимание на использование атрибута области   со значением "row". Хотя
первая ячейка в каждой строке содержит данные, а не информацию заголовка, область   Атрибут заставляет ячейку данных вести себя как ячейку заголовка строки. Это позволяет говорить
синтезаторы предоставить соответствующее название курса по запросу или указать его
непосредственно перед содержимым каждой ячейки.
       11.4.2 Категоризация
ячейки 
       Пользователи, просматривающие таблицу с помощью пользовательского агента на основе речи, могут захотеть услышать
объяснение содержимого ячейки в дополнение к самому содержимому. Один
способ, которым пользователь может дать объяснение, - произнести связанный заголовок
информацию перед произнесением содержимого ячейки данных (см. раздел о связывании информации заголовка с ячейками данных).
       Пользователям также может понадобиться информация о более чем одной ячейке, и в этом случае
информация заголовка, предоставляемая на уровне ячейки (по  заголовки  ,  область  и  аббр  ) могут не обеспечивать адекватный контекст. Рассмотрим следующую таблицу, в которой классифицируются расходы на питание, проживание и проживание.
транспорт в двух местах (Сан-Хосе и Сиэтл) в течение нескольких дней:
       Пользователи могут захотеть извлечь информацию из таблицы в виде
запросов:
      •  "Сколько я тратил на все свои обеды?"
      •  "Сколько я потратил на еду 25 августа?"
      •  "Сколько я потратил на все расходы в Сан-Хосе?"
       Каждый запрос включает в себя вычисление пользовательским агентом, которое может включать ноль или
больше клеток. Для того, чтобы определить, например, затраты на питание на 25
Август, пользовательский агент должен знать, какие ячейки таблицы относятся к «Еде» (все
их) и которые относятся к "Даты" (в частности, 25 августа), и найти
пересечение двух множеств.
       Чтобы приспособить этот тип запроса, табличная модель HTML 4 позволяет авторам
поместите заголовки ячеек и данные в категории. Например, для путешествия
таблица расходов, автор может сгруппировать ячейки заголовка "Сан-Хосе" и "Сиэтл"
в категорию «Местоположение», заголовки «Питание», «Отели» и «Транспорт» в
в категорию «Расходы» и четыре дня в категорию «Свидание». предыдущие три вопроса будут иметь следующие значения:
      •  "Сколько я тратил на все свои обеды?" означает «Каковы все ячейки данных в
категория "Расходы=Питание"?
      •  "Сколько я потратил на еду 25 августа?" означает "Какие все данные
ячейки в категориях «Расходы = Питание» и «Дата = 25 августа 1997 г.»?
      •  "Сколько я потратил на все расходы в Сан-Хосе?" означает «Что такое все
ячейки данных в полях «Расходы=Питание, Гостиницы, Транспорт» и «Местоположение=Сан-Хосе».
категории?
       Авторы классифицируют заголовок или ячейку данных, устанавливая  ось  атрибут для ячейки. Например, в таблице командировочных расходов ячейка
содержащую информацию «Сан-Хосе», можно было поместить в «Местоположение».
категория следующим образом:
        
       Любая ячейка, содержащая информацию, относящуюся к «Сан-Хосе», должна ссылаться на это
ячейка заголовка через  заголовки  или атрибут  области действия . Таким образом, еда
расходы на 25 августа 1997 года должны быть отмечены для ссылки на  id  атрибут (значение которого здесь «a6») ячейки заголовка «Сан-Хосе»:
        
  
       Каждый  Атрибут headers  предоставляет список ссылок  id . Таким образом, авторы могут
категоризировать данную ячейку любым количеством способов (или по любому количеству
«заголовки», отсюда и название).
       Ниже мы размечаем таблицу командировочных расходов с информацией о категории:
      <ТАБЛИЦА граница="1"
          summary="Эта таблица суммирует командировочные расходы
                   понесенные во время августовских поездок в
                   Сан-Хосе и Сиэтл">
<ЗАГОЛОВОК>
  Отчет о командировочных расходах


      
  <ПД>90,00
       Обратите внимание, что такая разметка таблицы также позволяет агентам пользователя избегать
введение пользователя в заблуждение нежелательной информацией. Например, если речь
синтезатор должен был произнести все цифры в колонке "Питание" этого
таблице в ответ на запрос «Каковы были все мои расходы на еду?», пользователь
не уметь отличать дневные расходы от промежуточных или итоговых сумм. По
Тщательно классифицируя данные ячеек, авторы позволяют агентам пользователя делать важные
смысловые различия при рендеринге.
       Конечно, нет никаких ограничений на то, как авторы могут классифицировать информацию в
стол. Например, в таблице командировочных расходов мы могли бы добавить дополнительные
категории "промежуточные итоги" и "итоговы".
       Эта спецификация не требует, чтобы пользовательские агенты обрабатывали информацию
предоставляется атрибутом оси  , а также не дает никаких рекомендаций по
как пользовательские агенты могут представлять  ось  информация для пользователей или как пользователи могут запрашивать
пользовательский агент об этой информации.
       Однако пользовательские агенты, особенно речевые
синтезаторы, возможно, захочется выделить информацию, общую для нескольких
ячейки, являющиеся результатом запроса. Например, если пользователь спрашивает: «Что сделал
я трачу на еду в Сан-Хосе?», пользовательский агент сначала определял ячейки
в вопросе (25 августа 1997 г.: 37.74, 26 августа 1997 г.: 27.28), затем сделайте это
Информация. Пользовательский агент, произносящий эту информацию, может прочитать ее:
      .
         Место: Сан-Хосе. Дата: 25 августа 1997 г. Расходы, Питание: 37,74
   Место: Сан-Хосе. Дата: 26 августа 1997. Расходы, Питание: 27.28
 
       или, более компактно:
         Сан-Хосе, 25 августа 1997 г., питание: 37,74.
   Сан-Хосе, 26 августа 1997 г., приемы пищи: 27.28
 
       Еще более экономный рендеринг будет учитывать общую информацию и
переупорядочить:
         Сан-Хосе, питание, 25 августа 1997 г.: 37,74.
                    26 августа 1997 г.: 27,28
 
       Пользовательские агенты, поддерживающие этот тип рендеринга, должны разрешать
означает настройку рендеринга (например, с помощью таблиц стилей).
       11.4.3 Алгоритм поиска
информация о курсе 
       При отсутствии информации в заголовке из области   или  атрибут headers , пользовательские агенты могут создавать информацию заголовка
по следующему алгоритму. Цель алгоритма состоит в том, чтобы найти
упорядоченный список заголовков. (В последующем описании алгоритма предполагается, что направленность таблицы равна
слева направо.)
      •  Сначала выполните поиск слева от позиции ячейки, чтобы найти ячейки заголовков строк. затем
поиск вверх, чтобы найти ячейки заголовков столбцов. Поиск в заданном направлении
останавливается при достижении края таблицы или при обнаружении ячейки данных после
ячейка заголовка.
      •  Заголовки строк вставляются в список в том порядке, в котором они появляются в
стол. Для таблиц слева направо заголовки вставляются слева направо.
      •  Заголовки столбцов вставляются после заголовков строк в том порядке, в котором они появляются
таблице сверху вниз.
      •  Если ячейка заголовка имеет  заголовков  набор атрибутов, затем заголовки
ссылки по этому атрибуту вставляются в список и поиск прекращается
для текущего направления.
      •   ТД 9Ячейки 1326, для которых задан атрибут оси  , также обрабатываются как
ячейки заголовка.
       В этом примере показаны сгруппированные строки и столбцы. Пример адаптирован
из книги «Разработка международного программного обеспечения» Надин Кано.
       В "ascii art" следующая таблица:
      
  
      
    Общественные курсы — Бат, осень 1997 г.
  
      
  
      
    Название курса
    Репетитор курса
    Сводка
    Код
    Плата
  
      
  
      
    После Гражданской войны
    
       Курс исследует неспокойные годы в Англии
       после 1646. 6 еженедельных встреч, начиная с понедельника 13-го
      Октябрь.
    
    h37
    £32
  
      
  
      
    Введение в англо-саксонскую Англию
    Марк Коттл
    
       Однодневный курс, посвященный раннему средневековью
       периода реконструкции англо-саксов и
       их общество. Суббота, 18 октября.
    
    h38
    £18
  
      
  
      
    Слава Греции
    Валери Лоренц
    
     Родина демократии, философии, сердце театра, родина
     аргумент. Римляне, возможно, сделали это, но это сделали греки.
     первый. Суббота, дневная школа, 25 октября, 19 октября.97
    
    h40
    £18
  
      

 
      Сан-Хосе
 37,74
 
      
  
  Питание
  Гостиницы
  Транспорт
  промежуточные итоги

      

      
  Сан-Хосе
  
  
  
  

      

      
  25 авг.  97
  37,74
  112,00
  45,00
  

      

      
  26 августа 97 г.
  27.28
  112,00
  45,00
  

      

      
  промежуточные итоги
  65.02
  224,00
  379.02

      

      
  Сиэтл
  
  
  
  

      

      
  27 августа 97 г.
  96,25
  109,00
  36,00
  

      

      
  28 августа 97
  35,00
  109,00
  36,00
  

      

      
  промежуточные итоги
  131,25
  218,00
  72,00
  421,25

      

      
  Итого
  196,27
  442,00
  162,00
  800,27

      

 
       Сохраните код с расширением . html и откройте его в браузере. Он отобразит следующий вывод: 
       2. Заголовок таблицы 
       Заголовок таблицы можно задать с помощью тега  <  caption  > .  Пример 
       

<голова>
Использование тега таблицы HTML

<тело>
<граница таблицы = "1">

       Приведенный выше код отобразит следующий вывод:
       3. Интервал между ячейками таблицы 
       Пространство между ячейками таблицы можно определить с помощью атрибута cellpacing. Атрибут Cellspacing указывает расстояние между ячейками таблицы.
        Пример 
       

<голова>
Использование тега таблицы HTML

<тело>
<граница таблицы = "1" Cellspacing = "5">

       Приведенный выше код отобразит следующий вывод:
       4.
       Заполнение ячеек таблицы
       Заполнение ячеек таблицы можно определить с помощью атрибута cellpadding. Расстояние атрибута cellpadding между границей ячейки таблицы и данными.
        Пример 
       

<голова>
Использование тега таблицы HTML

<тело>
<граница таблицы = "1" cellpadding = "5">

       Приведенный выше код отобразит следующий вывод:
       5. Атрибуты диапазона столбцов и строк 
       Две или более строк таблицы можно объединить в одну строку с помощью атрибута rowspan, а столбцы таблицы можно объединить в одну строку. один столбец с помощью атрибута colspan.
        Пример 
       

<голова>
Использование тега таблицы HTML

<тело>
<граница таблицы = "1">

       Код отобразит следующий вывод:
       6.
       Фон для таблицы
       Фон таблицы можно создать с помощью атрибута bgcolor. Границу ячейки таблицы можно указать с помощью атрибута border-color.
        Пример 
       

<голова>
Использование тега таблицы HTML

<тело>

      
ПОДДЕРЖКА КОДОВЫХ СТРАНИЦ В MICROSOFT WINDOWS






      
Кодовая страница
      ID
      		Имя
ACP
ОЕМКП
Windows
      NT 3.1
      		Windows
      NT 3.51
      		Windows
      95

      

      1200Unicode (BMP ISO/IEC-10646)XX*

      1250Windows 3.1 Восточной ЕвропыXXXX

      1251Windows 3.1 КириллицаXXXX

      1252Windows 3.1 США (ANSI)XXXX

      1253Windows 3.1 ГреческийXXXX

      1254Windows 3. 1, турецкийXXXX

      1255ИвритXX

      1256АрабскийXX

      1257БалтийскийXX

      1361Корейский (Johab)X**X

      

      437MS-DOS СШАXXXX

      708Арабский (ASMO 708)XX

      709Арабский (ASMO 449+, BCON V4)XX

      710Арабский (прозрачный арабский)XX

      720Арабский (прозрачный ASMO)XX

 
       будет отображаться примерно так:
                        ПОДДЕРЖКА КОДОВЫХ СТРАНИЦ В MICROSOFT WINDOWS
================================================== ==============================
Кодовая страница | Имя | АКП OEMCP | Windows Windows Windows
    ID | | | НТ 3,1 НТ 3,51 95
-------------------------------------------------- -----------------------------
   1200 | Юникод (BMP ISO 10646) | | Х Х *
   1250 | Windows 3.1 Восточно-Европейский | Х | Х Х Х
   1251 | Windows 3. 1 Кириллица | Х | Х Х Х
   1252 | Windows 3.1 США (ANSI) | Х | Х Х Х
   1253 | Windows 3.1 греческий | Х | Х Х Х
   1254 | Windows 3.1 турецкий | Х | Х Х Х
   1255 | иврит | Х | Икс
   1256 | арабский | Х | Икс
   1257 | Балтика | Х | Икс
   1361 | Корейский (Джохаб) | Х | **      ИКС
-------------------------------------------------- -----------------------------
    437 | MS-DOS США | Х | Х Х Х
    708 | арабский (ASMO 708) | Х | Икс
    709| Арабский (ASMO 449+, BCON V4) | Х | Икс
    710 | арабский (прозрачный арабский) | Х | Икс
    720 | Арабский (прозрачный ASMO) | Х | Икс
================================================== ==============================
 
       Графический пользовательский агент может отобразить это как:
       В этом примере показано, как  COLGROUP  можно использовать для группировки столбцов.
и установите выравнивание столбца по умолчанию. Точно так же  ТБОДИ  есть
используется для группировки строк.  кадр  и  правила  атрибуты сообщают пользовательскому агенту
какие границы и правила отображать.
       предыдущий   следующий
содержимое   элементы   атрибуты
индекс
       Полное руководство, 4-е издание) 
      , которые определяют каждый
строка содержимого таблицы вместе с различными тегами секционирования таблицы:,,,и <группа>.
       10.2.1.1. Атрибут align (устарел) 
       В стандартах HTML 4 и XHTML этот атрибут объявлен устаревшим в пользу свойства align, предоставляемого каскадными таблицами стилей. Тем не менее, он остается популярным и в настоящее время хорошо поддерживается популярными браузерами.
       Как и изображения, таблицы представляют собой прямоугольные объекты, плавающие в браузере.
дисплей, выровненный в соответствии с текущим текстовым потоком. Как правило,
браузер выравнивает таблицу по левому краю, примыкая ее левый край к левому краю
границы окна дисплея. Или таблица может быть центрирована, если под
влияние тега
      , по центру
абзац или раздел по центру. Однако, в отличие от изображений, таблицы
не встроенные объекты. Текстовое содержимое обычно размещается над и под
стол, а не рядом с ним. Вы можете изменить это поведение дисплея с помощью
выравнивание атрибута для
тег <таблица>.
       Атрибут align принимает значение либо
слева, по центру или
вправо, указывая на то, что таблица должна быть размещена
вровень с левым или правым полем текста, с
текст, обтекающий стол, или посередине с обтекаемым текстом
над и под.
       Обратите внимание, что атрибут align внутри
Тег
       HTML и XHTML: полное руководство, 4-е издание
       С помощью всего пяти тегов можно создать широкий спектр таблиц:
Тег
      , который инкапсулирует таблицу и
его элементы в теле документа; в
тег, определяющий строку таблицы; в
теги, <столбец>, <тело>, и
теги. Каждый тег имеет один или несколько
обязательные и необязательные атрибуты, некоторые из которых влияют не только на
сам тег, но и связанные теги.
       10.2.1. Тег 
       и,
которые определяют заголовки и ячейки данных таблицы; и
Тег
      , определяющий заголовок или
подпись к таблице. Помимо этих основных тегов, вы также можете определить
и управлять целыми разделами таблиц, включая добавление запущенных
верхние и нижние колонтитулы с
       Тег
       и его
Конечный тег
       определяет и инкапсулирует
таблицу в теле документа. Если не указано иное
в окне браузера по таблице стилей, абзацу, уровню раздела,
или другие параметры выравнивания, браузер останавливает текущий поток текста,
разрывает строку, вставляет таблицу, начиная с новой строки, а затем
перезапускает поток текста на новой строке под таблицей.
       <таблица>
        Функция: 
       Определить таблицу
        Атрибуты: 
       ALIGN
       ONCLICK
       BACKGROUND
       ONDBLCLICK
       BGCOLOR
       ONKEYDOWN
       BORDER
       ONKEYPRESS
       БОРДЕРЦОЛОР
       ONKEYUP
       BORDERCOLORLIGHT
       ONMOUSEMOVE
       CELLPADDING
       ONMOUSEOUT
       CELLSPACING
       ONMOUSEOVER
       CLASS
       ONMOUSEUP
       ЦВЕТЫ
       ПРАВИЛА
       DIR
       STYLE
       FRAME
       SUMMARY
       HEIGHT
       TITLE
       HSPACE
       VALIGN
       ID
       VSPACE
       ЯЗЫК
       ШИРИНА 6 3 3 30036
       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, "
Теги и"). Тег
        Функция: 
       Определить строку в таблице
        Атрибуты: 
       ALIGN
       ONDBLCLICK
       BGCOLOR
       ONKEYDOWN
       BORDERCOLOR
       ONKEYPRESS
       BORDERCOLORDARK
       ONKEYUP
       BORDERCOLORLIGHT
       ONMOUSEDOWN
       CHAR
       ONMOUSEMOVE
       CHAROFF
       ONMOUSEOUT
       CLASS
       ONMOUSEUP
       DIR
       ONMOUSEUP
       ID
       Стиль
       LANG
       Титул
       NowRAP
       NowRAP
       NowRap
       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 
      		 и
        Функция: 
       Определить данные таблицы и ячейки заголовка
        Атрибуты: 
      0036
       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. Атрибут rowspan 
       Просто
поскольку атрибут 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. 2.2, «Общие атрибуты таблиц». Используй их
в хорошем здравии. Просто не забудьте использовать контекстный селектор
ЗАГОЛОВОК ТАБЛИЦЫ при обращении к стилям заголовков на
уровне документа или во внешних таблицах стилей.
       10. Столы 10.3. Новейшие теги таблицы
       Copyright © 2002 O'Reilly & Associates. Все права защищены.
       Теги таблицы HTML | Изучите примеры тегов таблицы HTML с синтаксисом 
       Таблица HTML предоставляет способ получения или определения данных, таких как текст, изображения, ссылки и т. д., с точки зрения строк и столбцов ячеек. Таблицы HTML можно создавать с помощью тега
      . По умолчанию данные таблицы выравниваются по левому краю. В этом разделе мы собираемся узнать о тегах таблиц HTML.
       Таблицу можно создать с помощью тегов
      .
      •  Тег
       указывает строки таблицы, которые используются для создания строки.
       Табличные данные могут быть структурированы внутри
      , и
       определяет заголовок таблицы.
    •  Тег
      		•  указывает ячейки данных таблицы, которые используются для создания столбца.
    •  Тег
      • содержимого таблицы
       с многочисленными элементами таблицы.
        Синтаксис 
       <таблица>

      
Заголовок таблицы 1
Заголовок таблицы 2

      

      
Ячейка данных 1
Ячейка данных 2

      

      
Ячейка данных 3
Ячейка данных 4

      

       
       Примеры HTML-тегов таблицы 
       Ниже приведены примеры HTML-тегов таблицы
       1. Использование основной таблицы 
       

<голова>
Использование тега таблицы HTML

<тело>
<граница таблицы = "1">

      
Имя
Страна

      

      
Дони
Индия

      

      
Дэвид Миллер
Южная Африка

      

      
Джо Рут
Англия

      
       Это заголовок таблицы

      
Имя
Страна

      

      
Дони
Индия

      

      
Дэвид Миллер
Южная Африка

      

      
Джо Рут
Англия

      

 
      
Имя
Страна

      

      
Дони
Индия

      

      
Дэвид Миллер
Южная Африка

      

      
Джо Рут
Англия

      

 
      
Имя
Страна

      

      
Дони
Индия

      

      
Дэвид Миллер
Южная Африка

      

      
Джо Рут
Англия

      

 
      
Столбец 1
Второй столбец
Третий столбец

      

      
Первая строка
Ряд второй
Третий ряд

      

      
Четвертый ряд
Пятый ряд

      

      
Шестая строка

      

 
       Выполните приведенный выше код, и он отобразит следующий вывод:
       7. Высота и ширина таблицы 
       Высоту и ширину таблицы можно задать с помощью атрибутов ширины и высоты.
        Пример 
       

<голова>
Использование тега таблицы HTML

<тело>
<граница таблицы = "1" ширина = "500" высота = "250" bgcolor = "голубой">

       Приведенный выше код отобразит следующий вывод:
       8.
       Стилизация ячеек таблицы
        Пример 
       

<голова>
Использование тега таблицы HTML

<стиль>
стол, т, тд {
граница: 1px сплошной красный;
граница коллапса: коллапс;
}
й, тд {
отступ: 15 пикселей;
}
table#mytable tr:nth-child(even) {
цвет фона: #FAD7A0;
}
table#mytable tr:nth-child(нечетный) {
цвет фона: #E67E22;
}
таблица # mytable th {
белый цвет;
цвет фона: бирюзовый;
}

<тело>
<граница таблицы = "1" ширина = "450" ​​высота = "350">

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

<голова>
Использование тега таблицы HTML

<тело>
<граница таблицы = "1" ширина = "500" высота = "250">

      
<тд>
<граница таблицы = "1" ширина = "500" высота = "250" bgcolor = "голубой">

       Приведенный выше код отобразит следующий вывод:
       Атрибуты таблицы 
      •   align:  Этот атрибут обеспечивает выравнивание содержимого внутри элемента.
      •   bgcolor:  Этот атрибут указывает цвет фона для таблицы.
      •   граница:  Этот атрибут определяет границу ячеек таблицы.
      •   cellpadding:  Этот атрибут отображает заполнение между ячейками таблицы и содержимым таблицы.
      •   Cellspacing:  Этот атрибут отображает расстояние между ячейками таблицы.
      •   frame:  Указывает, какие части внешних границ видны.
      •   rules:  Указывает, какие части внутренних границ видны.
      •   sortable:  Этот атрибут сообщает, что таблица сортируема.
      •   сводка:  Указывает тип содержимого таблицы.
      •   ширина:  Этот атрибут указывает ширину таблицы.
      •   height:  Этот атрибут определяет высоту таблицы.
       Заключение 
       До сих пор мы изучали различные типы табличных тегов в HTML. В примерах показано использование стилей таблицы, вложение одной таблицы в другую, установка высоты и ширины таблицы, добавление интервалов и отступов для ячеек таблицы, применение цвета фона для таблицы и многое другое.
      No related posts.
      Добавить комментарий 
      Ваш адрес email не будет опубликован. Обязательные поля помечены *
       
       
        
       
      

      
Имя
Страна

      

      
Дони
Индия

      

      
Дэвид Миллер
Южная Африка

      

      
Джо Рут
Англия

      

 
      
Имя
Страна

      

      
Дони
Индия

      

      
Дэвид Миллер
Южная Африка

      

      
Джо Рут
Англия

      

 
      
Имя
Страна

      

      
Дони
Индия

      

      
Дэвид Миллер
Южная Африка

      

      
Джо Рут
Англия

      

 
      
Имя
Страна

      

      
Дони
Индия

      

      
Дэвид Миллер
Южная Африка

      

      
Джо Рут
Англия