Таблица

Определение

Таблица — структура данных, расположенных по строкам и столбцам.

Назначение

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

Оформление таблицы

Таблица состоит из строк и содержит, как минимум, из три строки:

• заголовочную строку;
• разделительную строку;
• содержательную строку.

Заголовочная строка содержит наименования колонок.

Разделительная строка предназначена для отделения заголовочной строки от содержательных строк.

Содержательная строка содержит данные.

Количество ячеек во всех трёх строках должно совпадать. В противном случае комбинация знаков не будет распознана как таблица.

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

| Заголовок 1 | Заголовок 2 | Заголовочная строка |
| --- | --- | -- |
| ячейка 1 | ячейка  2 | содержательная строка |

При публикации размеченный текст даст следующий HTML код:

<table>
<thead>
<tr>
  <th>Заголовок 1</th>
  <th>Заголовок 2</th>
  <th>Заголовчная строка</th>
</tr>
</thead>
<tbody>
<tr>
  <td>ячейка 1</td>
  <td>ячейка 2</td>
  <td>содержательная строка</td>
</tr>
</tbody></table>

Оформление строки

Каждая строка состоит из граф и содержит, как минимум, одну графу.

Ячейка — пересечение строки и колонки.

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

Правила оформление строк:

• каждую строку следует начать с вертикальной черты (|);
• каждую строку следует завершить вертикальной чертой (|);
• в заголовочной строке введите наименования граф таблицы;
• в разделительной строке введите три или более разделительных символа;
• в ячейках содержательных строках вводите данные.

Разделительными символами служат дефисы (-). Подгонять количество разделительных символов под количество знаков в заголовке вовсе не нужно.

Оформление графы

Различная длина граф

Графы не обязательно делать одинаковой длины. Разметка и отображение в виде HTML — отличны друг от друга. Несомненно, подобную «рваную» таблицу сложно читать, но увидит её лишь автор текста.

Пример граф различной длины.

| Краткий | Длинный заголовок | 
| ----------------------- | --- | 
| длинное значение | краткое |

При публикации размеченный текст даст следующий HTML код:

<table>
<thead>
<tr>
  <th>Краткий</th>
  <th>Длинный заголовок</th>
</tr>
</thead>
<tbody>
<tr>
  <td>длинное значение</td>
  <td>краткое</td>
</tr>
</tbody></table>

Равнение данных в графах

Данные в ячейках можно выравнивать относительно краёв ячейки.

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

• сочетание (:–) означает выравнивание влево;
• сочетание (:-:) означает выравнивание по центру;
• сочетание (–:) означает выравнивание вправо.

Пример равнения граф таблицы:

| Заголовок 1 | Заголовок 2 | Заголовок 3 |
| :-- | :-: | --: |
| выравнивание влево | выравнивание по центру | выравнивание вправо |

При публикации размеченный текст даст следующий HTML код:

<table>
<thead>
<tr>
  <th align="left">Заголовок 1</th>
  <th align="center">Заголовок 2</th>
  <th align="right">Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
  <td align="left">выравнивание влево</td>
  <td align="center">выравнивание по центру</td>
  <td align="right">выравнивание вправо</td>
</tr>
</tbody></table>

Разделение ячейки графы

Для разделения ячейки используют экранированную вертикальную черту (|).

Пример разделения ячейки таблицы:

| Заго \| ловок 1 |
| --- | --- | --- |
| значение 1 \| значение 2 |
| значение 1 **\|** значение 2 |

При публикации размеченный текст даст следующий HTML код:

<table>
<thead>
<tr>
  <th>Заго | ловок</th>
</tr>
</thead>
<tbody>
<tr>
  <td>значение 1 <code>|</code> значение 2</td>
</tr>
<tr>
  <td>значение 1 <strong>|</strong> значение 2</td>
</tr>
</tbody>
</table>