HTML Cookbook Таблиці

1. Введення

Ця сторінка представляє опис набору процедур, що Федеральне агентство може використовувати при розробці своїх HTML-таблиць. Це особисте переконання Стів Фергі про те, що слідуючи цим процедурам може призвести до виробництва HTML-таблиці, які відповідають положенням розділу 508.

2. Терміни, використані в цьому документі

Порожню клітинку

Порожні осередки в HTML-таблиці TD або TH клітинку, яка містить не подання змісту. В основній HTML-код, клітина містить тільки пробіли або   Вираз клітинку, яка містить текст відноситься до осередку, не порожній, тобто до комірки, яка містить представлення змісту.

Регулярні таблиці

Звичайна таблиця є таблицею, в якій клітинки заголовків розташовані у верхній частині таблиці (як осередків заголовків стовпців) і вниз по лівій стороні таблиці (як клітини рядком заголовка). Якщо таблиця містить кілька рівнів, щоб заголовки рядків і стовпців, то рядки і осередків заголовків стовпців розташовані в строгій ієрархічній порядку.

Точніше, звичайної таблиці визначається як таблицю з наступними характеристиками.

• Осередки даних не може відбутися вище, або з лівого боку, осередки заголовка.
• Клітинку, яка містить текст не може поширюватися на декілька стовпців, ніж клітина, яка відбувається над ним.
• Клітинку, яка містить текст не може поширюватися на кілька рядків, ніж клітина, яка відбувається зліва від нього.
• Відступ заголовки рядків точно вказує на ієрархічний порядок цих заголовків.

Нерегулярні таблиці

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

Внутрішні ідентифікатори

Внутрішні ідентифікатори ідентифікатори, які є невидимими для користувачів. Вони використовуються в HTML-код для веб-сторінок для підтримки гіперпосилань.

Деякі методи, обговорювані в цій статті потрібно використовувати, якщо внутрішні ідентифікатори. Внутрішні ідентифікатори, що використовуються в ID і HEADER атрибути "ТД" і "ТД" тегів, а в HREF, ID і NAME атрибути "" (якір) теги.

Формат для внутрішніх ідентифікаторів:

<table_identifier>.<identifier_type>.<period-separated-list>

1. Перша частина внутрішній ідентифікатор повинен бути ідентифікатор таблиці. Ідентифікатор таблиці повинні починатися з рядкова буква, і може містити лише цифри, рядкові букви та підкреслення.
2. Друга частина внутрішнього ідентифікатора ідентифікатор типу. Це має бути одне з наступних дій:
   • мала літера «с» для осередків заголовків стовпців
   • рядкова буква «р» для осередків заголовка рядка
   • рядкова буква "е" для виносок
3. Для осередків заголовок стовпця або рядка, третю частину внутрішнього ідентифікатора повинен бути період комами список цілих чисел. Цілі числа повинні бути в ієрархічному порядку, починаючи з найвищого рівня і приступити до низькому рівні.
4. Для клітинки заголовка заглушки, третю частину внутрішнього ідентифікатора повинен бути "0".
5. Для виноски, частина 3, має бути ціле число або один символ нижнього регістра.

Ось кілька прикладів.

3. Правила HTML-таблиці

Правила для звичайних таблиць

1. Усі таблиці повинні відповідати HTML 4.01 рекомендації.
2. Створити <CAPTION> елемент провести назва таблиці.
3. Магазин кожен фрагмент даних у комірки TD.
4. Магазин кожному рядку і стовпці заголовків у тому осередку.
5. Greenbar - Якщо таблиця створюється людиною («від руки»), то використання greenbar не є обов'язковим. Якщо таблиця генерується автоматично, то використання greenbar не потрібно, і повинні відповідати правилам для greenbar (див. нижче).
6. Рядків, що містять рядки заголовків стовпців буде міститися елемент THEAD.
7. Рядки, що містять рядки заголовка тіла будуть міститися TBODY елементом.
8. Якщо заголовки рядків вкладені (розбиті на декілька рівнів), потім ідуть процедури для вкладених заголовків рядків (див. нижче).
9. Якщо файл містить виноски, а потім виконайте процедурам для виносок (див. нижче).

