Как вставить таблицу в html для сайта: Как создать таблицу в HTML5 и указать её параметры через стили?

Содержание

Как создать таблицу в HTML5 и указать её параметры через стили?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

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

Решение

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

Пример 1. Создание таблицы

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег table</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>
 </body>
</html>

Порядок расположения ячеек и их вид показан на рис. 1.

Рис. 1. Результат создания таблицы с четырьмя ячейками

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

Для управления полями внутри ячеек используется стилевое свойство padding, которое добавляется к селектору td. Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table, браузер IE понимает его только с версии 8.0.

Пример 2. Поля внутри ячеек

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег table</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    background: white; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
    border-spacing: 1px; /* Расстояние между ячейками */
   }
   td, th {
    background: maroon; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

Рис. 2. Поля в ячейках таблицы

Создание таблиц в HTML. Все о HTML таблицах

В HTML для создания таблиц используются теги группы table. К ним относятся:

  • <table> — тег обвертка таблицы;
  • <tr> — тег строки (ряда) таблицы;
  • <td> — тег обычной ячейки таблицы;
  • <th> — тег ячейки-заголовка таблицы;
  • <col> — тег колонки таблицы;
  • <colgroup> — тег группы колонок таблицы;
  • <thead> — тег верхнего колонтитула таблицы;
  • <tbody> — тег основной части таблицы;
  • <tfoot> — тег нижнего колонтитула таблицы;
  • <caption> — тег подписи таблицы.

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

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

Простая HTML таблица

Чтобы создать простую таблицу HTML достаточно 3 тега: <table>, <tr> и <td>.

Тег <table> является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.

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

В HTML таблицах строка (ряд) <tr> является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка <td> внутри строки <tr> будет в первой колонке, второй элемент <td> — во второй колонке и так далее.

Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк <tr> основной части таблицы используют тег <tbody>. Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически, поэтому в примерах ниже мы также будем его использовать. Если ваша таблица не имеет колонтитулов, вы можете не использовать тег <tbody>.

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

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Исходный код простой таблицы HTML

<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</tbody>
</table>

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

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

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

Пример HTML таблицы с заголовком th

Volkswagen AG Daimler AG BMW Group
Audi Mercedes-Benz BMW
Skoda Mercedes-AMG Mini
Lamborghini Smart Rolls-Royce

Исходный код таблицы HTML с заголовками th

<table>
<tbody>
<tr>
<th>Volkswagen AG</th>
<th>Daimler AG</th>
<th>BMW Group</th>
</tr>
<tr>
<td>Audi</td>
<td>Mercedes-Benz</td>
<td>BMW</td>
</tr>
<tr>
<td>Skoda</td>
<td>Mercedes-AMG</td>
<td>Mini</td>
</tr>
<tr>
<td>Lamborghini</td>
<td>Smart</td>
<td>Rolls-Royce</td>
</tr>
</tbody>
</table>

Объединение ячеек в таблице HTML

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

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»

х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

<td colspan="3" rowspan="2">Текст ячейки</td>

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке <tr>. Например, если в таблице 3 колонки с ячейками <td>, и мы объединяем первую и вторую ячейку, то всего внутри тега <tr>, определяющего данную строку будет 2 элемента <td>, первый из них будет содержать атрибут colspan=»2″.

Пример HTML таблицы с объединением ячеек

Nissan
Модель Комплектация Наличие
Nissan Qashqai VISIA +
TEKNA +
Nissan X-Trail ACENTA +
CONNECTA

Исходный код таблицы HTML с объединенными ячейками

<table>
<tbody>
<tr>
<th colspan="3">Nissan</th>
</tr>
<tr>
<th>Модель</th>
<th>Комплектация</th>
<th>Наличие</th>
</tr>
<tr>
<td rowspan="2">Nissan Qashqai</td>
<td>VISIA</td>
<td>+</td>
</tr>
<tr>
<td>TEKNA</td>
<td>+</td>
</tr>
<tr>
<td rowspan="2">Nissan X-Trail</td>
<td>ACENTA</td>
<td>+</td>
</tr>
<tr>
<td>CONNECTA</td>
<td>-</td>
</tr>
</tbody>
</table>

Колонтитулы и подпись в HTML таблицах

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

Делается это при помощи обвертки строк <tr> выбранной части таблицы тегами. <thead> определяет область верхнего колонтитула, <tfoot> — область нижнего колонтитулы, <tbody> — основную часть таблицы.

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

Правильный порядок размещения тегов областей в коде HTML таблицы <table> следующий: вначале верхний колонтитул <thead>, за ним нижний колонтитул <tfoot>, после них основная часть <tbody>. При этом на странице основная часть будет выведена между колонтитулами.

По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption>.

Подпись <caption>, при использовании, ставится сразу после открывающего тега <table>.

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway
Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
Наличие + + +
Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.)
Топливо бензин бензин дизель
Норма токсичности Евро-6 Евро-6 Евро-5

Исходный код таблицы с колонтитулами и подписью

<table>
<caption>Комплектации Renault Sandero Stepway</caption>
<thead>
<tr>
<th>Характеристика</th>
<th>SUTA 09H 6R</th>
<th>SUTA 09HR6R</th>
<th>SUTA 15H 5R</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Наличие</th>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Мощность двигателя</th>
<td>0,9 (90 л.с.)</td>
<td>0,9 (90 л.с.)</td>
<td>1,5 (90 л.с.)</td>
</tr>
<tr>
<th>Топливо</th>
<td>бензин</td>
<td>бензин</td>
<td>дизель</td>
</tr>
<tr>
<th>Норма токсичности</th>
<td>Евро-6</td>
<td>Евро-6</td>
<td>Евро-5</td>
</tr>
</tbody>
</table>

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup>.

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

Теги <col>и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.

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

Теги <col> и <colgroup> похожи друг на друга, однако тег <colgroup> позволяет использование вложенных тегов <col>, таким образом можно задать стили группе колонок через <colgroup> и конкретной колонке внутри группы через элемент <col> (см. пример ниже).

Если внутри <colgroup> есть вложенные теги <col>, то атрибут span у тега <colgroup> не ставится, а количество колонок на которые влияет тег определяется вложенными <col> элементами.

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Характеристика
1.5 (90 л.с.) 1.2 (115 л.с.) 1.5 (90 л.с.) Мощность двигателя
дизель бензин дизель Топливо
АКП6 (EDC) АКП6 (EDC) АКП6 (EDC) Трансмиссия

Исходный код таблицы HTML c <col> и <colgroup>

<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<th>ZEN 2E2C AL A</th>
<th>ZEN 2E2C J5 A</th>
<th>INTENSE 2E3C AL A</th>
<th>Характеристика</th>
</tr>
<tr>
<td>1.5 (90 л.с.)</td>
<td>1.2 (115 л.с.)</td>
<td>1.5 (90 л.с.)</td>
<th>Мощность двигателя</th>
</tr>
<tr>
<td>дизель</td>
<td>бензин</td>
<td>дизель</td>
<th>Топливо</th>
</tr>
<tr>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<th>Трансмиссия</th>
</tr>
</tbody>
</table>

Таблицы в макете страниц сайта

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

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

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

Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

Необходимые знания: Базовый HTML (Введение в HTML).
Цель: Изучить более продвинутые возможности HTML таблиц и их доступность.

Вы можете добавить заголовок для таблицы установив его в элементе <caption> и этот элемент необходимо поместить внутрь  элемента <table> (en-US). Причём вам нужно поместить его сразу после открытия тега <table>.

<table>
  <caption>Dinosaurs in the Jurassic period</caption>

  ...
</table>

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

Заголовок помещают сразу после тега <table>.

Примечание: Атрибут summary (en-US) также может быть использован в <table> элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать <caption> элемент, так как summary deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

Упражнение: Добавление заголовка

Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.

  1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
  2. Добавьте подходящий заголовок к таблице.
  3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.

Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ  сделать это используя <thead> (en-US), <tfoot> и <tbody> (en-US), которые позволяют вам разметить header, footer и body секции таблицы.

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

Использование:

  • Элементом <thead> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете <col>/<colgroup> (en-US) элемент, тогда заголовок должен находиться ниже его.
  • Элементом <tfoot> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
  • Элементом <tbody> необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).

Примечание: <tbody> всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.

Упражнение: Добавление структуры таблицы

Давайте используем эти новые элементы.

  1. В первую очередь,  сделайте копию spending-record.html и minimal-table.css в новой папке.
  2. Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка «SUM» которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
  3. Поместите очевидную строку заголовка внутрь <thead> элемента, строку «SUM» внутрь <tfoot> элемента и оставшийся контент внутрь <tbody> элемента.
  4. Сохраните, перезагрузите и вы увидите, что добавление элемента <tfoot> привело к тому,  что строка «SUM» опустилась к нижней части таблицы.
  5. Далее, добавьте атрибут colspan, чтобы ячейка «SUM» занимала первые четыре столбца, таким образом числовое значение «Cost» появится в последнем столбце.
  6. Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <head> вашего HTML документа вы увидите пустой элемент <style>. Внутри этого элемента добавьте следующие строки CSS кода:
    tbody {
      font-size: 90%;
      font-style: italic;
    }
    
    tfoot {
      font-weight: bold;
    }
    
  7. Сохраните, обновите и вы увидите результат. Если <tbody> и <tfoot> элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.

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

Ваша готовая таблица должна выглядеть примерно так:

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

Разметка простой вложенной таблицы:

<table>
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>

Результат которого выглядит примерно так:

title1 title2 title3
cell2 cell3
cell4 cell5 cell6

Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.

Items Sold August 2016
Clothes Accessories
Trousers Skirts Dresses Bracelets Rings
Belgium Antwerp 56 22 43 72 23
Gent 46 18 50 61 15
Brussels 51 27 38 69 28
The Netherlands Amsterdam 89 34 69 85 38
Utrecht 80 12 43 36 19

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

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

Использование заголовков столбцов и строк

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

Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке Добавление заголовков с помощью элемента <th>.

Атрибут scope

Новая тема в этой статье это атрибут scope (en-US), который может быть добавлен к элементу <th> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

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

Атрибут scope имеет ещё два возможных значения — colgroup и rowgroup. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу «Items sold…» в начале этого раздела статьи, вы увидите что ячейка с «Clothes» находится над ячейками «Trousers», «Skirts» и «Dresses». Все эти ячейки должны быть помечены как заголовки (<th>), но «Clothes»  заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому «Clothes» должна получить атрибут scope="colgroup", тогда как другие получат атрибут scope="col".

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

  1. Вы устанавливаете уникальный id для каждого<th> элемента.
  2. Вы устанавливаете атрибут headers для каждого <td> элемента. Каждый headers атрибут должен содержать список всех id , разделённый пробелами, ко всем <th> элементам которые действуют как заголовок для этой ячейки.

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

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

<thead>
  <tr>
    <th>Purchase</th>
    <th>Location</th>
    <th>Date</th>
    <th>Evaluation</th>
    <th>Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th>Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>

  ...

</tbody>

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

  1. Для заключительного упражнения мы, вначале создадим копию items-sold.html и minimal-table.css в новой папке.
  2. Теперь попробуем добавить соответствующий атрибут scope, который наиболее соответствует этой таблице.
  3. И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты id и headers.

Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите Styling Tables.

теги вставки строк и столбцов

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

