Содержание

Заголовок таблицы | htmlbook.ru

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

  • left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
  • right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
  • center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
  • top — результат аналогичен действию атрибута center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
  • bottom — заголовок размещается внизу таблицы по ее центру.

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

Пример 12.7. Создание заголовка таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовок таблицы</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <caption>Изменение добычи ресурсов по годам</caption>
   <tr>
    <th>&nbsp;</th><th>2003</th><th>2004</th><th>2005</th>
   </tr>
   <tr>
    <td>Нефть</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Золото</td><td>29</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Дерево</td><td>38</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Ниже показан результат данного примера (рис.

 12.9).

Рис. 12.9. Вид заголовка таблицы в браузере Safari

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

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

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

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

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

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

  . ..
</table>

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

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

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

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

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

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

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

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

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

  • Элементом <thead> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете <col>/<colgroup> элемент, тогда заголовок должен находиться ниже его.
  • Элементом <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, который может быть добавлен к элементу <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 ячейка заголовок в таблице

Тег <th> определяет ячейку-заголовок в HTML таблице. Используется в HTML таблицах определенных тегом <table>.

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

HTML тег ячейки <th> ставится внутри тега <tr> — строки таблицы.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<th>контент ячейки</th>

Отображение в браузере

Ячейка-заголовок 1 Ячейка-заголовок 2
Обычная ячейка 1 Обычная ячейка 2
Обычная ячейка 3 Обычная ячейка 4

Пример использования <th> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Ячейки-заголовки в HTML таблице</title>
</head>
<body>
<table>
<tbody>
<tr>
<th>Ячейка-заголовок 1</th>
<th>Ячейка-заголовок 2</th>
</tr>
<tr>
<td>Обычная ячейка 1</td>
<td>Обычная ячейка 2</td>
</tr>
<tr>
<td>Обычная ячейка 3</td>
<td>Обычная ячейка 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Поддержка браузерами

Атрибуты

Атрибут Значения Описание
colspan число Количество ячеек по горизонтали, которые должны быть объединены.
headers id_заголовка Указывает заголовок, к которому относится ячейка.
rowspan число Количество ячеек по вертикали, которые должны быть объединены.
scope col
colgroup
row
rowgroup		 Устанавливает группу ячеек, к которым относится ячейка-заголовок <th>:
col — колонка; colgroup — группа колонок; row — ряд; rowgroup — группа рядов.
Устаревшие атрибуты
abbr текст Короткая версия содержимого ячейки.
align left
right
center
justify		 Задает правило выравнивания содержимого ячейки по горизонтали. В HTML5 используйте CSS.
axis имя_категории Используется для категоризации ячеек. Задает категорию, к которой принадлежит ячейка. В HTML5 используйте классы CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(216,122,030), rgb(0, 55, 191).
HTML hex: #ebedef, #999.
HTML colorname: red, black;
height пиксели
проценты		 Высота ячейки. В HTML5 используйте CSS.
nowrap пусто / nowrap Логический атрибут. Устанавливает запрет переноса в тексте ячейки. В HTML5 используйте CSS.
valign top
middle
bottom
baseline		 Задает правило выравнивания содержимого ячейки по вертикали. В HTML5 используйте CSS.
width пиксели
проценты		 Ширина ячейки. В HTML5 используйте CSS.

Таблицы в Html — теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания

Главная / Как устроены сайты / Html за 10 уроков

10 января 2021

  1. Таблицы в Html — элементы Table, Tr, Th, Td
  2. Table — основной элемент таблицы
  3. Tr — элемент строки таблицы в Html
  4. Td или Th — элементы ячеек таблицы в Html
  5. Caption — заголовок таблицы
  6. Табличная (устаревшая) верстка
  7. Tbody, Thead и Tfoot — контейнеры для строк в Html таблице
  8. Col — задаем ширину столбцов таблицы

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Предлагаю вашему вниманию очередную статью, которая будет посвящена тому, что из себя представляет таблица в Html, какие теги используются для ее создания (Tr, Th, Td, Table, Colspan, Cellpadding, Cellspacing), как задать для нее фон и границы, а так же многое другое.

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

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

Таблицы в Html — элементы Table, Tr, Th, Td

Внимание! Атрибуты bgcolor, аlign и background описанные ниже сейчас не рекомендуются к использованию. Вместо них нужно использовать соответствующие CSS свойства.

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