Правила Нерегулярні Таблиці

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

1. Використання атрибутів заголовків, необхідні для TD клітини, які з кількох стовпців. HEADERS атрибут клітини TD повинен містити внутрішні ідентифікатори для всіх осередків заголовків, які містять інформацію заголовка для клітини. Зверніть увагу, що це включає в себе заголовки рядків, а також заголовки стовпців, а також (якщо таблиця містить вкладені заголовки) внутрішні ідентифікатори для вкладених заголовків весь шлях до кореня.

Деякі Приклад таблиці

Вихідний код для прикладу Таблиця 1а

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="1" >

<CAPTION><SPAN CLASS="tableTitle">Example Table 1a: Ruritanian Ore
Production </SPAN></CAPTION>
<THEAD>
    <TR>
    <TH>&nbsp;</TH>
    <TH>2000</TH>

    </TR>
</THEAD>
<TBODY>
    <TR>
    <TH><P CLASS="sub0">Iron Ore</P> </TH>

    <TD><P CLASS="dataCell">999.99</P> </TD>
    </TR>
</TBODY>
</TABLE>

Вихідний код для прикладу 1б Таблиця

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="1" >

<CAPTION><SPAN CLASS="tableTitle">Example Table 1b: Ruritanian Ore
Production </SPAN></CAPTION>
<THEAD>
    <TR>
    <TH>&nbsp;</TH>
    <TH>2000</TH>

    <TH>2001</TH>
    <TH>2002</TH>
    </TR>
</THEAD>

<TBODY>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Iron ~~~~~~~~~~~~~~~~~~~~~ -->
    <TR>
    <TH><P>Iron Ore</P> </TH>
    <TD>

    <P CLASS="dataCell">999.99</P> </TD>
    <TD><P CLASS="dataCell">999.99</P> </TD>
    <TD><P CLASS="dataCell">999.99</P> </TD>

    </TR>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Copper ~~~~~~~~~~~~~~~~~~~~~ -->
    <TR CLASS="greenbar">
    <TH><P>Copper Ore</P> </TH>

    <TD><P CLASS="dataCell">999.99</P> </TD>
    <TD><P CLASS="dataCell">999.99</P> </TD>
    <TD><P CLASS="dataCell">999.99</P> </TD>

    </TR>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Tin ~~~~~~~~~~~~~~~~~~~~~ -->
    <TR>
    <TH><P>Tin Ore</P> </TH>

    <TD><P CLASS="dataCell">999.99</P> </TD>
    <TD><P CLASS="dataCell">999.99</P> </TD>
    <TD><P CLASS="dataCell">999.99</P> </TD>

    </TR>

</TBODY>
</TABLE>

Вихідний код для прикладу Таблиця 1c

<table cellspacing="0" cellpadding="0" border="1" >

<caption><span class="tableTitle">Example Table 1c: Ruritanian Ore Production </span></caption>

<thead>
<tr>
    <th class="stubhead" rowspan="3">Ruritanian Raw Materials Production</th>
    <th colspan="4">By Weight</th>

    <th colspan="4">By Value</th>
</tr>

<tr>
    <th colspan="2">Adjusted</th>
    <th colspan="2">Unadjusted</th>

    <th colspan="2">Adjusted</th>
    <th colspan="2">Unadjusted</th>
</tr>

<tr>
    <th>2001</th>

    <th>2002</th>
    <th>2001</th>
    <th>2002</th>
    <th>2001</th>

    <th>2002</th>
    <th>2001</th>
    <th>2002</th>
</tr>

</thead>

<tbody>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Iron ~~~~~~~~~~~~~~~~~~~~~ -->
<tr>
    <th><p class="sub0">Iron Ore</p></th>
    <td><p class="dataCell">999.99</p></td>

    <td><p class="dataCell">999.99</p></td>
    <td><p class="dataCell">999.99</p></td>
    <td><p class="dataCell">999.99</p></td>

    <td><p class="dataCell">999.99</p></td>
    <td><p class="dataCell">999.99</p></td>
    <td><p class="dataCell">999.99</p></td>

    <td><p class="dataCell">999.99</p></td>
