Таблицы

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

Двойной тег <table> может иметь только один параметр: border, который может иметь только два значения: “” и “1”, то есть границы или есть или их нет.

<tr> — задаёт строку, не имеет параметров.

<td> — задаёт обычную ячейку таблицы. Может иметь два параметра:

  • colspan — указывает на какое количество столбцов должна быть растянута ячейка
  • rowspan — указывает количество строк на которое должна быть растянута ячейка

 <th> — задаёт “заголовочные” ячейки. По умолчанию в таких ячейках текст будет выделен жирным и отцентрован.

 Параметр только для <th> — scope. Возможные значения:

  • col — заголовок для колонки
  • colgroup — заголовок для группы колонок
  • row — заголовок для строки
  • rowgroup — заголовок для группы строк

Scope применяется для речевых браузеров или при использовании colspan или rowspan, а также <colgroup>. В большинстве случаев параметром scope можно пренебречь.

<caption> — создаёт заголовок таблицы. Должен быть расположен сразу за тегом <table>. По умолчанию отображается по центру таблицы.

<colgroup> — используется для задания стилей целому столбцу. Должен идти после тега <caption> и перед всеми остальными.

Тег <colgroup> — двойной. Внутри него располагаются одинарные теги <col> для которых уже и задаются стили, которые будут применены к соответствующим столбцам.

У тега <col> есть параметр span, который отвечает за количество столбцов к которому относится тег.

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

Результат:

<table border=”1”>
<caption>Заголовок таблицы</caption>
<colgroup>
<col span=”1” style=”background-color:#eee;”>
</colgroup>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Строка 1 ячейка 1.</td>
<td>Строка 1 ячейка 2</td>
</tr>
<tr>
<td>Строка 2 ячейка 1.</td>
<td>Строка 2 ячейка 2.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=”2”>Итого: четыре ячейки.</td>
</tr>
</tfoot>
</table>

Выделение частей текста

<abbr> — выделяет аббревиатуры или акронимы.

<abbr title="Всемирная организация здравоохранения">ВОЗ</abbr> была основана в 1948 году.

<address> — определяет контактную информацию автора или владельца статьи или документа.

<address>
Статья написана Васей Пупкиным.
Адрес для связи: Петербург, а/я 101011
</address>

<blockquote> — определяет объёмную цитату с другого сайта. Имеет параметр cite.

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

 <q> — определяет небольшую встроенную в текст цитату. Обычно браузером выделяется кавычками. Имеется параметр cite.

 <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p>

 <cite> — определяет название работы (картины, фильма, песни и т. д.)

 <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

 <code> — определяет кусок компьютерного кода.

 <code>A piece of computer code</code>

 <dfn> — задаёт определение термина.

<dfn>Definition term</dfn>

 <em> — отображается как выделенный текст.

 <em>Emphasized text</em>

 <strong> — определяет важный текст.

 <strong>Strong text</strong>

<samp> — блок содержащий вывод компьютерной программы.

<samp>Sample output from a computer program</samp>

<kbd> — блок с информацией которую нужно ввести с клавиатуры.

<kbd>Keyboard input</kbd>

<var> — выделяет переменную.

<var>Variable</var>

<ins> — определяет текст, который был добавлен в документ (подчёркнутый).
<del> — определяет текст, который был удалён из документа (зачёркнутый).
<mark> — определяет выделенный текст (как выделяют маркером на бумаге).
<pre> — определяет блок преформатированного текста. Обычно используется для вывода текста с необычным форматированием или блок содержащий компьютерный код. Отображается моноширинным шрифтом и сохраняет пробелы и переводы строки.
<small> — определяет уменьшенный текст. Отображается шрифтом меньшего размера.
<sub> — определяет подстрочный текст, к примеру цифры в химических формулах.
<sup> — определяет надстрочный текст, к примеру, степени в математических выражениях.