Раньше же, еще до внедрения CSS, вебмастера вообще не могли обойтись без них, ибо именно на них базировалась вся верстка сайтов. Использовались не только базовые тэги Table, Tr, Th и Td, но так же и весь богатый ассортимент вспомогательных элементов (Col, Tbody, Caption, Rowspan, Colspan и др. ). Вы до сих пор можете встретить в интернете сайты и форумы созданные на базе табличной верстки, что может послужить вам дополнительным стимулом к изучению основ их построения.

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

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

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

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

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

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

Но само по себе создание табличек происходит построчно — открываем Tr, а затем закрываем Tr. Сколько у вас будет таких пар элементов Tr, столько строк вы и получите. А сколько же будет столбцов?

Ровно столько, сколько вы создадите в каждой строке (Tr) ячеек (Td или Th). Если вы хотите сделать простую и симметричную табличку (см. рисунок выше), то нужно делать количество ячеек (Td или Th) в каждой строчке одинаковым.

Итак, таблицы в Html формируются построчно — Tr отвечают за формирование строк, а Td или Th — за формирование столбцов. Что примечательно, внутри Td или Th можно вставлять абсолютно любой контент — текст, строчные или же блочные элементы (нумерованные или маркированные списки (UL или OL), изображения с помощью img и его всевозможных атрибутов, заголовки, абзацы) и т.п.

Т.о. получается, что не может быть таблички в Html коде, которая бы состояла меньше, чем из трех элементов — Table, Tr, Td (или Th).

Table — основной элемент таблицы

Давайте начнем рассмотрение с тега Table, а именно с атрибутов, которые у него существуют:

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

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

Но тут не все так просто, ибо применение значений left и right в Align приведет не к выравниванию нашей таблички по левому или правому краю, а к обтеканию ее текстом, в полной аналогии с тем, как мы это видели при обтекание картинки текстом в html. Ну, а при использовании значения Center для Align, она просто будет выровнена по центру без всяких обтеканий.

С помощью атрибута Width можно задать ширину таблицы, при этом можно использовать как абсолютные значения в пикселах, так и относительные в процентах (100% будет соответствовать всему доступному пространству по ширине).

Идем дальше. Cellpadding позволяет задать отступ контента в ячейках (Td или Th) от ее краев (по всем четырем сторонам одновременно), а Cellspacing позволяет задать расстояние между соседними ячейками таблицы в пикселах (по умолчанию используется значение в два пиксела). Думаю, что идея понятна, но все же нагляднее будет показать это на примере:


Следующие атрибуты тега Table отвечают за фон нашей таблицы — это элементы Bgcolor и Background. Как вы, наверное, помните, с помощью Background (который, кстати, используется только в теге Body и элементах — Table, Tr, Th или Td) можно будет выбрать в качестве фона любую картинку из файла, путь до которого будет указан в качестве значения этого атрибута.

Этой картинкой, как плиткой, будет застелена вся веб страница (в случае тега Body) или же вся таблица (в случае Table), например, так:

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

Идем дальше. На очереди у нас атрибут Border, который отвечает за формирование рамки. Тут есть тонкости в объяснении прорисовки рамок, но для простоты можно сказать, что рамка будет рисоваться вокруг ячеек и вокруг самой таблицы. В Border у вас будет возможность задать толщину этой рамки в пикселах. По умолчанию рамка не рисуется (border=0).

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

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

Tr — элемент строки таблицы в Html

С помощью тега Tr мы просто располагаем все заключенные в нем ячейки (Td или Th) в одной строке и все, самого Tr не видно. Отсюда следует важный вывод — все атрибуты этого тэга применяются именно для ячеек заключенных в этом контейнере. Наиболее употребляемые на данный момент атрибуты Tr представлены на рисунке:

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

Valign задает выравнивание по вертикали контента во всех ячейках (Td или Th) данной строки (Tr). Значения Top, Middle и Bottom задают выравнивание, соответственно, по верхнему краю, по середине и по нижнему краю. По умолчанию используется выравнивание по середине высоты — Middle.

Большой шрифтМалый шрифт

Значение Baseline задает выравнивание текста в Td или Th данной строки по базовой линии шрифтов. Это может быть удобно, когда у вас в разных ячейках текст имеет разный размер шрифта, а выравнивание Baseline в Valign сделает такую таблицу более юзабельной для читателей (на мой взгляд):

По базовой линии шрифтов будут выравниваться только первые строчки контента в ячейках (Td или Th), а все остальные строчки контента будут расположены как получится.