</tr>

<... snip ...>

</tbody>
</table>

4. Правила Виноски

Для того, щоб обговорити виноски ясно, що нам необхідно ввести деякі технічні терміни.

ID бази Виноска

ID бази виноска букву, цифру або слово, яке використовується для ідентифікації виноски. Приклади ідентифікаторів бази виноски є "1", "2", "р" і "Примітка".

ID Презентація Виноска

ID презентації виноску це те, що бачить користувач, коли він дивиться на виноску ідентифікатор. ID презентації виноска складається з ідентифікатора бази виноску, укладені в дужки, а потім укладено в SPAN теги з атрибутом класу = "виноску". Ось приклад:

Бачите	HTML-код	Коментар
1	1	ID бази виноску
(1)	(1)	ID бази виноски полягає в круглі дужки
(1)	<span class="footnote">(1)</span>	ID презентації виноски.

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

Два різних ролей для ідентифікаторів Презентація Виноска - як виноски і виноски мети

ID презентації виноска може грати дві різні ролі, або виконувати дві різні функції залежно від його розташування в таблиці.

• Коли він з'являється в теле таблиці, він виконує функцію виноски, посилаючись на виноску.
• Коли він з'являється в ПРИМІТКИ частині таблиці, вона виконує функцію виноску мети.

Виноски