Теги и атрибуты таблиц

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

  • <table> — контейнер, внутри которого располагается таблица (такой же, как <ul> для маркированных или <ol> для нумерованных списков).
  • border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
  • <caption> задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега <table>, вне ячеек и строк.
  • <tr> — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
  • <th> — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри <th> обозреватель выделяет жирным и размещает по центру.
  • <td> — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег <tr>, столько ячеек в ней и будет: один тег — одна ячейка.
  • <colgroup> позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега <caption>, если его нет, то после <table>.
  • <col> используется для той же цели, что и <colgroup>. <colgroup> может содержать <col>, но не наоборот.
  • span — атрибут, задающий число столбцов, к которым применяются свойства контейнера <col>.
  • <thead>, <tbody> и <tfoot> — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров <head>, <body> и <footer> в HTML-документе.
  • colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
  • rowspan объединяет ячейки по столбцам.

Пример создания таблицы

Создайте документ формата HTML и скопируйте в него следующий код:

<!DOCTYPE html>
<html>
   <head>
	<title>Пример таблицы</title>
   </head>
   <body>
	<table border="1">
	 <caption>Инструменты создания сайтов</caption>
	 <tr>
	  <th>Назначение</th><th colspan="2">Инструмент</th>
	 </tr>
	 <tr>
	  <td>Разметка</td><td>HTML</td><td>XHTML</td>
	 </tr>
	 <tr>
	  <td>Оформление</td><td colspan="2">CSS</td>
	 </tr>
	 <tr>
	  <td>Разработка</td><td>PHP</td><td>Python</td>
	 </tr>
	</table>
   </body>
</html>

В браузере документ будет выглядеть так:

Разберём, какие строчки кода за что отвечают.

  • <table border=»1″> — открыли таблицу, задав ей толщину рамок.
  • <caption> Инструменты создания сайтов </caption> — озаглавили её.
  • <tr> — открыли строку.
  • <th>Назначение</th> — создали ячейку с оформлением заголовка.
  • <th colspan=»2″>Инструмент</th> — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
  • </tr> — закрыли строку. Аналогично создали остальные строки.
  • <tr> <td>Разметка</td><td>HTML</td><td>XHTML</td> </tr> — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
  • </table> — закрыли таблицу.

Полезные ссылки:

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

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

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

Далее посмотрим, как вставить на сайт таблицу из уже готового файла Excel. И в завершении создадим адаптивные таблицы для сайта с помощью сервисов Гугл и Onedrive, чтобы вставлять на сайт таблицы excel любого размера.

Итак, начнем…

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

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

Плагины для создания и вставки таблиц на сайт

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

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

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

Но, также необходимо понимать, что у плагинов есть и свои недостатки.

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

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

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

Удобно, — ставим курсов в том месте текста, где нужно создать и вставить таблицу, нажимаем на значок таблицы, как показано на снимке выше и с помощью всплывающего окна настраиваем нужную нам таблицу:

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

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

Также данный плагин не «дружит» с некоторыми другими плагинами, которые добавляют свои кнопки в стандартную панель редактора для быстрого и удобного вывода функций.

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

При нажатии по кнопке появляется дополнительное окно, в котором можно просто поставить ID опроса и нажать ОК:

Опрос вставится в то место страницы, где стоял курсор.

А узнать ID опроса можно в разделе, где находятся все созданные опросы:

Достаточно удобно! Но, при добавлении расширенного редактора CKEditor данная кнопка не работает, т.е. не выводит всплывающее окно (по крайней мере, в некоторых темах).

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

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

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

Сайты для создания таблиц. Генераторы таблиц

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

Вот один из таких бесплатных сайтов для создания таблиц: Онлайн генератор html таблиц для сайта:

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

И еще обратим внимание на один русскоязычный онлайн генератор таблиц:

Как видно на снимке выше, в этом генераторе даже можно задавать цвет и доп. эффекты!

Если захочется поэкспериментировать с созданием таблиц и этих сервисов будет недостаточно то, вот еще один сервис для создания таблиц: HTML Table Generator. Этот генератор таблиц англоязычный, но разобраться в нем просто, а если еще пользоваться браузером с автопереводчиком, то вообще никаких проблем.

Как вставить таблицу Excel на сайт

Что касается таблиц, то довольно часто бывает необходимо вставить уже готовую таблицу, созданную, например, в OpenOffice, Microsoft Excel, или Microsoft Word. Если таблица не слишком большая в ширину и нет объединенных ячеек, то можно воспользоваться бесплатным онлайн сервисом Tableizer.

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

Далее, нужно зайти в вышеупомянутый сервис, вставить скопированную таблицу и сгенерировать html код таблицы:

Затем смотрим, как будет выглядеть таблица, копируем готовый код таблицы:

И вставляем к себе на сайт.

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

Вот как это может выглядеть:

Как видно на снимке, таблица выходит на границы сайта.

Кстати и даже не слишком большие таблицы при просмотре сайта на мобильном устройстве (если сайт адаптивный) тоже могут выходить за рамки страницы.

Ну и как тогда быть с такими широкими таблицами и отображением таблиц на адаптивных сайтах?

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

Но, есть более интересный способ, который рассмотрим далее.

Адаптивные таблицы для сайта через Гугл Диск

Загружаем в Гугл Диск нужный нам файл с таблицей (Создать -> Загрузить файл) и открываем доступ:

Включаем доступ по ссылке и копируем ее:

Теперь можно разместить на сайте, например, так:

Расписание Саратовского автовокзала (нажмите для просмотра)

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

И для самого владельца сайта использование Гугл Диска делает удобным добавление таблиц на сайт, ведь проще создать сложную таблицу в Excelе, чем «мучится» с их созданием на сайте с помощью разных кодов html.

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

Для этого нужно зайти в файл, закачанный в Гугл, и в верхней части экрана выбрать функцию Открыть в приложении «Google»:

Заходим в Меню -> Публикация в Интернете:

Копируем предоставленный код во вкладке Встроить:

И размещаем на своем сайте в нужно месте.

Примечание: Единственное, что еще можно добавить, это размеры width=»100%» height=»480″, как на снимке ниже, чтобы корректно отображалась таблица на сайте.

Итак, размещаем код таблицы для сайта на странице и вот что получается (воспользуйтесь вкладками и областями прокруток):

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

Улучшаем использование таблиц

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

Пример таблицы во всю ширину и высоту 480 рх

Пример таблицы с шириной 90% и высотой 480 рх

Пример таблицы с шириной 80% и высотой 200 рх

Адаптивные таблицы для сайта через Onedrive

По аналогии сервиса Гугл Диск, встроить таблицу на сайт можно с помощью сервиса от Майкрософт Onedrive.

Загружаем таблицу, правой кнопкой мыши на файл, — выбираем Внедрение и берем для сайта код таблицы (1):

Можно также воспользоваться дополнительными настройками внешнего вида таблицы (2):

Вот как выглядит встроенная таблица на сайте с помощью сервиса Onedrive:


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

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

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

Создание таблиц html

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

Атрибуты таблицы<table></table>.
Состоит она из строки <tr></tr> и столбца <td></td>.
Пересечение строки и столбца дает ячейку,в которую и надо вписывать данные.Ячейки <td> должны находиться внутри строки <tr>.

Необходимо соблюдать принцип вложенности тегов,иначе говоря столбец
<td></td> должен находиться между тегами строки <tr> </tr> вот так
<tr>
<td></td>
</tr>

а они должны быть между тегами таблицы <table></table>. Это обязательное условие.

Составляем самую простую таблицу

<table>
<tr>
<td></td>
</tr>
</table>

Эта таблица состоит из одной строки и одной ячейки.

Выглядит она так:

Следующая таблица будет состоять из двух строк и двух столбцов,всего четыре ячейки.

<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>

Вот ее вид:

Таблица в нашем уроке состояла из трех строк,трех столбцов и записывалась она так:

<table>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>

Это ее схема:

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

Что бы увидеть таблицу, надо в теге таблицы указать рамку<table border=»1″> где 1-ширина рамки в пикселях и вы можете менять это значение на ваше усмотрение.
После заполнения контентом сайта можно убрать рамки таблицы- <table border=0>

Таблицы можно окрасить цветом так:
<table bgcolor=»#цвет»> или
<tr bgcolor=»#цвет»> или
<td bgcolor=»#цвет»>

Не делайте цвет таблицы и цвет текста одинаковым иначе вы ничего не увидите

Изменение размеров строк и ячеек

Измененение по высоте строки задается значением height в теге <tr>
<tr> где «100» размер в пикселях, или в процентах «100%»,или <td>
<td.
Изменение по ширине задается значением width и также вставляется в тег
<td> (в пикселях) ,или например <td>
Следует обратить внимание на то что все браузеры должны показывать таблицы с одинаковым количеством ячеек в строке по всей таблице.Иными словами если у вас в первой строке находятся три ячейки,то и во второй и в следующих строках тоже должно быть три ячейки.Ячейки можно объединять по высоте <td rowspan=»?»> где»?» количество объединеных ячеек,а также по ширине <td colspan=»?»>

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

<html>
<head><title></title>
</head>
<body>
<table border=»1″ cellpadding=»2″ cellspacing=»2″> <tbody>
<tr>
<td colspan=»2″>Объединеные ячейки</td>
<td colspan=»1″ rowspan=»2″>Объединеные ячейки</td>
</tr>
<tr>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
</tr>
<tr>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
</tr>
</tbody>
</table>
</body>
</html>

Вид этой таблицы

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

На странице можно разместить несколько таблиц.Например:

<table border=»1″ bgcolor=»#E7FEE1″>
<tr>
<td>Первая таблица,первая ячейка</td><td>Первая таблица,вторая ячейка</td>
</tr>
</table>
<table border=»1″ bgcolor=»#FEFFE0″>
<tr>
<td>Вторая таблица,первая ячейка</td><td>Вторая таблица,вторая ячейка</td>
</tr>
</table>

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

<table border=»1″height=»35%»>

<tr>
<td>1</td>
<td>2</td>
</tr>

<tr>
<td>3</td>
<td>

<table border=»1″>
<tr>
<td>4</td>
<td>5</td>
</tr>

<tr>
<td>6</td>
<td>7</td>
</tr>

</table>

</td>
</tr>
</table>

Выглядит она так

Дополнительно настроить прорисовку таблицы можно с помощью параметров FRAME и RULES тега <TABLE>.
Параметр FRAME управляет прорисовкой внешней линии таблицы и может принимать следующие значения:
BOX или BORDER — рамка рисуется со всех четырех сторон
ABOVE — только с верхней стороны
BELOW — только с нижней стороны
HSIDES — рисуется нижняя и верхняя сторона
VSIDES — рисуется левая и правая сторона
LHS — только с левой стороны
RHS — только с правой стороны
VOID — таблица без внешних рамок

Например:

<table border=1 CellSpacing=0 CellPadding=0 Align=»» vAlign=»» frame=»vsides»>

Параметр RULES управляет прорисовкой внутренних линий сетки таблицы и может принимать следующие значения:
ALL — рисуются все внутренние линии
GROUPS — рисуются только линии, разделяющие группы
ROWS — рисуются линии, разделяющие строки
COLS — рисуются линии, разделяющие столбцы
NONE — внутренние линии не рисуются

Например:

<table Border=1 CellSpacing=0 CellPadding=0 Align=»» vAlign=»» rules=»cols»>

Обратите внимание на то что параметры frame и rules работают только тогда когда в значении border установлена 1 и более.