Можно будет еще использовать атрибут Bgcolor в теге Tr, заливая эти строки нужным вам цветом фона. Т.о. все ячейки в этой строчке залиты выбранным вами цветом:

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

Td или Th — элементы ячеек таблицы в Html

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

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

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

Widht и Height позволяют задать высоту и ширину ячейки, как в пикселах, так и в процентах (по ширине). Bgcolor и Background в Html элементах Td или Th позволяют задать отдельный фон (в виде цвета или же картинки) для каждой конкретной ячейки:

Nowrap в Td или Th запрещает перенос контента в ячейке на новую строку, если только в тексте этого контента не встретится тег Br. Т.е в этом случае пробельные символы для автоматического переноса текста использоваться не будут. Наверное, этот атрибут можно рассматривать как своеобразный аналог описанного здесь неразрывного пробела в Html.

Ну, вот и добрались мы с вами до очень интересных и, главное, полезных атрибутов — Colspan и Rowspan. Они означают охват. Rowspan — охват строчек, а Colspan — охват столбцов. Служат они, соответственно, для объединения ячеек в столбце или же в строке.

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

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

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

Существует еще один дополнительный элемент, который называется «Html заголовок таблицы» и формируется он с помощью тегов Caption. Этот элемент используется не более одного раза (или не используется вообще) и ставится сразу же после открывающего тега Table. Внутри Caption может стоять только строчный контент и никаких блочных элементов в виде заголовков (h2, h3, h4, h5, H5, H6) и параграфов (p) там быть не должно.

Положение заголовка (Caption) можно задать с помощью атрибута Align. Значения Top и Bottom зададут размещение заголовка, соответственно, над и под таблицей. Значения Left и Right сейчас не используются, т.к. совершенно по разному работают в различных браузерах. Про них лучше всего будет забыть. Т.е. по большому счету заголовок (Caption) может находиться только либо под табличкой, либо над ней (это значение используется по умолчанию):

В общем случае, можно привести такую вот блок схему построения:

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

Для начала прописываем открывающий тег Table и сразу за ним открываем тэг первой строки Tr. Первая строчка нашей будущей таблицы состоит из одной ячейки, которая охватывает сразу два столбца, поэтому к тегу этой ячейки нужно будет дописать атрибут Colspan=2:

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

А вот вторая ячейка второй строчки примечательна, ибо она охватывает сразу две строки и поэтому нам нужно будет к ее тегу дописать атрибут Rowspan=2:

<tr>

<td>Обычная ячейка 2-ой строки </td>
<td rowspan=2>Объединенная через Rowspan 2-ой строки </td>
</tr>

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

<tr>

<td>Обычная в 3-ей строке </td>
</tr>

Ну, а теперь объединим все это в одном коде и посмотрим, что получится:

Собственно, получилось так, как мы планировали. Понятно, что сложного тут ничего нет — достаточно понять логику работы атрибутов Colspan и Rowspan.

Табличная (устаревшая) верстка

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

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

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

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

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

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

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

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

Принципы табличной верстки в Html очень просты, но вот ее реализация требует от вебмастера повышенного внимания, а обилие тегов Table, Tr, Th, Td и их атрибутов очень сильно засоряет исходный код страницы, что уже само по себе не очень здорово. Поисковые системы вынуждены будут перелопатить кучу ненужных тегов, чтобы добраться до того контента, который им нужно будет проиндексировать (читайте тут про индексацию сайта и robot txt).

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

Tbody, Thead и Tfoot — контейнеры для строк в Html таблице

Но давайте опять вернемся к нашим баранам и рассмотрим еще несколько элементов, которые позволяли раньше (когда еще не было CSS) задавать свойства сразу для большого числа строк в тэге Table. Tr сами по себе являются невидимыми контейнерами для Td или Th, но кроме этого существует еще три типа контейнеров, которые в свою очередь служат контейнерами для Tr.

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

В Html таблице секция Thead может прописываться только один раз или же ее может не быть вообще. Тоже самое касается и контейнера из элементов Tfoot. А вот хотя бы одна секция Tbody обязательно должна присутствовать.

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

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

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

Col — задаем ширину столбцов таблицы

Col и Colgroup сейчас имеют практически одинаковое влияние, поэтому поговорим про их использование на примере элемента Col. Нужен он для удобного задания ширины столбцов и строк. У Col есть два основных атрибута Span и Width, которые позволяют задать разную ширину для всех столбцов, заключенных в теги Col.