1. HTML-кодування для виноски є ідентифікатором презентації виноску, загорнуті в якір ("") теги. Якір тег повинен містити атрибут HREF, значенням якого є знак фунта (#) слідують ID виноску презентації. Наприклад, якщо HTML для ID виноску презентації: <span class="footnote">(1)</span> Потім HTML для виноску посилання <a href="#table6.f.1"><span class="footnote">(1)</span></a>
2. У заголовку комірки, виноски повинні відбутися в правій або задньої, в кінці тексту у клітинці. У заголовку комірки, кожна виноски повинні передувати прогалини.
3. У осередок даних, виноски повинні відбутися на лівому, або ведучий, в кінці тексту у клітинці. У даних комірки, кожна виноски має слідувати пробіл.
4. Ми хочемо, щоб текст у таблиці, щоб мати можливість обернути, якщо це найкращий спосіб відображення таблиці. Відповідно з цією метою, прогалини, використовувані в таблиці повинно бути "порушення" пробіл (використання "" забороняється), а також використання "NoWrap" заборонено.
5. Якщо клітинка містить кілька посилань на виноски, кожен виноски повинен стояти (чи після, у разі необхідності) пробілами.
6. Зверніть увагу, що практика форматування кілька посилань виноску, як розділений комами список ув'язнених в однієї пари дужок (1,2,3) є застарілою.

Виноска мети

1. HTML-кодування для виноску мета ідентифікатор презентації виноску, загорнуті в якір ("") теги. Якір тег повинен містити атрибут ID, значення якого виносками внутрішній ідентифікатор. Не допускається пропуск між tags> <SPAN та огороджуючих теги <A>. Наприклад, якщо HTML для ID виноску презентації: <span class="footnote">(1)</span> Потім HTML для виноску посилання <a id="table6.f.1"><span class="footnote">(1)</span></a>
2. Якщо таблиця має виноски, примітки будуть поміщені в одну клітинку в нижній частині таблиці. Це "виноски осередку" буде охоплювати всю ширину стола.
3. Першого рядка тексту в клітинці виноски буде Footnotes: укладений у STRONG теги. <strong>Footnotes:</strong><br>
   
4. Кожна виноска буде складатися з виноски мета, потім пробіл, потім текст виноски, а потім <br> тега. <A ID="table3.f.1" NAME="table3.f.1"> <SPAN CLASS="footnote">(1)</SPAN></A> 1869=100 <BR>
   
5. Якщо виноска містить декілька пунктів, пунктів будуть розділені на дві <BR> теги, створюючи презентації вплив порожню рядок між абзацами. (Див. приклад таблиці 3.)

Примітки

Виноски розділ може містити виноски. Виносці являє собою особливий вид виноски, яка застосовується до таблиці в цілому. Визначення кінцева виноска: виноска, для яких таблиця не містить виноски. Тому що таблиця не містить прямих посилань на виноски, виноски мішенню для виноски не вимагає огороджувальних тега прив'язки, щоб забезпечити його HTML-ID. В принципі, виноски мішенню для виноски складається тільки з презентації ID виноску виноски.

ID бази виноски для кінцевих виносок, як правило, "Примітка". Інші правила, що регулюють виноски:

1. Таблиця може містити кілька кінцевих виносок з таким же ідентифікатором виноску бази. Наприклад, може існувати кілька кінцевих виносок з ID бази виноску "Примітка".
2. ID бази виноску у виносці може містити кілька слів, розділених пробілами. Наприклад: " Note to Users ".

Вихідний код для прикладу таблицю 2

<table cellspacing="0" cellpadding="0" border="1" align="center">

<caption><span class="tableTitle">Example Table 2: Ruritanian Ore Production (a table with footnotes)<a href="#table3.f.1"><span class="footnote">(1)</span></a></span></caption>

<thead>
    <tr>

    <th class="stubhead">Ruritanian Raw Materials Production</th>
    <th>2001</th>
    <th>2002 <a href="#table3.f.1"><span class="footnote">(p)</span></a></th>

    </tr>
</thead>

<tbody>
<tr>
    <th id="table3.r.1"><p class="sub0">Iron Ore <a href="#table3.f.2"><span class="footnote">(2)</span></a></p></th>

    <td><p class="dataCell">999.99</p></td>
    <td><p class="dataCell">999.99</p></td>
</tr>

<tr class="greenbar">
    <th><p class="sub0">Tin <a href="#table3.f.2"><span class="footnote">(2)</span></a>
       <a href="#table3.f.3"><span class="footnote">(3)</span></a></p></th>

    <td><p class="dataCell"><a href="#table3.f.4"><span class="footnote">(4)</span></a> 999.99</p>
    </td><td><p class="dataCell">-</p></td>

</tr>
</tbody>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOOTNOTES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<tbody>
<tr><td colspan="3">
    <p class="footnotes"><span class="footnotesTitle">Footnotes:</span><br />

    <a id="table3.f.1" name="table3.f.1"><span class="footnote">(1)</span></a> 1869=100<br />
    <a id="table3.f.2" name="table3.f.2"><span class="footnote">(2)</span></a> In Ruritanian thalers.<br />

    <a id="table3.f.3" name="table3.f.3"><span class="footnote">(3)</span></a> Volcanic tin is not considered pure tin.<br />
    <a id="table3.f.4" name="table3.f.4"><span class="footnote">(4)</span></a> estimated<br />

    <a id="table3.f.p" name="table3.f.p"><span class="footnote">(p)</span></a> preliminary<br />
    <span class="footnote">(NOTE)</span> This is an example of an <i>endnote.</i><br />

    <br />
    This is the second paragraph of a multi-paragraph note. abcdef and ghijkl, or maybe qxyz. .snip..<br />
    <span class="footnote">(NOTE)</span> This is a second endnote with a base footnote ID of "NOTE".<br />
    <span class="footnote">(Note to Users)</span> blah blah blah.<br />

    </p>
</td></tr>
</tbody>
</table>

5. Правила вкладених заголовків рядків

У деяких випадках рядки (або заглушки) заголовки таблиці можуть бути розташовані тільки в одному рівні. В інших випадках вони можуть бути вкладеними, як і з відступом записи в контур. Приклад таблиці 1a-1c приклади таблиць з одного рівня заголовків рядків. У цьому розділі ми обговоримо таблиць, заголовків рядків є вкладеними.

Коли таблиця містить вкладені заголовки рядків, заголовки можна розглядати як формування набору з одного або декількох дерев. Кожне дерево має верхнього рівня заголовка рядка, яка не відступом на всіх. Під верхнього рівня заголовка може бути один або декілька subheaders. Subheaders в свою чергу, може містити набір subheaders, і так далі. Заголовок, який не має subheaders називається нижнього рівня заголовка.

Ось правила для вкладених заголовки рядків

1. TH тега для клітинки заголовка рядки повинні мати HTML атрибут ID, якщо цей рядок заголовка нижнього рівня заголовка.
2. TH тег для нижнього рівня осередки заголовка рядка дозволяється мати HTML атрибут ID, але це не потрібно, щоб один.
3. TH тега для клітинки заголовка рядки повинні мати HEADERS атрибут, якщо цей рядок заголовка верхнього рівня заголовка.
4. TH тег для верхнього рівня осередки заголовка рядка дозволяється мати атрибут HTML заголовки, але це не потрібно, щоб один.
5. Якщо TH осередку HEADERS атрибут, HEADERS атрибут повинен містити внутрішні identifers всіх більш високого рівня заголовків в дерево. Ідентифікатори повинні бути перераховані в порядку, йдучи вгору, щоб на найвищому рівні заголовка.

Вихідний код для прикладу таблиці 3

<table cellspacing="0" cellpadding="0" border="1" align="center">
<caption><span class="tableTitle">Example Table 3: Ruritanian Ore Production
(a table with multi-level row headers)</span></caption>
<thead>

    <tr>
    <th class="stubhead">Ruritanian Raw Materials Production</th>
    <th>2001</th>
    </tr>
</thead>

<tbody>
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Iron ~~~~~~~~~~~~~~~~~~~~~ -->
    <tr>
    <th id="table2.r.1"><p class="sub0">Iron Ore</p></th>
    <td><p class="dataCell">999.99</p></td>

    </tr>

    <tr class="greenbar">
    <th id="table2.r.1.1" headers="table2.r.1">
    <p class="sub1">Refined</p></th>
    <td><p class="dataCell">999.99</p></td>

    </tr>

    <tr>
    <th id="table2.r.1.2" headers="table2.r.1">
    <p class="sub1">Unrefined</p></th>
    <td><p class="dataCell">999.99</p></td>

    </tr>

    <tr class="greenbar">
    <th id="table2.r.1.2.1" headers="table2.r.1.2 table2.r.1 ">
    <p class="sub2">Less than 40% pure</p></th>
    <td><p class="dataCell">999.99</p></td>

    </tr>

    <tr>
    <th id="table2.r.1.2.2" headers="table2.r.1.2 table2.r.1 ">
    <p class="sub2">40% or more pure</p></th>
    <td><p class="dataCell">999.99</p></td>

    </tr>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~ Tin ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <tr  class="greenbar">
    <th id="table2.r.2">
    <p class="sub0">Tin Ore</p></th>

    <td><p class="dataCell">999.99</p></td>
    </tr>

    <tr>
    <th id="table2.r.3.1" headers="table2.r.2"><p class="sub1">Refined</p></th>

    <td><p class="dataCell">999.99</p></td>
    </tr>
</tbody>
</table>

6. Правила для візуального рядків Роздільник

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

Наявність візуального роздільника рядків у звичайній таблиці не викличе таблиці стають нерегулярними, до тих пір, як роздільник клітини відповідати правилам для звичайних таблиць. Для того, щоб відповідати Перше правило для звичайних таблиць (комірки даних не може відбутися вище, або з лівого боку, осередки заголовка) сепаратор клітини повинні бути TD (не TH) клітини.

4 Приклад таблиці містить три ряди сепаратор. Перший ряд Сепаратор охоплює всю таблицю і є повністю порожнім. Строк для "Сепаратор В" і "Розділювач С" є текст в заголовку рядка клітин, а порожні клітинки даних, які охоплюють ширину таблиці тіла. "Розділювач Б" і "Розділювач С" відрізняються лише в розстановці їх зміст.

7. Правила Greenbar

У таблицях, створених людським істотам, використання greenbar не є обов'язковим. У таблицях, які створюються автоматично, використання greenbar не потрібно.

Розміщення greenbar визначається уявної боротьби ряд greenbar, який встановлено в 0 по останньому рядку заголовка стовпця, і скинути в 0 роздільник рядка.

Парні рядки таблиці (на основі лічильника рядків greenbar) повинна включати в себе class="greenbar" атрибут тега TR. Цей клас буде проводити затіненій рядку (див. приклад таблиці 1б, 1в, і 4).