Теги для создания таблиц.

Таблица —————<table></table>
Рамка таблицы—- ——<table border=?></table>
Расстояние между ячейками—<table cellspacing=?>
Ширина в пикселях——<table width=?>
Ширина в процентах——<table>
Строка таблицы ———<tr></tr>
Выравнивание ———-<tr align=left|right|center>|middle|bottom>
Ячейка таблицы ———-<td></td>.
Без перевода строки ——<td nowrap>
Объединение ячеек по ширине -<td colspan=?>
Объединение ячеек по высоте -<td rowspan=?>
Желаемая ширина ———<td width=?> (в точках)
Ширина в процентах ——<td>
Цвет ячейки ————-<td bgcolor=»#******»>
Заголовок таблицы ——-<th></th>
Выравнивание ————<th align=left|right|center|middle |bottom>
Запрет перевода строки —<th nowrap>
Растягивание по колонке -<th colspan=?>
Растягивание по строке —<th rowspan =?>
Ширина в пикселях ——-<th width=?>
Ширина в процентах ——<th>
Цвет ячейки ————-<th bgcolor=»#$$$$$$»>
Заглавие таблицы ———<caption></caption>
Выравнивание————-<caption align=top|bottom>(сверху/снизу таблицы)

Создание таблиц. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Создание таблиц

Таблицы HTML создаются в четыре этапа.

На первом этапе в HTML-коде с помощью парного тега <TABLE> формируют саму таблицу:

<TABLE>

</TABLE>

Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных элементов: абзацев, заголовков, больших цитат, аудио- и видеороликов. Так что вставить таблицу в абзац мы не сможем. (Нужно сказать, что таблица в абзаце выглядела бы, по меньшей мере, странно…)

На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги <TR>; каждый такой тег создает отдельную строку. Теги <TR> помещают внутрь тега <TABLE> (листинг 5.1).

Листинг 5.1

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

На третьем этапе создают ячейки таблицы, для чего используют парные теги <TD> и <TH>. Тег создает обычную ячейку, а тег — ячейку заголовка, в которой будет помещаться «шапка» соответствующего столбца таблицы. Теги <TD> и <TH> помещают в теги <TR>, создающие строки таблицы, в которых должны находиться эти ячейки (листинг 5.2).

Листинг 5.2

<TABLE>

<TR>

<TH></TH>

<TH></TH>

<TH></TH>

</TR>

<TR>

<TD></TD>

<TD></TD>

<TD></TD>

</TR>

<TR>

<TD></TD>

<TD></TD>

<TD></TD>

</TR>

</TABLE>

На четвертом, последнем, этапе указывают содержимое ячеек, которое помещают в соответствующие теги <TD> и <TH> (листинг 5.3).

Листинг 5.3

<TABLE>

<TR>

<TH>Столбец 1</TH>

<TH>Столбец 2</TH>

<TH>Столбец 3</TH>

</TR>

<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>

</TABLE>

Если нам нужно поместить в ячейку таблицы простой текст, мы можем просто вставить его в соответствующий тег <TD> или <TH> (как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно.

Если нам потребуется как-то оформить содержимое ячеек, мы применим изученные в главе 3 теги. Например, мы можем придать номерам ячеек особую важность, воспользовавшись тегом <EM>; в результате они будут выведены курсивом (Листинг 5.4).

Листинг 5.4

<TABLE>

.

<TR>

<TD>Ячейка <EM>1.1</EM></TD>

<TD>Ячейка <EM>1.2</EM></TD>

<TD>Ячейка <EM>1.3</EM></TD>

</TR>

.

</TABLE>

Еще мы можем поместить в ячейку графическое изображение:

<TD><IMG SRC=»picture.jpg» ALT=»Картинка в ячейке таблицы»></TD>

Но часто бывает необходимо поместить в ячейку таблицы большой текст, иногда состоящий из нескольких абзацев. В таком случае пригодятся знакомые нам по главе 2 теги, создающие блочные элементы страницы. Теги <TD> и <TH> это позволяют (листинг 5.5).

Листинг 5.5

<TD>

<h5>Это большой текст</h5>

<P>Это начало большого текста, представляющего собой содержимое ячейки таблицы.</P>

<P>Это продолжение большого текста, представляющего собой содержимое ячейки таблицы.</P>

<P><IMG SRC=»picture.jpg» ALT=»Иллюстрация к большому тексту»></P>

<P>А это <STRONG>долгожданное окончание</STRONG> большого текста.</P>

</TD>

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

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

Теперь настала пора рассмотреть правила, которыми руководствуются Web-обозреватели при выводе таблиц на экран.

— Таблица представляет собой блочный элемент Web-страницы (об этом мы уже говорили).

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

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

— Текст ячеек заголовка выводится полужирным шрифтом и выравнивается по центру.

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

Таблица — всего лишь содержимое Web-страницы, а за ее вывод «отвечает» представление. (Подробнее о содержимом и представлении Web-страницы см. в главе 1.) Если нам нужно, например, вывести вокруг таблицы рамку, мы сможем создать соответствующее представление. Этим мы и займемся в части II.

И еще несколько правил, согласно которым создается HTML-код таблиц. Если их нарушить, Web-обозреватель отобразит таблицу некорректно или не выведет ее вообще.

— Тег <TR> может находиться только внутри тега <TABLE>. Любое другое содержимое тега <TABLE> (кроме заголовка и секций таблицы, речь о которых пойдет далее) будет проигнорировано.

— Теги <TD> и <TH> могут находиться только внутри тега <TR>. Любое другое содержимое тега <TR> будет проигнорировано.

— Содержимое таблицы может находиться только в тегах <TD> и <TH>.

— Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web- обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал &nbsp;).

Все, с теорией покончено. Настала пора практики. Давайте поместим на Web- страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.

Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.

Листинг 5.6

.

<P>Пожалуй, ни убавить ни прибавить…</P>

<HR>

<P>Список версий HTML:</P>

<TABLE>

<TR>

<TH>Версия HTML</TH>

<TH>Год выхода</TH>

<TH>Особенности</TH>

</TR>

<TR>

<TD>1.0</TD>

<TD>1992</TD>

<TD>Официально не была стандартизована</TD>

</TR>

<TR>

<TD>2.0</TD>

<TD>1995</TD>

<TD>Первая стандартизованная версия</TD>

</TR>

<TR>

<TD>3.2</TD>

<TD>1997</TD>

<TD>Поддержка таблиц и графики</TD>

</TR>

<TR>

<TD>4.0</TD>

<TD>1997</TD>

<TD>&quot;Очищен&quot; от устаревших тегов</TD>

</TR>

<TR>

<TD>4.01</TD>

<TD>1999</TD>

<TD>В основном, исправление ошибок</TD>

</TR>

<TR>

<TD>5.0</TD>

<TD>?</TD>

<TD>В разработке</TD>

</TR>

</TABLE>

<P>HTML позволяет формировать на Web-страницах следующие элементы:</P>

.

Сохраним Web-страницу и откроем в Web-обозревателе (рис. 5.1).

Рис. 5.1. Таблица — список версий HTML на Web-странице index.htm

Как видим, наша первая таблица не очень презентабельна. Web-обозреватель сделал ее сжатой, без рамок, с маленькими отступами между ячейками. Ну да это дело поправимое — прочитав часть II, мы сможем оформить таблицу (и другие элементы Web-страницы) как пожелаем.

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

Создание таблиц с помощью HTML | Temple ITS

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

НАЗВАНИЕ ТАБЛИЦЫ

Колонна А Колонка B
Данные 1 Данные 2
Данные 3 Данные 4
Данные 5 Данные 6

Следующие коды сгенерировали границу, НАЗВАНИЕ ТАБЛИЦЫ, а также заголовки столбца A и столбца B для этой таблицы:






Примечание. Если вы хотите просмотреть коды, которые сгенерировали ячейки данных 1–6, см. Предыдущий раздел.

Обратите внимание, что начальный тег таблицы,



НАЗВАНИЕ ТАБЛИЦЫ
Столбец A Столбец B
, теперь включает тег границы, BORDER = «5», который помещает границу вокруг таблицы и обрамляет каждую ячейку. Число, которое вы присваиваете тегу границы, BORDER = n, устанавливает ширину границы таблицы. В зависимости от того, как вы создаете свою таблицу, вы можете затем определить размер границы, который лучше всего подходит для вашей таблицы и общего дизайна вашей веб-страницы.

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

и .Коды заголовков определяют ячейку заголовка, и по умолчанию эти коды центрируют заголовок и выделяют его жирным шрифтом. Однако, если вы хотите, чтобы заголовок охватывал столбцы под ним, вам необходимо включить код COLSPAN = n. Поскольку в этой таблице два столбца, необходим код COLSPAN = «2». Чтобы выделить заголовок, вы можете использовать команды заголовка, чтобы увеличить текст. Обратите внимание, что в этой таблице команды

и

увеличили заголовок. Наконец, тег
создал пробел над заголовком.

Заголовки отдельных столбцов также описываются кодами заголовков

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

Как создавать таблицы в HTML

Введение

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

Предварительные требования

  • Знакомство с HTML. Если вы не знакомы с HTML или нуждаетесь в переподготовке, вы можете просмотреть первые три руководства из нашей серии руководств «Как создать веб-сайт с помощью HTML».
  • Файл index.html для практики создания таблиц HTML. Если вы не знаете, как создать индекс .html , следуйте инструкциям в нашем кратком руководстве «Как настроить HTML-проект».

Основы HTML-таблиц

Таблица HTML создается с открывающим тегом

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

Строка таблицы теги используются для создания строки данных.Внутренняя открывающая и закрывающая таблица теги, открывающая и закрывающая таблица данных теги используются для организации данных в столбцы.

В качестве примера приведем таблицу с двумя строками и тремя столбцами:

  <таблица>
  
     Столбец 1 
     Столбец 2 
     Столбец 3 
  
  
     Столбец 1 
     Столбец 2 
     Столбец 3 
  

  

Чтобы изучить, как таблицы HTML работают на практике, вставьте приведенный выше фрагмент кода в индекс .html или другой html-файл, который вы используете в этом руководстве.

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

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

Чтобы добавить дополнительную строку, добавьте выделенный элемент в нижнюю часть таблицы:

  <таблица>
  
     Столбец 1 
     Столбец 2 
     Столбец 3 
  
  
     Столбец 1 
     Столбец 2 
     Столбец 3 
  
  
     Столбец 1 
     Столбец 2 
     Столбец 3 
  

  

Сохраните результаты и проверьте их в своем браузере.Вы должны получить что-то вроде этого:

Чтобы добавить еще один столбец, попробуйте добавить дополнительный элемент данных таблицы внутри каждой строки таблицы элементов:

  <таблица>
  
     Столбец 1 
     Столбец 2 
     Столбец 3 
     Столбец 4 
  
  
     Столбец 1 
     Столбец 2 
     Столбец 3 
     Столбец 4 
  
  
     Столбец 1 
     Столбец 2 
     Столбец 3 
     Столбец 4 
  

  

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

Добавление границы к таблице

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

. Например, вы можете добавить границу в таблицу с атрибутом border :

  
Ряд 1 Строка 2 Строка 3
Ряд 1 Строка 2 Строка 3

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

Добавление заголовков к строкам и столбцам

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

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

Очистите файл index.html и добавьте строку заголовков столбцов с помощью следующего фрагмента кода:

  
Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3