Span задает охват (размер контейнера) путем указания в нем количества столбцов, для которых будет применяться указанная в Width ширина. Например, так:

Т.е. для первых двух столбцов таблицы я задал ширину в 50 пикселей, для третьего столбца — 200 пикселей, ну а для двух оставшихся — по 100 пикселей. Все довольно просто и понятно, на мой взгляд. Но на самом деле ширина столбцов, заданная через элементы Col, это всего лишь ваша декларация, ибо при изменении размера окна браузера ширина столбцов будет меняться.

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

HTML Таблицы

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

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента <table> парный блочный тег <tr> (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов <tr> вы добавите, столько строк в таблице и будет. Открывающий тег <tr> обозначает начало новой строки таблицы. После него помещаются элементы <td> (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента <td> вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом </tr>.

Элемент <th> (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент <td>, однако его назначение — создание заголовка строки или столбца. Как правило, элемент <th> размещают в первой строке таблицы. Браузеры отображают текст в элементе <th> жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента <th> помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.

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

Пример: Простая HTML-таблица

Заголовок 1Заголовок 2Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3 

<table>
  <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
  <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
  <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
</table>

Граница таблицы

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

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

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

border
Заголовок 1Заголовок 2Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Рамка вокруг таблицы</title>
<style>
    table, th, td {
        border: 1px solid black;
    }
</style>
</head>
  <body>
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>
  </body>
</html>
Свойство border следует устанавливать как для самой таблицы <table> так и для её ячеек <th> и <td>.

Одинарная рамка для таблицы

По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:

<style>
  table {
    border-collapse: collapse;
  }
</style>

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

border-collapse
Заголовок 1Заголовок 2Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Рамка вокруг таблицы</title>
<style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
    }
</style>
</head>
  <body>
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>
  </body>
</html>

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

По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу <td> или <th>. Интервал ячеек (border-spacing) — это расстояние между ними (<td> или <th>). Сначала присвойте значение separate свойству border-collapse элемента <table>, а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента <table>, но в спецификации HTML5 они были признаны устаревшими.

Пример использования padding и border-spacing:

Пример: Применение свойств

padding и border-spacing
padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
border-spacing — это расстояние между ячейками (зеленый цвет)
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding и border-spacing</title>
<style>
    table, td {
      border: 1px solid black;    
    }
    table { 
      border-spacing: 15px;
      background-color:green;
    }
    td {
      background-color:yellow;
      padding: 15px;
    }
</style>
</head>
  <body>
  <table>  
    <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
    <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
  </body>
</html>
Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает.

Ширина таблицы

Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:

table {width: 100%;}

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

width
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>width: 100%</title>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 15px;
    }
</style>
</head>
  <body>
  <table>  
    <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
    <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
  </body>
</html>

Объединение ячеек (colspan и rowspan)

Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки <th> или ячейки <td> объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.

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

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

Пример: Применение атрибута

colspan
Ячейка на два столбца
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Атрибут colspan</title>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 5px;
    }
</style>
</head>
  <body>
  <table>  
    <tr><th colspan="2">Ячейка на два столбца</th></tr>
    <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
    <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
  </body>
</html>

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

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

Пример: Применение атрибута

rowspan
Ячейка на две строки Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Атрибут rowspan</title>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 5px;
    }
</style>
</head>
  <body>
  <table>  
    <tr><th rowspan="2">Ячейка на две строки</th>
        <td>Ячейка 1</td><td>Ячейка 2</td></tr>
    <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
  </body>
</html>

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

Для создания заголовка или подписи таблицы используется парный тег <caption> (от англ. caption – подпись). Элемент <caption> предназначен для организации заголовка таблицы. Располагается сразу после тега <table>, но вне описания строки или ячейки.

Пример: Применение тега

<caption>
Это заголовок таблицы
Ячейка на две строки Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Элемент caption</title>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 5px;
    }
</style>
</head>
  <body>
  <table>
  <caption>Это заголовок таблицы</caption>  
    <tr><th rowspan="2">Ячейка на две строки</th>
        <td>Ячейка 1</td><td>Ячейка 2</td></tr>
    <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
  </body>
</html>

Теги группирования элементов таблиц

Для группирования элементов таблиц служат теги <thead>, <tbody> и <tfoot>. Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз дания верхней шапки таблицы) используется тег <thead>. Заголовки таблицы должны быть помещены в элемент <thead>, например:

<thead>
<tr><th>Заголовок 1</th><th>Заголовок 2< /th></tr>
</thead>

Основное содержимое (тело) таблицы должно находиться внутри элемента <tbody> (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег <tfoot> (в одной таблице допускается не более одного тега <tfoot>). В исходном коде тег <tfoot> ставится до тега <tbody>. Кроме логического группирования одной из причин использования элементов <thead> и <tfoot> является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок (<thead>) и последнюю строку (<tfoot>), когда пользователь станет прокручивать вашу таблицу.

Пример: Теги

<thead>, <tbody> и <tfoot>
Это шапка таблицы
Это подвал таблицы
Ячейка 1Ячейка 2Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Теги thead, tbody и tfoot</title>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 5px;
    }
</style>
</head>
  <body>
<table>
<thead>  
<tr><th colspan="4">Это шапка таблицы</th></tr>
</thead>
<tfoot>
<tr><td colspan="4">Это подвал таблицы</td></tr>
</tfoot>
<tbody>
<tr><td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</tbody>  
</table>
  </body>
</html>

Несмотря на то, что мы перед <tbody> добавили <tfoot>, он, тем не менее, появляется в конце таблицы. Это исходит из того, что <tbody> может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему <tfoot> в коде прописывается перед элементом <tbody>.

Задачи

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

    Напиште разметку для таблицы, изображенной на рис.1.

    Задача HTML: Реши сам »

    Ячейка на два столбца
    Ячейка 1 Ячейка 2

    Рис.1

  • Объединение строк

    Напиште разметку для таблицы, изображенной на рис.1.

    Задача HTML: Реши сам »

    Ячейка на три строки Ячейка 1
    Ячейка 2
    Ячейка 3

    Рис.1

  • Убрать двойную рамку таблицы

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

    Задача HTML: Реши сам » 
    Заголовок 1Заголовок 2Заголовок 3
    Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 
    Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 
    
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Рамка вокруг таблицы</title>
<style>
  table, th, td {border: 1px solid black;}
</style>
</head>
      <body>
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 1x1 </td><td>Ячейка 1x2 </td><td>Ячейка 1x3 </td></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
  </table>
  </body>
    </html>

  • Широкая таблица

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

    Задача HTML: Реши сам » 
    Заголовок 1Заголовок 2Заголовок 3
    Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 
    Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 
    
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Ширина таблицы</title>
<style>
  table {border-collapse: collapse;}
  th, td {border: 1px solid black;}
</style>
</head>
      <body>
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 1x1 </td><td>Ячейка 1x2 </td><td>Ячейка 1x3 </td></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
  </table>
  </body>
    </html>

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

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

    Задача HTML: Реши сам » 
    Основной заголовок таблицы
  
    Заголовок 1Заголовок 2Заголовок 3
    Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 
    Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 
    Рис.1
    
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Ширина таблицы</title>
<style>
  table {border-collapse: collapse;width:100%}
  th, td {border: 1px solid black;}
</style>
</head>
      <body>
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 1x1 </td><td>Ячейка 1x2 </td><td>Ячейка 1x3 </td></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
  </table>
  </body>
    </html>

  • Поле внутри ячеек

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

    Задача HTML: Реши сам » 
    Ячейка 1Ячейка 2
    Ячейка 3Ячейка 4
    Рис.1
    
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Интервал между ячейками</title>
<style>    
    table, td {
      border: 1px solid black;    
    }    
</style>
</head>
      <body>
  <table>  
    <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
    <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
  </body>
    </html>

  • Объединение строк

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

    фурма ананасы персики
    бананы груши
    авокадо

    Рис.1

    <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Объединение строк</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    } 
  </style>   
 </head>
 <body>
  <table>
    <tr>
      <td>фурма</td>
      <td rowspan="3">ананасы</td>
      <td>персики</td>
    </tr>
    <tr>
      <td>бананы</td>
      <td rowspan="2">груши</td>
    </tr>
    <tr>
      <td>авокадо</td>
    </tr>
  </table>
 </body>
</html>


Краткий курс HTML 5. Таблицы — Exlab

10. Таблицы

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

<table border="1">
   <caption>Выписка лицевого счета</caption>
   <tr>
      <th>Месяц</th>
      <th>Баланс</th>
   </tr>
   <tr>
      <td>Январь</td>
      <td>500 грн.</td>
   </tr>
