Таблицы представляют собой довольно сложные структуры, состоящие из строк и столбцов. Внешняя основа таблицы всегда представлена элементом table.
<table> … </table>
Внутри этого элемента происходит непосредственное определение таблицы. Кстати, рекомендуется назначить рамку таблице в HTML во время ее создания. Так легче понять, как идут строки и столбцы. Для этого начальному <table> назначают комбинацию атрибута-значения border="1". (Обратите внимание, что атрибут border в HTML не следует использовать. Здесь лучше воспользоваться соответствующими CSS свойствами. Но об этом позже).
<table border="1"> … </table>
Далее идет определение строк таблицы. Это делается с помощью элемента tr.
<table border="1"> <tr></tr> </table>
Но это все еще не приводит к желаемому результату. Далее необходимо определить столбцы. Это снова делается через элемент td.
<table border="1">
<tr>
<td></td>
</tr>
</table>Теперь можно определять первое содержимое таблицы. Это делается между <td> и </td>.
<table border="1">
<tr>
<td>Содержимое 1</td>
</tr>
</table>
Только сейчас стоит взглянуть на результат в браузере.
• С помощью CSS можно форматировать каждый раздел по желанию.
• При печати длинных таблиц браузеры могут повторять заголовок и подвал таблицы на каждой странице.
Заголовок таблицы начинается с thead. Затем идут строки таблицы, которые относятся к заголовку. Не забудьте закрыть заголовок таблицы </thead>.
Для добавления подвала таблицы он должен быть определен до тела таблицы. Подвал начинается с <tfoot>. Затем следуют одна или несколько строк, относящихся к подвалу. Подвал таблицы закрывается с помощью </tfoot>.
Фактическое тело таблицы определяется внутри элемента tbody. Этот tbody может повторяться. Каждое тело таблицы заканчивается </tbody>.
Задание столбцов заранее
Как таблица отображается в браузерах, в первую очередь зависит от количества строк и столбцов. Процесс отображения таблицы для браузера, однако, не такой простой. Фактически браузер должен сначала прочитать всю таблицу, прежде чем он сможет её показать. Особенно для очень обширных таблиц это, конечно, может занять некоторое время. Эту проблему можно обойти, сообщив браузеру напрямую, из скольки столбцов на самом деле состоит таблица.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Название</th>
<th>Цена</th>
</tr>
<tr>
<td>23223423434</td>
<td>Краткая история почти всего</td>
<td>29,95 евро</td>
</tr>
</table>
Через colgroup вводится предварительное определение структуры колонок. Обратите внимание, что в HTML5 большинство атрибутов для colgroup, доступных в предыдущих версиях HTML, уже не разрешены. Теперь разрешено только атрибут span. Этот атрибут ожидает количество столбцов в таблице.
Элемент colgroup стоит непосредственно за начальным <table>. Сами столбцы затем определяются через отдельные элементы col.
При использовании colgroup есть два принципиальных варианта:
• C атрибутом span
• Без атрибута span
Если не использовать атрибут span, внутри элемента colgroup для каждого столбца, через который простирается группа столбцов, необходимо определить отдельный элемент col. Учитывайте, что элемент col представляет собой самостоятельный элемент.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Название</th>
<th>Цена</th>
</tr>
<tr>
<td>23223423434</td>
<td>Краткая история почти всего</td>
<td>29,95 евро</td>
</tr>
</table>
Существует также смешанная форма.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Это всегда удобно, когда один столбец должен быть предварительно определен отдельно, но другие нужно объединить в группу.