Сохраните индекс .html и перезагрузите его в своем браузере. Вы должны получить что-то вроде этого:

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

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

таблицы в вашем индексе .html файл:

  
Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
Заголовок 1 строки Данные Данные Данные
Заголовок 2 строки Данные Данные Данные
Заголовок 3 строки Данные Данные Данные

Сохраните индекс .html и перезагрузите его в своем браузере. Вы должны получить что-то вроде этого:

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

Заключение

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

Если вы хотите узнать больше о HTML, вы можете проверить нашу серию руководств «Как создать веб-сайт с помощью HTML».Чтобы узнать о том, как использовать CSS для стилизации элементов HTML (включая таблицы), посетите нашу серию руководств «Как создать веб-сайт с помощью CSS».

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

Введение

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

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

Таблица была создана

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

Тег

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

    Пример простой таблицы HTML в две строки, два столбца:

    1. <стиль>
    2. стол, тыс. Тд {
    3. граница: сплошной черный 1px;
    4. }
    5. <таблица>
    Имя Возраст
    Виджай 20
    Кумар 21
  • Создание ссылок в HTML

    HTML-ссылка — это гиперссылка.Ссылка также применима к каждой веб-странице. Ссылка определяется с помощью тега . Вы можете добавить текст ссылки или изображения и другие веб-страницы. если вы создадите ссылку .

    Синтаксис

    Создайте образец ссылки на веб-странице.

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

    1. Посетить мой блог
    2. Ссылка
    3. Посетить мой блог

    Используя ссылку, вы можете легко связать свои веб-страницы и изображения.Это ссылки в HTML.

    Узнайте, когда их использовать (а когда избегать) »

    Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

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

    Использование таблиц

    Пример кода таблицы: простая таблица

      <таблица>
     
       Имя 
       Любимый цвет 
     
     
       Боб 
       желтый 
     
     
       Мишель 
       Фиолетовый 
     
    
      
    Имя Любимый цвет
    Боб Желтый
    Мишель Фиолетовый

    Пример кода таблицы: Комплексная таблица

      <таблица>
      Сложная таблица 
     
      
        Счет-фактура № 123456789 
        14 января 2025 г.
      
      
       
         Оплатить:  
    Acme Billing Co.
    123 Main St.
    Cityville, NA 12345 Клиент:
    Джон Смит
    321 Willow Way
    Юго-Восточный Северо-Западный Шир, MA 54321 Имя / Описание Кол-во @ Стоимость Скрепки 1000 0.01 10,00 Скобы (коробка) 100 1,00 100,00 <фут> Итого 110,00 Налог 8% 8,80 Общий итог 118 долларов США.80
    Комплексная таблица
    Счет-фактура № 123456789 14 января 2025 г.
    Оплата:
    Acme Billing Co.
    123 Main St.
    Cityville, NA 12345
    Клиент:
    John Smith
    321 Willow Way
    Southeast Northwestershire, MA 54321
    Название / описание Кол-во. @ Стоимость
    Скрепки 1000 0.01 10,00
    Скобы (коробка) 100 1,00 100,00
    Итого 110,00
    Налог 8% 8,80
    Итого $ 118,80

    О табличной компоновке

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

    Этот шаблон проектирования теперь считается очень плохим . Это плохо для пользовательского опыта, плохо для SEO и плохо для разработчиков, которым приходится поддерживать страницы.

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

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

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

    HTML | Таблицы — GeeksforGeeks

    < html >

    < голова >

    table, th, td {

    граница: сплошной черный цвет 1px;

    граница-обрушение: обрушение;

    }

    th, td {

    отступ: 5 пикселей;

    выравнивание текста: по левому краю;

    }

    таблица # t01 {

    ширина: 100%;

    цвет фона: # f2f2d1;

    }

    стиль >

    головка >

    < корпус 1>

    < таблица стиль = "ширина: 100%" >

    < tr >

    < > Имя >

    < > Фамилия >

    < > Возраст th >

    tr >

    < tr >

    < td > Прия td >

    < td > Шарма td >

    < td > 24 td >

    tr >

    < tr >

    < td > Арун td >

    < td > Сингх td >

    < td > 32 td >

    tr >

    < tr >

    < td > Sam td >

    < td > Watson td >

    < td > 41 td >

    tr >

    таблица >

    < br />

    < br / >

    < таблица id = "t01" >

    < tr >

    < th > Имя th >

    < th > Фамилия th >

    < th > Возраст th >

    tr >

    < tr >

    < td > Прия td >

    < td > Шарма td >

    < td > 24 td >

    tr >

    < tr >

    < td > Arun td >

    < td > Сингх td >

    < td > 32 td >

    tr >

    < tr >

    < td > Sam td >

    < td > Watson td >

    900 71 < td > 41 td >

    tr >

    таблица >

    body >

    html >

    Таблицы в документах HTML

    Таблицы в документах HTML

    11.1 Введение в таблицы

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

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

    Строки таблицы могут быть сгруппированы в головку, основание и секции корпуса, (через THEAD , TFOOT и TBODY элементы соответственно). Группы строк передают дополнительную структурную информацию и могут отображаться пользовательскими агентами способами, подчеркивающими эту структуру. Пользователь агенты могут использовать разделение голова / тело / ступня для поддержки прокрутки тела секции независимо от секции головы и ноги. Когда длинные столы напечатанные, информация о голове и ноге может повторяться на каждой странице, которая содержит данные таблицы.

    Авторы также могут группировать столбцы для предоставления дополнительная структурная информация, которая может быть использована пользовательскими агентами. Кроме того, авторы могут объявлять свойства столбца в начале таблицы. определение (через элементы COLGROUP и COL ) таким образом, чтобы пользовательские агенты, чтобы отображать таблицу постепенно, а не ждать все данные таблицы должны быть доставлены перед рендерингом.

    Ячейки таблицы могут содержать информацию "заголовок" (см. Элемент TH ) или «данные» (см. Элемент TD ).Ячейки могут охватывать несколько строки и столбцы. Модель таблицы HTML 4 позволяет авторам маркировать каждую ячейку таким образом, чтобы что невизуальные пользовательские агенты могут легче передать пользователю информацию о заголовке ячейки. Мало того, что это механизмы очень помогают пользователям с нарушениями зрения, они делают возможным для мультимодальных беспроводных браузеров с ограниченными возможностями отображения (например, Веб-пейджеры и телефоны) для обработки таблиц.

    Таблицы

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

    Вот простая таблица, которая иллюстрирует некоторые особенности HTML настольная модель. Следующее определение таблицы:

    <ТАБЛИЦА border = "1"
              summary = "Эта таблица дает некоторую статистику о фруктах
                       мухи: средний рост и вес, и процентное соотношение
                       с красными глазами (как у мужчин, так и у женщин).">
      Тестовая таблица с объединенными ячейками  
       Среднее
         Красные 
    глаза рост вес Мужчины 1,9 0,003 40% Женщины 1,7 0,002 43%

    может отображаться примерно так на устройстве tty:

              Тестовая таблица с объединенными ячейками
        / ----------------------------------------- \
        | | Средний | Красный |
        | | ------------------- | глаза |
        | | высота | вес | |
        | ----------------------------------------- |
        | Самцы | 1.9 | 0,003 | 40% |
        | ----------------------------------------- |
        | Самки | 1,7 | 0,002 | 43% |
        \ ----------------------------------------- /
     

    или как это с помощью графического пользовательского агента:

    11.2 Элементы для построения столов

    11.2.1

    ТАБЛИЦА элемент

    Начальный тег: требуется , Конечный тег: требуется

    Определения атрибутов

    сводка = текст [CS]
    Этот атрибут предоставляет сводную информацию о назначении и структуре таблицы для пользовательские агенты, выполняющие рендеринг в невизуальные носители, такие как речь и шрифт Брайля.
    выровнять = слева | в центре | справа [CI]
    Устарело. Это атрибут определяет положение таблицы по отношению к документу. Допустимые значения:
    • слева: Таблица слева от документа.
    • центр: Таблица находится в центре документа.
    • справа: Таблица справа от документа.
    ширина = длина [CN]
    Этот атрибут определяет желаемую ширину всей таблицы и является предназначен для визуальных пользовательских агентов.Когда значение является процентным значением, значение относительно доступного горизонтального пространства пользовательского агента. в отсутствие указания ширины, ширина таблицы определяется пользователем агент.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (язык информация), дирек (текст направление)
    • title (заголовок элемента)
    • стиль (рядный информация о стиле)
    • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
    • bgcolor (цвет фона)
    • рамка , правила , граница (границы и правила)
    • количество ячеек , cellpadding (сотовый поля)

    Элемент ТАБЛИЦА содержит все остальные элементы, которые определяют заголовок, строки, содержимое и форматирование.

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

    • Сделать таблицу сводка доступной для пользователя. Авторы должны предоставить сводка содержимого и структуры таблицы, чтобы люди, использующие невизуальные пользовательские агенты могут лучше понять это.
    • Отображает заголовок, если он определен.
    • Вывести заголовок таблицы, если он указан. Визуализировать нижний колонтитул таблицы, если один указан.Пользовательские агенты должны знать, где отображать верхний и нижний колонтитулы. Например, если выходной носитель выгружается на страницы, пользовательские агенты могут помещать заголовок в верх каждой страницы и нижний колонтитул внизу. Аналогично, если пользовательский агент предоставляет механизм для прокрутки строк, заголовок может отображаться вверху прокручиваемая область и нижний колонтитул внизу.
    • Подсчитайте количество столбцов в таблице. Обратите внимание, что количество строк в таблице равно к количеству элементов TR , содержащихся в ТАБЛИЦЕ элемент.
    • Сгруппировать столбцы по любой группе столбцов технические характеристики.
    • Визуализируйте ячейки, строка за строкой и сгруппированные в соответствующие столбцы, между верхний и нижний колонтитулы. Визуальные пользовательские агенты должны отформатируйте таблицу в соответствии с атрибутами HTML и таблицей стилей Технические характеристики.

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

    Чтобы пользовательский агент отформатировал таблицу за один проход, авторы должны сообщить пользовательский агент:

    Точнее, пользовательский агент может отображать таблицу за один проход, когда ширина столбца указывается с использованием комбинации Элементы COLGROUP и COL . Если какой-либо из столбцов указан в относительные или процентные значения (см. раздел, посвященный вычисляя ширину столбцов), авторы также должны указать ширину сам стол.

    Таблица направленности

    Направленность стола является либо унаследованной направленностью (по умолчанию слева направо), либо заданный атрибутом dir для элемента TABLE .

    Для таблицы с письмом слева направо нулевой столбец находится слева, а нулевая строка - наверху. Для таблицы с письмом справа налево нулевой столбец находится справа, а строка ноль находится наверху.

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

    Обратите внимание, что ТАБЛИЦА - единственный элемент, на котором dir меняет визуальный порядок столбцов на обратный; одна строка таблицы ( TR ) или группа столбцов ( COLGROUP ) не может быть независимо обращена.

    При установке для элемента ТАБЛИЦА атрибут dir также влияет на направление текста в ячейках таблицы (поскольку атрибут dir наследуется блочные элементы).

    Чтобы указать таблицу с написанием справа налево, установите атрибут dir следующим образом:

    <ТАБЛИЦА dir = "RTL">
      ... остальная часть таблицы ... 
    
     

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

    11.2.2 Подписи таблиц: элемент

    CAPTION

    Начальный тег: требуется , Конечный тег: требуется

    Определения атрибутов

    выровнять = сверху | снизу | слева | справа [CI]
    Устарело. Для визуальные пользовательские агенты, этот атрибут определяет позицию заголовка с уважение к таблице.Возможные значения:
    • вверху: Заголовок находится вверху таблицы. Это значение по умолчанию.
    • внизу: Подпись внизу таблицы.
    • осталось: Подпись слева от таблицы.
    • справа: Подпись справа от таблицы.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (язык информация), дирек (текст направление)
    • title (заголовок элемента)
    • стиль (рядный информация о стиле)
    • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

    Текст элемента CAPTION , если он присутствует, должен описывать характер стол.Элемент CAPTION разрешен только сразу после ТАБЛИЦА начальный тег. А ТАБЛИЦА элемент может содержать только один Элемент CAPTION .

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

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

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

    11.2.3 Группы строк:

    THEAD , TFOOT и TBODY элементов
     THEAD  - O (TR) + - заголовок таблицы ->
     TFOOT  - O (TR) + - нижний колонтитул таблицы ->
     

    Начальный тег: требуется , Конечный тег: опционально

     TBODY  O O (TR) + - тело таблицы ->
     

    Начальный тег: необязательно , Конечный тег: опционально

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (язык информация), дирек (текст направление)
    • title (заголовок элемента)
    • стиль (рядный информация о стиле)
    • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
    • выровнять , char , charoff , valign (сотовый выравнивание)

    Строки таблицы могут быть сгруппированы в заголовок таблицы, таблицу ножку и одну или несколько секций корпуса стола, используя THEAD , Элементы TFOOT и TBODY соответственно.Это разделение позволяет пользовательские агенты для поддержки прокрутки тела таблицы независимо от таблицы голова и нога. Когда печатаются длинные столы, головка и ножка стола информация может повторяться на каждой странице, содержащей данные таблицы.

    Головка стола и ножка стола должны содержать информацию о столбцы. Тело таблицы должно содержать строки данных таблицы.

    При наличии, каждый THEAD , TFOOT и TBODY содержит группу строк .Каждая группа строк должна содержать хотя бы одну строку, определяется элементом TR .

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

    <ТАБЛИЦА>
    <ГОЛОВА>
           ... информация заголовка ... 
    
    
           ... информация нижнего колонтитула ... 
    
    
           ... первая строка данных первого блока ... 
           ... вторая строка данных первого блока... 
    
    
           ... первая строка данных второго блока ... 
           ... вторая строка данных второго блока ... 
           ... третья строка данных второго блока ... 
    
    
     

    TFOOT должен появиться перед TBODY в ТАБЛИЦЕ определение, чтобы пользовательские агенты могли отображать ногу до получения всех (потенциально многочисленные) строки данных. Ниже приводится сводная информация о том, какие теги требуется, но его можно не указывать:

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

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

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

    <ТАБЛИЦА>
    <ГОЛОВА>
          ...заголовок ... 
    
           ... информация нижнего колонтитула ... 
    
           ... первая строка данных первого блока ... 
           ... вторая строка данных первого блока ... 
    
           ... первая строка данных второго блока ... 
           ... вторая строка данных второго блока ... 
           ... третья строка данных второго блока ... 
    
     

    THEAD , TFOOT и TBODY разделов должно содержать такое же количество столбцы.

    11.2.4 Группы столбцов:

    COLGROUP и Элементы COL

    Группы столбцов позволяют авторам создавать структурные подразделения внутри стола. Авторы могут выделить эту структуру с помощью таблиц стилей или атрибутов HTML (например, rules для элемента ТАБЛИЦА ). Для примера визуальное представление групп столбцов, см. образец таблицы.

    Таблица может содержать одну неявную группу столбцов (№ COLGROUP ограничивает столбцы) или любое количество явных группы столбцов (каждая из которых разделена экземпляром COLGROUP элемент).

    Элемент COL позволяет авторам разделять атрибуты между несколькими столбцами не подразумевая какой-либо структурной группировки. «Пролет» COL element - это количество столбцов, которые будут разделять атрибуты элемента.

    Группа
    COLGROUP элемент

    Начальный тег: требуется , Конечный тег: опционально

    Определения атрибутов

    пролет = число [CN]
    Этот атрибут, который должен быть целым числом> 0, определяет количество столбцы в группе столбцов.Значения означают следующее:
    • При отсутствии span атрибута, каждый COLGROUP определяет группу столбцов, содержащую один столбец.
    • Если для атрибута span установлено значение N> 0, текущий Элемент COLGROUP определяет группу столбцов, содержащую N столбцов.

    Пользовательские агенты должны игнорировать этот атрибут, если Элемент COLGROUP содержит один или несколько элементов COL .

    ширина = мультидлина [CN]

    Этот атрибут определяет ширину по умолчанию для каждого столбца в текущем группа столбцов.Помимо стандартного пикселя, процентного и относительного значений, этот атрибут позволяет использовать специальную форму "0 *" (нулевая звездочка), что означает что ширина каждого столбца в группе должна быть минимальной шириной необходимо для хранения содержимого столбца. Это означает, что весь столбец содержимое должно быть известно, прежде чем его ширина может быть правильно вычислена. Авторы следует помнить, что указание "0 *" не позволит визуальным пользовательским агентам рендеринг таблицы постепенно.

    Этот атрибут переопределяется для любого столбца в группе столбцов, для которого ширина указывается через элемент COL .

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (язык информация), дирек (текст направление)
    • title (заголовок элемента)
    • стиль (рядный информация о стиле)
    • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
    • выровнять , char , charoff , valign (сотовый выравнивание)

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

    1. Атрибут span элемента (значение по умолчанию 1) указывает количество столбцов в группе.
    2. каждый Элемент COL в COLGROUP представляет один или несколько столбцов в группе.

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

       
       
     

    чем:

       <КОЛГРУППА>
          
          
           ... Всего сорок элементов COL ... 
       
     

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

       <КОЛГРУППА>
          
          
       
     

    Атрибут ширины для Элемент COLGROUP наследуется всеми 40 столбцами.Первый COL элемент относится к первым 39 столбцам (не делая с ними ничего особенного), а элемент второй присваивает значение id сороковому столбцу, чтобы таблицы стилей могли обратитесь к нему.

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

    <ТАБЛИЦА>
    
    
    <ГОЛОВА>
       ... 
    
     
    Элемент
    COL

    Начальный тег: требуется , Конечный тег: запрещено

    Определения атрибутов

    пролет = число [CN]
    Этот атрибут, значение которого должно быть целым числом> 0, определяет число столбцов, «натянутых» на элемент COL ; элемент COL делится своими атрибутами с все колонны, которые он охватывает.Значение по умолчанию для этого атрибута - 1 (т. Е. Элемент COL относится к одному столбцу). Если Для атрибута span установлено значение N> 1, текущий COL Элемент разделяет свои атрибуты со следующими N-1 столбцами.
    ширина = мультидлина [CN]
    Этот атрибут определяет ширину по умолчанию для каждого столбца, охватываемого текущий Элемент COL . Он имеет то же значение, что и . width для элемента COLGROUP и переопределяет его.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (язык информация), дирек (текст направление)
    • title (заголовок элемента)
    • стиль (рядный информация о стиле)
    • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
    • выровнять , char , charoff , valign (сотовый выравнивание)

    Элемент COL позволяет авторам группировать атрибут спецификации столбцов таблицы. COL делает , а не группу колонны вместе структурно - в этом роль Элемент COLGROUP . COL элементы пусты и служат только поддержка атрибутов. Они могут появляться внутри или за пределами явного столбца группа (т.е. элемент COLGROUP ).

    Атрибут width для COL относится к ширине каждого столбец в диапазоне элемента.

    Расчет количества столбцов в стол

    Есть два способа определить количество столбцов в таблице (по порядку приоритета):

    1. Если Элемент ТАБЛИЦА содержит любые COLGROUP или COL элементы, пользовательские агенты должны рассчитывать количество столбцов, суммируя следующий:
      • За каждые Элемент COL , примите значение его Атрибут span (значение по умолчанию 1).
      • Для каждого элемента COLGROUP , содержащего хотя бы один COL элемент, игнорируйте span атрибут для Элемент COLGROUP . Для каждого элемента COL выполните расчет шаг 1.
      • Для каждого пустого элемента COLGROUP возьмите значение его Атрибут span (значение по умолчанию 1).
    2. В противном случае, если элемент ТАБЛИЦА не содержит COLGROUP или COL элементы, пользовательские агенты должны основывать количество столбцы на том, что требуется строкам.Количество столбцов равно количество столбцов, необходимое для строки с наибольшим количеством столбцов, включая ячейки которые охватывают несколько столбцов. Для любой строки, в которой меньше этого числа столбцы, конец этой строки должен быть заполнен пустыми ячейками. «Конец» строка зависит от таблицы направленность.

    Это ошибка, если таблица содержит COLGROUP или COL элементов и два вычисления не приводят к одинаковому количеству столбцы.

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

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

    <ТАБЛИЦА>
     
       ... 
      ... ряды ... 
    
    
    <ТАБЛИЦА>
    <КОЛГРУППА>
    
    
    
       ... 
      ... ряды ... 
    
    
    <ТАБЛИЦА>
    <КОЛГРУППА>
    
    
    
      ... 
      ... ряды ... 
    
    
    <ТАБЛИЦА>
    
        
    
    
     
    Расчет ширины столбцов

    Авторы могут указывать ширину столбцов тремя способами:

    Фиксированный
    Спецификация фиксированной ширины указывается в пикселях (например, ширина = "30"). Спецификация фиксированной ширины позволяет увеличивать рендеринг.
    В процентах
    Процентная спецификация (e.г., ширина = "20%") основан на процентном соотношении горизонтального пространства, доступного для таблицы (между текущими левым и правым полями, включая числа с плавающей запятой). Обратите внимание, что это пространство не зависит от самой таблицы, и, следовательно, процентные характеристики включить инкрементный рендеринг.
    Пропорциональный
    Пропорциональные характеристики (например, ширина = "3 *") относятся к частям горизонтального пространства , которое требуется для таблицы. Если ширине таблицы присваивается фиксированное значение через ширина атрибут элемента ТАБЛИЦА , пользовательские агенты могут отображать таблицу постепенно, даже с пропорциональными столбцами.

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

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

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

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

    Как только (визуальный) пользовательский агент получил данные таблицы: доступные горизонтальное пространство будет распределено пользовательским агентом следующим образом: Сначала пользователь Агент выделит 30 пикселей для первого и второго столбцов.Тогда минимальное пространство необходимые для третьего столбца будут зарезервированы. Оставшееся горизонтальное пространство будет разделен на шесть равных частей (поскольку 2 * + 1 * + 3 * = 6 частей). Четвертый столбец (2 *) получит две из этих частей, пятый столбец (1 *) получит получите один, а столбец шесть (3 *) получит три.

        
    <ТАБЛИЦА>
    <КОЛГРУППА>
       
    <КОЛГРУППА>
       
       
       
    
       
       
    <ГОЛОВА>
      ... 
      ... ряды ... 
    
     

    Мы установили значение атрибута align в третьем столбце группа в «центр». Все ячейки в каждом столбце этой группы унаследуют это значение, но может переопределить его. Фактически, последний COL делает именно это, указывая что каждая ячейка в столбце, которым она управляет, будет выровнена по ":" персонаж.

    В следующей таблице спецификации ширины столбца позволяют агенту пользователя для постепенного форматирования таблицы:

        
    <ТАБЛИЦА>
    
    <КОЛГРУППА>
       
       
    <ГОЛОВА>
      ... 
      ... ряды ... 
    
     

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

    Примечание. Хотя Атрибут width в элементе TABLE не является устаревшим, авторам рекомендуется использовать таблицы стилей для определения ширины таблицы.

    11.2.5 Строки таблицы: элемент

    TR

    Начальный тег: требуется , Конечный тег: опционально

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (язык информация), дирек (текст направление)
    • title (заголовок элемента)
    • стиль (рядный информация о стиле)
    • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
    • bgcolor (цвет фона)
    • выровнять , char , charoff , valign (сотовый выравнивание)

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

    Этот образец таблицы содержит три строки, каждая из которых начинается с TR элемент:

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

    11.2.6 Ячейки таблицы: элементы

    TH и TD
     TH  |  TD ) - O (% flow;) * - ячейка заголовка таблицы, ячейка данных таблицы ->
    
    
    
    
    
     abbr % Текст; # ПРЕДПОЛАГАЕТСЯ - сокращение для ячейки заголовка -
        axis  CDATA # ПРЕДПОЛАГАЕТСЯ - разделенный запятыми список связанных заголовков -
        заголовков  IDREFS # ПРЕДПОЛАГАЕТСЯ - список идентификаторов для ячеек заголовков -
        объем % объем; # ПРЕДПОЛАГАЕТСЯ - область, охватываемая ячейками заголовка -
        rowspan  NUMBER 1 - количество строк в ячейке -
        colspan  НОМЕР 1 - количество столбцов, охватываемых ячейкой -
      % cellhalign; - выравнивание по горизонтали в ячейках -
      % cellvalign; - выравнивание по вертикали в ячейках -
      >
     

    Начальный тег: требуется , Конечный тег: опционально

    Определения атрибутов

    заголовки = idrefs [CS]
    Этот атрибут определяет список ячеек заголовка, которые предоставляют заголовок информация для текущей ячейки данных.Значение этого атрибута - список имен ячеек, разделенных пробелами; эти ячейки должны быть названы, установив их id атрибут. Авторы обычно используют атрибут заголовков , чтобы помочь невизуальным пользовательские агенты отображают информацию заголовка о ячейках данных (например, заголовок информация произносится до данных ячейки), но атрибут также может быть используется вместе с таблицами стилей. См. Также прицел атрибут.
    объем = имя-области [CI]
    Этот атрибут определяет набор ячеек данных, для которых текущий заголовок ячейка предоставляет информацию заголовка.Этот атрибут можно использовать вместо . заголовки , особенно для простых таблиц. Если указано, этот атрибут должен иметь одно из следующих значений:
    • строка: Текущая ячейка предоставляет информацию заголовка для остальная часть строки, которая его содержит (см. также раздел о направленности таблицы).
    • col: Текущая ячейка предоставляет информацию заголовка для остальная часть столбца, который его содержит.
    • группа строк: Ячейка заголовка предоставляет информацию заголовка для остальная часть группы строк, которая его содержит.
    • colgroup: Ячейка заголовка предоставляет информацию заголовка для остальная часть группы столбцов, которая его содержит.
    abbr = текст [CS]
    Этот атрибут следует использовать для предоставления сокращенной формы ячейки контент и может отображаться пользовательскими агентами, когда это необходимо, вместо содержимое ячейки. Сокращенные имена должны быть короткими, поскольку пользовательские агенты могут отображать их неоднократно. Например, синтезаторы речи могут отображать сокращенный заголовки, относящиеся к конкретной ячейке, перед отображением этой ячейки содержание.
    ось = cdata [CI]
    Этот атрибут может использоваться для помещения ячейки в концептуальные категории, которые можно рассматривать как образующие оси в n-мерном пространстве. Пользовательские агенты могут давать доступ пользователей к этим категориям (например, пользователь может запросить у пользовательского агента все ячейки, принадлежащие определенным категориям, пользовательский агент может представить таблицу в виде оглавления и т. д.). Пожалуйста, обратитесь к разделу о категоризации ячеек для получения дополнительной информации.Значение этого атрибута представляет собой список названий категорий, разделенных запятыми.
    ряд ​​ = число [CN]
    Этот атрибут определяет количество строк, охватываемых текущей ячейкой. Значение этого атрибута по умолчанию - единица («1»). Нулевое значение («0») означает что ячейка охватывает все строки от текущей до последней строки таблицы раздел ( THEAD , TBODY или TFOOT ), в котором ячейка определенный.
    colspan = число [CN]
    Этот атрибут определяет количество столбцов, охватываемых текущей ячейкой.Значение этого атрибута по умолчанию - единица («1»). Нулевое значение («0») означает что ячейка охватывает все столбцы от текущего до последнего столбца группа столбцов ( COLGROUP ), в которой определена ячейка.
    nowrap [CI]
    Устарело. Когда присутствует, этот логический атрибут сообщает визуальным пользовательским агентам отключить автоматическое перенос текста для этой ячейки. Таблицы стилей следует использовать вместо этого атрибута для достижения эффекта обтекания. Примечание. при неосторожном использовании этот атрибут может привести к чрезмерному широкие ячейки.
    ширина = длина [CN]
    Устарело. Это атрибут предоставляет пользовательским агентам рекомендованную ширину ячеек.
    высота = длина [CN]
    Устарело. Это Атрибут предоставляет пользовательским агентам рекомендуемую высоту ячеек.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (язык информация), дирек (текст направление)
    • title (заголовок элемента)
    • стиль (рядный информация о стиле)
    • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
    • bgcolor (цвет фона)
    • выровнять , char , charoff , valign (сотовый выравнивание)

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

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

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

    Элемент TD определяет ячейку, содержащую данные.

    Ячейки могут быть пустыми (т. Е. Не содержать данных).

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

    Чашки кофе, выпитые каждым сенатором
    Имя Чашки Тип кофе Сахар?
    Т. Секстон 10 Эспрессо Нет
    Дж. Диннен 5 Без кофеина Да

    Пользовательский агент, отображающий на tty-устройстве, может отображать это следующим образом:

      Название чашки Тип кофе с сахаром? 
    Т.Секстон 10 Эспрессо Нет
    J. Dinnen 5 без кофеина Да
     
    Ячейки, занимающие несколько строк или колонны

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

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

    <ТАБЛИЦА border = "1">
     Чашки кофе, выпитые каждым сенатором 
      Имя  Чашки  Тип кофе  Сахар?
      Т. Sexton  10  Espresso  Нет
      Дж. Диннен  5  Decaf  Да
      А. Сория   Недоступно 
    
     

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

    Чашек кофе, выпитых каждым сенатором
     --------------------------------------
     | Название | Чашки | Тип кофе | Сахар? |
     --------------------------------------
     | Т.Секстон | 10 | Эспрессо | Нет |
     --------------------------------------
     | Дж. Диннен | 5 | Без кофеина | Да |
     --------------------------------------
     | А. Сория | Нет в наличии |
     --------------------------------------
     

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

    <ТАБЛИЦА border = "1">
      1  2  3
      4  6
      7  8  9
    
     

    Поскольку ячейка "2" охватывает первую и вторую строки, определение второй row учтет это.Таким образом, второй TD во втором ряду фактически определяет третья ячейка строки. Визуально таблица может отображаться на tty-устройстве. как:

    -------------
    | 1 | 2 | 3 |
    ---- | | ----
    | 4 | | 6 |
    ---- | --- | ----
    | 7 | 8 | 9 |
    -------------
     

    , в то время как графический пользовательский агент может отображать это как:

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

    Аналогично, в следующем определении таблицы:

    <ТАБЛИЦА border = "1">
      1  2  3
      4  6
      7  8  9
    
     

    ячейка "4" охватывает два столбца, поэтому второй TD в строке фактически определяет третья ячейка («6»):

    -------------
    | 1 | 2 | 3 |
    -------- | ----
    | 4 | 6 |
    -------- | ----
    | 7 | 8 | 9 |
    -------------
     

    Графический пользовательский агент может отображать это как:

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

    Следующий недопустимый пример показывает, как можно создать перекрывающиеся клетки. В этой таблице ячейка «5» занимает две строки, а ячейка «7» - два столбца, поэтому в ячейке между «7» и «9» есть перекрытие:

    <ТАБЛИЦА border = "1">
      1  2  3
      4  5  6
      7  9
    
     

    Примечание. В следующих разделах описывается таблица HTML. атрибуты, относящиеся к визуальному форматированию. Когда эта спецификация была впервые опубликованный в 1997 году, [CSS1] не предлагал механизмы для управления всеми аспектами визуальное форматирование таблиц. С тех пор [CSS2] добавил свойства для визуального форматирования таблиц.

    HTML 4 включает механизмы для управления:

    11.3.1 Границы и правила

    Следующие атрибуты влияют на внешний фрейм таблицы и внутренний правила.

    Определения атрибутов

    рама = void | above | below | hsides | lhs | rhs | vsides | box | border [CI]
    Этот атрибут указывает, какие стороны рамки вокруг стола будут быть видимым. Возможные значения:
    • пустота: Без сторон. Это значение по умолчанию.
    • вверху: Только верхняя сторона.
    • внизу: Только нижняя сторона.
    • hsides: Только верхняя и нижняя стороны.
    • vsides: Только правая и левая стороны.
    • lhs: Только левая сторона.
    • rhs: Только правая сторона.
    • коробка: Все четыре стороны.
    • граница: Все четыре стороны.
    правила = нет | группы | строки | столбцы | все [CI]
    Этот атрибут указывает, какие правила будут отображаться между ячейками внутри стол. Отображение правил зависит от пользовательского агента.Возможные значения:
    • нет: Нет правил. Это значение по умолчанию.
    • группы: правила будут отображаться между группами строк (см. THEAD , TFOOT и TBODY ) и группы столбцов (см. Только COLGROUP и COL ).
    • строк: Правила будут отображаться только между строками.
    • cols: Правила будут отображаться только между столбцами.
    • все: Правила появятся между всеми строками и столбцами.
    граница = пикселей [CN]
    Этот атрибут определяет ширину (только в пикселях) рамки вокруг таблицу (дополнительную информацию об этом атрибуте см. в примечании ниже).

    Чтобы помочь различать ячейки таблицы, мы можем установить border элемента TABLE . Рассмотрим предыдущий пример:

    <ТАБЛИЦА border = "1"
           summary = "В этой таблице показано количество чашек
                    кофе, потребляемого каждым сенатором, тип
                    кофе (без кофеина или обычный), а также
                    принимать с сахаром.">
     Чашки кофе, выпитые каждым сенатором 
    
        Имя 
        Чашки 
        Тип кофе 
        Сахар? 
    
        Т. Секстон 
        10 
        Эспрессо 
        Нет 
    
        Дж. Диннен 
        5 
        Без кофеина 
        Да 
    
     

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

    <ТАБЛИЦА border = "5" frame = "vsides" rules = "cols">
      1  2  3
      4  5  6
      7  8  9
    
     

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

    • Установка границы = "0" подразумевает фрейм = "void" и, если только в противном случае правила = "нет".
    • Другие значения граница подразумевает frame = "граница" и, если не указано иное, rules = "все".
    • Значение "border" в начальном теге элемента ТАБЛИЦА должно быть интерпретируется как значение атрибута кадра . Это означает rules = "все" и некоторое значение по умолчанию (ненулевое) для граница атрибута.

    Например, следующие определения эквивалентны:

    <ТАБЛИЦА border = "2">
    <ТАБЛИЦА border = "2" frame = "border" rules = "all">
     

    как следующие:

    <Граница ТАБЛИЦЫ>
    

    Примечание. Атрибут границы также определяет поведение границы для элементов OBJECT и IMG , но принимает разные значения для этих элементов.

    11.3.2 Горизонтальное и вертикальное выравнивание

    Для разных элементов таблицы могут быть установлены следующие атрибуты (см. Их определения).

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

    Определения атрибутов

    выровнять = слева | по центру | справа | по ширине | char [CI]
    Этот атрибут определяет выравнивание данных и обоснование текст в ячейке.Возможные значения:
    • слева: Выровнять данные по левому краю / Выровнять текст по левому краю. Это по умолчанию значение для табличных данных.
    • по центру: по центру / по центру текста. Это по умолчанию значение для заголовков таблиц.
    • справа: Выровнять данные по правому краю / Выровнять текст по правому краю.
    • выровнять по ширине: Двойное выравнивание текста.
    • char: Выровнять текст вокруг определенного символа. Если пользовательский агент не поддерживает выравнивание символов, поведение при наличии этого значения неопределенные.
    valign = верхний | средний | нижний | базовый [CI]
    Этот атрибут определяет вертикальное положение данных в ячейке. Возможные значения:
    • вверху: Данные ячейки находятся на одном уровне с верхом ячейки.
    • средний: Данные ячейки центрируются по вертикали внутри ячейки. Этот значение по умолчанию.
    • внизу: Данные ячейки находятся на одном уровне с нижней частью ячейки.
    • baseline: Все ячейки в той же строке, что и ячейка, Атрибут valign имеет это значение, должны иметь свои текстовые данные расположен так, чтобы первая текстовая строка находилась на базовой линии, общей для всех ячеек в ряду.Это ограничение не применяется к последующим текстовым строкам в этих клетки.
    символ = символ [CN]
    Этот атрибут определяет один символ в текстовом фрагменте, который будет действовать. как ось для выравнивания. Значение по умолчанию для этого атрибута - десятичное. точечный символ для текущего языка, установленного в lang атрибут (например, точка (".") на английском языке и запятая (",") на французском языке). Пользовательские агенты не обязаны поддерживать этот атрибут.
    charoff = длина [CN]
    Если присутствует, этот атрибут указывает смещение к первому вхождению. символа выравнивания в каждой строке. Если в строке нет символ выравнивания, его следует сдвинуть по горизонтали, чтобы закончить выравнивание позиция.

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

    Таблица в этом примере выравнивает строку значений валюты по десятичной дроби. точка. Мы устанавливаем символ выравнивания на "." явно.

    <ТАБЛИЦА border = "1">
    <КОЛГРУППА>
    
    <ГОЛОВА>
    Овощи Стоимость за килограмм
    Салат $ 1
    Серебряная морковь 10 долларов.50
    Золотая репа 100,30 $

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

    ------------------------------
    | Овощи | Стоимость за килограмм |
    | -------------- | ------------- |
    | Салат | $ 1 |
    | -------------- | ------------- |
    | Серебряная морковь | 10,50 $ |
    | -------------- | ------------- |
    | Золотая репа | $ 100,30 |
    ------------------------------
     

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

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

    Наследование совмещения характеристики

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

    Порядок приоритета (от наивысшего к низшему) для атрибутов выровняйте , char и charoff имеет следующий вид:

    1. Атрибут выравнивания, установленный для элемента в данных ячейки (например,г., П ).
    2. Атрибут выравнивания, установленный для ячейки ( TH и TD ).
    3. Атрибут выравнивания, установленный для элемента группировки столбцов ( COL, и COLGROUP ). Когда ячейка является частью диапазона из нескольких столбцов, выравнивание свойство наследуется от определения ячейки в начале охватывать.
    4. Атрибут выравнивания, установленный для строки или элемента группировки строк ( TR , THEAD , TFOOT и TBODY ).Когда ячейка является частью многострочного диапазона, свойство выравнивания наследуется от определения ячейки в начале пролета.
    5. Атрибут выравнивания, установленный в таблице ( ТАБЛИЦА ).
    6. Значение выравнивания по умолчанию.

    Порядок приоритета (от наивысшего к низшему) для атрибута valign (а также другие унаследованные атрибуты lang , dir и style ) выглядит следующим образом:

    1. Атрибут, установленный для элемента в данных ячейки (например,г., П ).
    2. Атрибут, установленный в ячейке ( TH и TD ).
    3. Атрибут, установленный для строки или элемента группировки строк ( TR , THEAD , TFOOT и TBODY ). Когда ячейка является частью многострочного диапазона, значение атрибута наследуется из определения ячейки в начале пролет.
    4. Атрибут, установленный для элемента группировки столбцов ( COL и COLGROUP ). Когда ячейка является частью диапазона, состоящего из нескольких столбцов, атрибут значение наследуется из определения ячейки в начале диапазона.
    5. Атрибут, установленный в таблице ( ТАБЛИЦА ).
    6. Значение атрибута по умолчанию.

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

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

    Пользовательские агенты, которые не поддерживают значение «оправдать» Атрибут align должен использовать значение унаследованной направленности на своем месте.

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

    11.3.3 Ячейка маржа

    Определения атрибутов

    расстояние между ячейками = длина [CN]
    Этот атрибут указывает, сколько места пользовательскому агенту следует оставлять между в левой части таблицы и в левой части крайнего левого столбца верх таблицы и верхняя часть самого верхнего ряда, и так далее для правой и внизу таблицы.Атрибут также указывает количество места для оставить между ячейками.
    cellpadding = длина [CN]
    Этот атрибут определяет количество пространства между границей ячейки. и его содержимое. Если значение этого атрибута - длина в пикселях, все четыре поля должны быть на таком расстоянии от содержимого. Если значение атрибут - длина в процентах, верхнее и нижнее поля должны быть одинаковыми отделяется от контента на основе процента от доступной вертикали пробел, а левое и правое поля должны быть одинаково отделены от содержание в процентах от доступного горизонтального пространства.

    Эти два атрибута управляют интервалом между ячейками и внутри них. Следующий иллюстрация объясняет, как они соотносятся:

    В следующем примере атрибут cellspacing указывает, что ячейки должны быть отделены друг от друга и от рамки таблицы на двадцать пикселей. Атрибут cellpadding указывает, что верхнее поле ячейка и нижнее поле ячейки будут отделены от содержимое на 10% доступного вертикального пространства (всего 20%).Точно так же левое поле ячейки и правое поле ячейки будут каждый должен быть отделен от содержимого ячейки 10% доступной горизонтальной пространство (всего 20%).

    <ТАБЛИЦА cellspacing = "20" cellpadding = "20%">
      Data1  Data2  Data3
    
     

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

    11.4.1 Привязка заголовка информация с ячейками данных

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

    • Для данной ячейки данных атрибут заголовков перечисляет, какие ячейки предоставить соответствующую информацию заголовка. Для этого каждая ячейка заголовка должна называться с использованием атрибута id .Обратите внимание, что не всегда можно сделать чистое разделение ячеек на заголовки или данные. Вы должны использовать элемент TD для таких ячеек вместе с id или охват атрибутов в зависимости от ситуации.
    • Для данной ячейки заголовка, Атрибут scope сообщает пользовательскому агенту о ячейках данных, для которых это заголовок предоставляет информацию. Авторы могут использовать этот атрибут вместо из заголовки , по которым удобнее; два атрибута выполнять ту же функцию.Обычно требуется атрибут заголовков когда заголовки размещаются в неправильных позициях по отношению к данным, которые они применить к.
    • Атрибут abbr определяет сокращенный заголовок для ячейки заголовка, чтобы пользовательские агенты могли отображать информацию заголовка больше быстро.

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

    <ТАБЛИЦА border = "1"
           summary = "В этой таблице показано количество чашек
                    кофе, потребляемого каждым сенатором, тип
                    кофе (без кофеина или обычный), а также
                    с сахаром. ">
     Чашки кофе, выпитые каждым сенатором 
    
        Имя 
        Чашки 
        Тип кофе 
        Сахар? 
    
        Т.Секстон 
        10 
        Эспрессо 
        Нет 
    
        Дж. Диннен 
        5 
        Без кофеина 
        Да 
    
     

    Синтезатор речи может отобразить эту таблицу следующим образом:

    Подпись под фото: Чашки кофе, выпитые каждым сенатором
    Резюме: в этой таблице показано количество чашек.
             кофе, потребляемого каждым сенатором, тип
             кофе (без кофеина или обычный), а также
             принимать с сахаром.Имя: Т. Секстон, Чашек: 10, Тип: Эспрессо, Сахар: Нет
    Имя: Дж. Диннен, Чашек: 5, Тип: Без кофеина, Сахар: Да
     

    Обратите внимание, что заголовок «Тип кофе» сокращен до «Тип» с использованием abbr атрибут.

    Вот тот же пример с заменой атрибута области на заголовки атрибут. Обратите внимание на значение «col» для области атрибут, означающий «все ячейки в текущем столбце»:

    <ТАБЛИЦА border = "1"
           summary = "В этой таблице показано количество чашек
                    кофе, потребляемого каждым сенатором, тип
                    кофе (без кофеина или обычный), а также
                    принимать с сахаром.">
     Чашки кофе, выпитые каждым сенатором 
    
        Имя 
        Кубки 
        Тип кофе 
        Сахар? 
    
        Т. Секстон 
        10 
        Эспрессо 
        Нет 
    
        Дж. Диннен 
        5 
        Без кофеина 
        Да 
    
     

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

    <ТАБЛИЦА border = "1" cellpadding = "5" cellspacing = "2"
      summary = "Курсы истории, предлагаемые в сообществе
               Баня с указанием названия курса, наставника, резюме,
               код и комиссия ">
      
         Общественные курсы - баня, осень 1997 г. 
      
      
         Название курса 
         Репетитор курса 
         Сводка 
         Код 
         Комиссия 
      
      
         После гражданской войны 
         Доктор.Джон Роутон 
        
           Курс исследует неспокойные годы в Англии.
           после 1646.  6 еженедельных встреч, начиная с понедельника 13 числа
          Октябрь. 
        
         h37 
         & фунт; 32 
      
      
         Знакомство с англосаксонской Англией 
         Марк Коттл 
        
           Однодневный курс, знакомящий с ранним средневековьем
           период реконструкции англосаксов и
           их общество. Суббота, 18 октября. 
        
         h38 
         & фунт; 18 
      
      
         Слава Греции 
         Валери Лоренц 
        
         Родина демократии, философии, центр театра, дом
         аргумент. Римляне могли это сделать, но греки сделали это
         первый.  Субботняя дневная школа, 25 октября 1997 г. 
        
         h40 
         & фунт; 18 
      
    
     

    Графический пользовательский агент может отображать это как:

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

    11.4.2 Категоризация ячейки

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

    Пользователям также может потребоваться информация о более чем одной ячейке, и в этом случае информация заголовка, предоставляемая на уровне ячейки (по заголовки , scope и abbr ) могут не обеспечивать адекватный контекст. Рассмотрим следующую таблицу, в которой классифицируются расходы на питание, гостиницы и транспорт в два пункта (Сан-Хосе и Сиэтл) в течение нескольких дней:

    Пользователи могут захотеть извлечь информацию из таблицы в виде запросов:

    • "Сколько я потратил на еду?"
    • "Сколько я потратил на обед 25 августа?"
    • "Сколько я потратил на все расходы в Сан-Хосе?"

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

    Чтобы удовлетворить этот тип запроса, табличная модель HTML 4 позволяет авторам размещать заголовки ячеек и данные по категориям. Например, для путешествия в таблице расходов автор мог сгруппировать ячейки заголовка «Сан-Хосе» и «Сиэтл». в категорию «Расположение», заголовки «Питание», «Гостиницы» и «Транспорт» в категорию «Расходы», а четыре дня - в категорию «Дата».В предыдущие три вопроса будут иметь следующее значение:

    • "Сколько я потратил на еду?" означает "Какие ячейки данных в категорию «Расходы = Питание»?
    • "Сколько я потратил на обед 25 августа?" означает "Какие данные ячеек в категориях "Расходы = Питание" и "Дата = 25 августа 1997 г."?
    • "Сколько я потратил на все расходы в Сан-Хосе?" означает "Каковы все ячейки данных в "Expenses = Meals, Hotels, Transport" and "Location = San Jose" категории?

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

       Сан-Хосе 
     

    Любая ячейка, содержащая информацию, относящуюся к "Сан-Хосе", должна ссылаться на это ячейка заголовка через заголовки или область атрибута. Таким образом, еда расходы за 25 августа 1997 г. необходимо разметить до id атрибут (значение которого здесь "a6") ячейки заголовка "Сан-Хосе":

      
       37.74 
     

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

    Ниже мы помечаем таблицу командировочных расходов информацией о категории:

    <ТАБЛИЦА border = "1"
              summary = "В этой таблице приведены командировочные расходы.
                       во время августовских поездок в
                       Сан-Хосе и Сиэтл ">
    <ЗАГОЛОВОК>
      Отчет о командировочных расходах
    
    
       
       Питание 
       Гостиницы 
       Транспорт 
       промежуточные итоги 
    
    
       Сан-Хосе 
       
       
       
       
    
    
       25 августа 1997 г. 
       37.74 
       112,00 
       45,00 
       
    
    
       26 августа 1997 г. 
       27,28 
       112,00 
       45,00 
       
    
    
       промежуточные итоги 
       65,02 
       224,00 
       90.00 
       379,02 
    
    
       Сиэтл 
       
       
       
       
    
    
       27 августа 1997 г. 
       96,25 
       109,00 
       36,00 
       
    
    
       28 августа 1997 г. 
       35.00 
       109,00 
       36,00 
       
    
    
       промежуточные итоги 
       131,25 
       218,00 
       72,00 
       421,25 
    
    
       Итоги 
       196,27 
       442,00 
       162,00 
       800,27 
    
    
     

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

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

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

    Однако пользовательские агенты, особенно речь синтезаторы, может захотеть вынести за скобки информацию, общую для нескольких ячейки, которые являются результатом запроса. Например, если пользователь спрашивает "Что сделал Я трачу на обед в Сан-Хосе? ", Пользовательский агент сначала определит ячейки под вопросом (25 августа 1997: 37.74, 26-Aug-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 Алгоритм поиска информация о заголовке

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

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

    В этом примере показаны сгруппированные строки и столбцы.Пример адаптирован из "Разработка международного программного обеспечения" Надин Кано.

    В "ascii art" следующая таблица:

    <ТАБЛИЦА border = "2" frame = "hsides" rules = "groups"
              summary = "Поддержка кодовой страницы в разных версиях
                       MS Windows. ">
     ПОДДЕРЖКА КОДОВОЙ СТРАНИЦЫ В MICROSOFT WINDOWS 
    
    
    
    
    
    
     Кодовая страница 
    ID Имя ACP OEMCP Windows
    NT 3.1 Windows
    NT 3.51 Windows
    95 1200 Unicode (BMP по ISO / IEC-10646) X X * 1250 Windows 3.1 Восточноевропейская X X X X 1251 Windows 3.1 Кириллица X X X X 1252 Windows 3.1 US (ANSI) X X X X 1253 Windows 3.1 греческий X X X X 1254 Windows 3.1 турецкий X X X X 1255 Иврит X X 1256 арабский X X 1257 Балтийский X X 1361 корейский (Johab) X ** X 437 MS-DOS США X X X X 708 арабский (ASMO 708) X X 709 арабский (ASMO 449+, BCON V4) X X 710 Арабский (прозрачный арабский) X X 720 арабский (прозрачный ASMO) X X

    будет отображаться примерно так:

                      ПОДДЕРЖКА КОДОВОЙ СТРАНИЦЫ В MICROSOFT WINDOWS
    ================================================== =============================
    Кодовая страница | Имя | ACP OEMCP | Windows Windows Windows
        ID | | | NT 3.1 NT 3.51 95
    -------------------------------------------------- -----------------------------
       1200 | Юникод (BMP по ISO 10646) | | Х Х *
       1250 | Windows 3.1 Восточноевропейская | X | Х Х Х
       1251 | Windows 3.1 Кириллица | X | Х Х Х
       1252 | Windows 3.1 US (ANSI) | X | Х Х Х
       1253 | Windows 3.1 Греческая | X | Х Х Х
       1254 | Окна 3.1 турецкий | X | Х Х Х
       1255 | Иврит | X | Икс
       1256 | Арабский | X | Икс
       1257 | Балтийский | X | Икс
       1361 | Корейский (Джохаб) | X | **      ИКС
    -------------------------------------------------- -----------------------------
        437 | MS-DOS Соединенные Штаты | X | Х Х Х
        708 | Арабский (ASMO 708) | X | Икс
        709 | Арабский (ASMO 449+, BCON V4) | X | Икс
        710 | Арабский (прозрачный арабский) | X | Икс
        720 | Арабский (прозрачный ASMO) | X | Икс
    ================================================== =============================
     

    Графический пользовательский агент может отображать это как:

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

    WebD2: Создание таблицы данных

    Обзор

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

    В этом уроке вы добавите простую таблицу данных в свое портфолио.

    Результаты учащихся

    По завершении этого упражнения:

    • вы сможете создать простую таблицу данных, которая включает элементы , , , и соответственно. Эти теги необязательны, но их следует включать в длинные таблицы. Если длинные таблицы печатаются и занимают несколько страниц, браузеры будут повторять содержимое элемента (обычно это верхняя строка (строки) таблицы) в верхней части каждой напечатанной страницы.
    • Каждая строка в таблице начинается и заканчивается строкой таблицы (tr) элементов:
    • Каждая ячейка в таблице начинается и заканчивается либо элементами заголовка таблицы (th), либо элементами данных таблицы (td), в зависимости от того, какой тип информации содержит ячейка.
      • Если ячейка содержит заголовки, она начинается и заканчивается элементами th:
    • Если ячейка содержит данные (не заголовки), она начинается и заканчивается элементами td:
    • Элементы заголовка таблицы (th) также должны включать в себя атрибут области действия, который имеет вид scope = "row" или scope = "col".Это указывает программам чтения с экрана, какие заголовки относятся к каким ячейкам. Программы чтения с экрана читают таблицы строка за строкой слева направо, и без этой дополнительной разметки слепым пользователям было бы сложно определить, какие заголовки применяются к ячейке, в которой они находятся.
    • Сравните следующую таблицу с кодом, который был использован для ее создания:

      ,
      и , а также атрибуты области видимости.

      Как создать HTML-таблицу

      1. HTML-таблицы начинаются с и заканчиваются
        .
      2. Внутри элемента таблицы вы можете дополнительно включить элемент заголовка, который содержит краткий заголовок или описание содержимого таблицы. В большинстве браузеров заголовок отображается над таблицей.
      3. Как и HTML-документы, таблицы включают в себя заголовок и тело. В таблицах они указываются с помощью элементов
      Меню школьного обеда
      понедельник вторник среда четверг пятница
      Плотоядные Пицца колбаса Корн-доги Небрежный Джо Тако с говядиной Цыпленок и пельмени
      Травоядные Вегетарианская пицца Овощные собаки Темпе барбекю Буррито с фасолью Тофу терияки
      <таблица>
         Меню школьного обеда 
        
          
             
             понедельник 
             вторник 
             Среда 
             четверг 
             пятница 
          
        
        
          
             Плотоядные 
             Пицца с колбасой 
             Корн-доги 
             Небрежный Джо 
             Тако с говядиной 
             Цыпленок и пельмени 
          
          
             Травоядные 
             Вегетарианская пицца 
             Вегетарианские собаки 
             BBQ tempeh 
             Буррито с фасолью 
             Тофу терияки 
          
        
      
       

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

      Деятельность

      1. Ранее в этом курсе, на уроке «Как люди с ограниченными возможностями получают доступ к Интернету», вы узнали, как определенные стратегии и методы веб-дизайна могут создавать препятствия для людей с ограниченными возможностями и других людей. В текущем уроке вы будете использовать HTML-таблицу для создания контрольного списка веб-доступности, к которому вы сможете обращаться позже, когда будете проектировать веб-сайты, чтобы помочь вам убедиться, что ваш веб-контент никого без нужды не исключает.
      2. Откройте файл accessibility.html, который вы создали ранее в курсе. На этом этапе этот файл не должен содержать ничего, кроме «голого» HTML.
      3. Используйте следующие инструкции, чтобы добавить таблицу в тело вашей веб-страницы. Обратитесь к приведенному выше примеру разметки таблицы в качестве модели. Обратите внимание, что таблица меню школьного обеда состоит из трех строк и шести столбцов, тогда как контрольный список веб-доступности будет состоять из двух столбцов и семи строк. Таблица, которую вы создаете, должна выглядеть примерно так:
      4. Сохраните свою работу и проверьте ее в своем веб-браузере, чтобы убедиться, что она выглядит так, как вы ожидаете.Если этого не происходит, это нормально - таблицы могут быть сложными! Иногда требуется несколько попыток, чтобы получить все теги правильно. Не беспокойтесь о промежутках между ячейками и внутри них: мы рассмотрим это на следующем уроке.

      Инструкции по созданию таблицы

      Заголовок таблицы должен быть «Контрольный список веб-доступности»

      В таблице должно быть два столбца со следующими заголовками:

      1. Пользовательская характеристика
      2. Доступный дизайн наконечника

      В первом столбце (столбец с заголовком «Характеристики пользователя») перечислите следующие характеристики пользователя, связанные с доступностью в Интернете, в том порядке, в котором они представлены ниже.

      1. Не видно
      2. Цвета не воспринимаются
      3. Невозможно использовать мышь
      4. Не слышно
      5. Склонность к судорогам
      6. Невозможно отвлечься

      Во втором столбце (столбец с заголовком «Доступный совет по дизайну») следующие проблемы веб-дизайна соответствуют характеристикам пользователя с таким же номером из первого столбца.

      1. Кодируйте все изображения с помощью текста ALT
      2. Избегайте использования одного цвета для передачи информации
      3. Убедитесь, что все функции веб-сайта доступны с клавиатуры.
      4. Добавить подписи к мультимедиа
      5. Избегайте содержимого, которое мигает
      6. Сохраняйте простой дизайн

      Ресурсы / Интернет-документы

      Все готово?

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

      .

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

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