</table>

Если необходимо отобразить описание таблицы, то его можно поместить в элемент <caption>, располагаемый сразу за открывающим тегом <table>. Далее последовательно располагаются строки таблицы, обозначаемые тегом <tr>. Каждая строка содержит в себе ячейки <th> или <td>, формируя таким образом столбцы таблицы.

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

С помощью атрибута border элемента <table> можно определить, будут ли ячейки таблицы обведены рамкой или нет. Значение 1 указывает, что рамка нужна, пустое значение — нет.

Объединение ячеек

Логично, что в каждой строке должно быть одинаковое количество ячеек, чтобы таблица имела прямоугольный вид. Но как быть, если необходимо растянуть какую-нибудь ячейку на несколько столбцов или строк? На помощь приходят атрибуты colspan и rowspan элементов <td> и <th>. Присвоив ячейке атрибут colspan="3", вы сообщите браузеру, что этот элемент занимает место трех ячеек в строке — свое собственное и двух следующих. Соответственно, две следующих ячейки указывать не нужно, и строка будет содержать на 2 элемента <td> (или <th>) меньше.


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

Аналогично, атрибут rowspan="2", например, в пятой ячейке строки означает, что она занимает два места в своем столбце, и в следующем элементе <tr> пятую ячейку нужно пропустить. Помните, что если вы примените один из этих атрибутов, но забудете удалить «лишние» ячейки, то браузер сместит их в следующий столбец, передвинув остальные ячейки еще дальше и исказив тем самым таблицу.

Группирование строк и столбцов

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

СреднийКрасноглазых
РазмерВес
Среднее1.80.002541.5%
Самцы1.90.00340%
Самки1.70.00243%
Популяция фруктовых мух

Для объединения строк в группы предназначены три тега. Во-первых, строки с ячейками заголовка можно поместить в элемент <thead>. Во-вторых, завершающие строки с «итоговыми» ячейками — в элемент <tfoot>. Наконец, все остальные строки с данными группируются в одном или нескольких элементах <tbody>. Таким образом вы можете сформировать необходимое вам количество групп. Несмотря на то, что строки из <tfoot> будут отображены последними, размещать сам элемент <tfoot> можно как после последнего, так и перед первым элементом <tbody> (после <thead>). В одной таблице может быть только по одному элементу <thead> и <tfoot>, и любое количество <tbody>. Визуально эти теги не отличаются, пока вы не определите для них соответствующие стили CSS.

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

<table>
   <col/>
   <colgroup span="2"></colgroup>
   <col/>
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2" scope="colgroup">Средний</th>
         <th rowspan="2" scope="col">Красноглазых</th>
      </tr>
      <tr>
         <th scope="col">Размер</th>
         <th scope="col">Вес</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th scope="rowgroup">Среднее</th>
         <td>1.8</td>
         <td>0.0025</td>
         <td>41.5%</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <th scope="row">Самцы</th>
         <td>1.9</td>
         <td>0.003</td>
         <td>40%</td>
      </tr>
      <tr>
         <th scope="row">Самки</th>
         <td>1.7</td>
         <td>0.002</td>
         <td>43%</td>
      </tr>
   </tbody>
</table>

Если вы используете <thead> или <tfoot>, то должны использовать и <tbody>. Причем в каждой из групп обязательно должна быть хотя бы одна строка <tr>, и не должно быть строк вне групп.

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

На самом деле, <col /> не создает группу, а лишь позволяет определить общие атрибуты столбцов без необходимости указывать их в каждой ячейке. Например, чтобы назначить всем ячейкам первых двух столбцов class="myData", достаточно добавить в начало таблицы элемент:

<col span="2" />

<colgroup> позволяет сделать то же самое, но при этом лексически объединяет столбцы в группу. Бывает необходимость сгруппировать столбцы, но присвоить им разные классы или другие стандартные атрибуты. В таком случае в элемент <colgroup> помещается необходимое количество тегов <col />. При этом атрибут span указывается только в них, а его значение для <colgroup> определяется автоматически, как сумма значений span, присвоенных расположенным внутри элементам <col />. Другие теги в <colgroup> запрещены.

Размещая последовательно несколько элементов <col /> и/или <colgroup> в таблице, можно добиться группирования столбцов любым необходимых образом. Помните, что если вы применяете эти теги, то в итоге должны перечислить в них все столбцы таблицы, количество которых определяется строкой, с наибольшим количеством ячеек. Например, если в таблице 5 столбцов, а вам необходимо сгруппировать только второй и третий, указав им классы second и myGroup соответственно, то выглядеть это будет следующим образом:

<col />
<colgroup>
   <col />
   <col />
</colgroup>
<col span="2" />

Атрибут scope элемента <th> позволяет указать, относится ли этот заголовок к строке, столбцу или какой-либо группе. Допустимые значения:

col — ячейка является заголовком столбца
row — ячейка является заголовком строки
colgroup — ячейка является заголовком группы столбцов, в которой находится
rowgroup — ячейка является заголовком группы строк, в которой находится

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

Оформляем таблицы с помощью CSS: как работать с полями,…

Ещё несколько лет назад фронтенд-разработчики активно использовали табличную вёрстку для создания веб-страниц. Сегодня появились более удобные инструменты, а тег <table> теперь применяется по прямому назначению: для создания таблиц с данными. Однако оформлять таблицы по-прежнему не так просто. Некоторые CSS-свойства, например, margin, border-radius, z-index, не работают с элементами таблиц <tbody>, <thead>, <tr>. Статья поможет обойти эти ограничения.

Структура таблицы

Эталонный вариант таблицы

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

<table>
  <thead>
    <tr>
      <th>MO</th>
      <th>TU</th>
      <th>WE</th>
      <th>TH</th>
      <th>FR</th>
      <th>SA</th>
      <th>SU</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="7">
        Working hours
      </th>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="7">
        Workout
      </th>
    </tr>
    <tr>
      <td>0.5</td>
      <td>0.5</td>
      <td>0.5</td>
      <td>1</td>
      <td>0.5</td>
      <td>2</td>
      <td>0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="7">
        Total
      </th>
    </tr>
    <tr>
      <td>8.5</td>
      <td>8.5</td>
      <td>9.5</td>
      <td>10</td>
      <td>5.5</td>
      <td>2</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Выше представлена структура таблицы в HTML. В <thead> содержится главное название. В таблице есть несколько секций <tbody>, каждая из которых имеет собственный подзаголовок.

Что не так с

margin и как оформить отступы для элементов таблицы

Как видно на иллюстрации в начале статьи, между главным заголовком и секцией <tbody>, а также между остальными секциями <tbody>, есть отступы. Можно подумать, что они определяются свойствами margin-top для <tbody>, но это не так.

Если попытаться использовать margin-top для оформления <tbody>, <thead> или <tr>, добиться отступов не удастся. Чтобы margin заработали, можно изменить свойство display, которое менять опасно, так как изменения могут нарушить форматирование таблицы. Поэтому лучше воспользоваться альтернативными решениями, которые описаны ниже.

Свойство

border

Самый простой способ получить отступы без использования margin — применить к <tbody> border-top: 1 em. 

// Это нужно, чтобы работал border-top
.table {
  border-collapse: collapse; // 1
  border-spacing: 0;
}

.section {
  border-top: 1em solid transparent;
}

Все секции <tbody>, у которых должны быть отступы, имеют класс .section. Чтобы свойство border-top сработало, необходимо применить к таблице border-collapse: collapse.

Псевдоэлементы

::before и ::after

Псевдоэлементы ::before и ::after — ещё один способ добавить отступы для элементов таблицы. 

.section::before {
  height: 1em;
  display: table-row;
  content: '';
}

В данном случае создаётся пустой ряд, который обеспечивает визуальный отступ между секциями <tbody>.

Вы можете использовать для оформления отступов как псевдоэлементы, так и свойство border.

Как применить к элементам таблицы

border-radius

Задача: добавить к секциям <tbody> границы и применить к ним border-radius. Напрямую это сделать невозможно — border и border-radius не работают с <tbody>. 

// 1. Приходится использовать свойство box-shadow
//    border-radius не работает с <tbody>.
.section-step {
  border-radius: 0.25em; // 1
  box-shadow: 0 0 0 1px #ccc; // 1
}

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

Как оформлять ячейки таблицы

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

Нужны марджины, а не паддинги

После добавления границ можно заметить, что полученные отступы работают не как «марджины», а как «паддинги». Это можно изменить, если работать с границами ячеек и использовать селекторы :first-child и :last-child.

.section-step th,
.section-step td {
  border: 0 solid #ccc;
}

.section-step th:first-child,
.section-step td:first-child {
  border-left-width: 1px;
}

.section-step th:last-child,
.section-step td:last-child {
  border-right-width: 1px;
}

.section-step tr:first-child th,
.section-step tr:first-child td {
  border-top-width: 1px;
}

.section-step tr:first-child th:first-child,
.section-step tr:first-child td:first-child {
  border-top-left-radius: 0.25em;
}

.section-step tr:first-child th:last-child,
.section-step tr:first-child td:last-child {
  border-top-right-radius: 0.25em;
}

.section-step tr:last-child th,
.section-step tr:last-child td {
  border-bottom-width: 1px;
}

.section-step tr:last-child th:first-child,
.section-step tr:last-child td:first-child {
  border-bottom-left-radius: 0.25em;
}

.section-step tr:last-child th:last-child,
.section-step tr:last-child td:last-child {
  border-bottom-right-radius: 0.25em;
}

В примере выше стили применяются к соответствующим элементам th и td ячеек таблицы. К ячейкам, которые находятся в углах таблицы, применяется border-radius. Все ячейки, которые находятся по краям таблицы, имеют границы. Селекторы :first-child и :last-child позволяют обращаться к нужным ячейкам.

Как применять

z-index к элементам таблицы

Проблемы с box-shadow

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

В обычной ситуации можно использовать для решения таких проблем z-index. Но с таблицами всё сложнее: z-index не работает с <tbody>. Проблема решается, если вы знаете, как работать с контекстом наложения. Если применить к элементу position: relative и z-index, появляется новый контекст наложения. Также эту задачу можно решить с помощью transform: translate (0, 0).

Заключение

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

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

Адаптированный перевод статьи Styling HTML Tables: How to Apply Margins, Borders and z-index on Table Elements by Markus Oberlehner. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

Рекомендуемый дизайн базы данных SQL для тегов или тегов

Обычно я соглашусь с Яаковом Эллисом, но в этом частном случае есть другое жизнеспособное решение:

Используйте две таблицы: 

  Стол: Позиция
Столбцы: ItemID, Title, Content.
Индексы: ItemID

Таблица: Тег
Столбцы: ItemID, Title.
Индексы: ItemId, Title

У этого есть несколько основных преимуществ:

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

Затем он делает запросы проще (и, возможно, быстрее). Вам необходимо выполнить три основных запроса к базе данных: вывести все тегов для одного элемента , нарисовать облако тегов и выбрать все элементы для одного заголовка тега.

Все теги для одного товара:

3 стола: 

  ВЫБРАТЬ Tag.Title
  ОТ тега
  ПРИСОЕДИНЯЙТЕСЬ к ItemTag ON Tag.TagID = ItemTag.TagID
 ГДЕ ItemTag.ItemID =: id

2 стола: 

  ВЫБРАТЬ Тег.Заголовок
ОТ тега
ГДЕ Tag.ItemID =: id

Облако тегов:

3 стола: 

  SELECT Tag.Title, count (*)
  ОТ тега
  ПРИСОЕДИНЯЙТЕСЬ к ItemTag ON Tag.TagID = ItemTag.TagID
 GROUP BY Tag.Title

2 стола: 

  SELECT Tag.Title, count (*)
  ОТ тега
 GROUP BY Tag.Title

Товаров для одного тега:

3 стола: 

  ВЫБРАТЬ Позиция. *
  ОТ Пункт
  ПРИСОЕДИНЯЙТЕСЬ к ItemTag НА Item.ItemID = ItemTag.ItemID
  ПРИСОЕДИНЯЙТЕСЬ к тегу на ItemTag.TagID = Tag.TagID
 ГДЕ Tag.Title =: title

2 стола: 

  ВЫБРАТЬ Позиция. *
  ОТ Пункт
  ПРИСОЕДИНЯЙТЕСЬ к тегу Item.ItemID = Tag.ItemID
 ГДЕ Tag.Title =: title

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

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

Аргумент непоследовательности тоже немного спорен. Теги — это поля с произвольным текстом, и здесь нет ожидаемой операции, такой как «переименовать все теги с« foo »в« bar »».

Итак, tldr: Я бы выбрал решение с двумя столами. (На самом деле я собираюсь это сделать. Я нашел эту статью, чтобы узнать, есть ли веские аргументы против этого.)

HTML 5 Тег

Тег HTML

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

Элементы таблицы

Таблицы состоят из элемента

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

Элемент

может содержать следующие элементы (и в этом порядке):

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