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

• Элемент <TABLE>
• Элемент <COL>
• Элемент <COLGROUP>
• Элемент <THEAD>
• Элемент <TBODY>
• Элемент <TFOOT>
• Элемент <TR>
• Элемент <CAPTION>
• Элемент <TH>
• Элемент <TD>
• Примеры написания таблиц.

Элемент <TABLE>

Элемент <TABLE> используется с целью внедрения таблиц в Web страницу. Они удобны тем, что броузер сам прорисовывает рамку таблицы. Размер рамки может задаваться как фиксированно, так и автоматически согласовываться с размерами окна просмотра броузера и с размерами, находящегося в ячейках текста и рисунков. Кроме того таблицы позволяют решать чисто дизайнерские задачи: выравнивать части таблицы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на колонки и т.д.

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

По правде говоря само по себе использование таблиц для визуального форматирования есть нарушение того принципа, которого рекомендует придерживаться W3C – таблицы должны использоваться только для внедрения таблиц, а позиционировать элементы необходимо при помощи слоев. При создании таблиц используется принцип вложения: между тэгами <TABLE> и </TABLE> задается заголовок вне рамки таблицы <CAPTION>, создается ряд элементов <TR>, определяющих начало строки, а внутри этих элементов размещаются элементы <TD>, описывающие ячейки и <TH>, описывающие заглавные ячейки.

Элемент <TABLE> может иметь атрибуты:

• bgcolor
  Этот атрибут задает фоновый цвет ячейкам, которые не обладают собственным атрибутом bgcolor или background.
  <TABLE bgcolor=цвет>
• background
  Этот атрибут задает фоновый рисунок ячейкам, которые не обладают собственным атрибутом bgcolor или background.
  <TABLE background=URL файла изображения>
• bordercolor
  Этот атрибут задает цвет рамки, используется только с атрибутом border.
  <TABLЕ border=число bordercolor=цвет >
• bordercolorlight
  Этот атрибут задает цвет рамки, используется только с атрибутом border.
  <TABLE border=число bordercolorlight=цвет>
• bordercolordark
  Этот атрибут задает цвет рамки, используется только с атрибутом border.
  <TABLE border=число bordercolordark=цвет>
• align
  Этот атрибут задает задает режим горизонтального выравнивания таблицы на странице, он может принимать значения left, center и right .
  <TABLE align= способ >
• width
  Этот атрибут задает ширину таблицы в пикселах или процентах от всего окна.
  <TABLE width=число или %>
• border
  Этот атрибут задает ширину внешнего обрамления таблицы в пикселах.
  <TABLE border=число >
• cellspacing
  Этот атрибут задает ширину внутреннего обрамления в пикселах.
  <TABLE сellspacing=число >
• сellpadding
  Этот атрибут задает отступ между содержимым ячейки и обрамлением таблицы в пикселах.
  <TABLE сellpadding=число >
• summary
  Этот необязательный атрибут задает краткое описание таблицы для некоторых броузеров.
  <TABLE summary=описание >
• rules
  Этот атрибут задает линии между ячейками.
  <TABLE rules=all >
  • none
    Нет линий, значение используется по умолчанию.
  • groups
    Линии отображаются только между группами строк THEAD, TFOOT, и TBODY или группами столбцов COLGROUP и COL.
  • rows
    Линии отображаются только между строками.
  • cols
    Линии отображаются только между столбцами.
  • all
    Линии отображаются между строками и столбцами.
• frame
  Этот атрибут указывает, какие стороны кадра, окружающего таблицу, будут видимы.
  <TABLE frame=void> Возможные значения:
  • void
    Сторон нет. Это значение используется по умолчанию.
  • above
    Только верхняя часть.
  • below
    Только нижняя часть.
  • hsides
    Только верхняя и нижняя часть.
  • vsides
    Только левая и правая части.
  • lhs
    Только левая часть.
  • rhs
    Только права часть.
  • box
    Все четыре части.
  • border
    Все четыре части.
• id
  Этот атрибут задает имя для ссылки.
  <TABLE id=имя>

Элемент <COL>

Элемент <COL> используется с целью задания колонок таблицы, может иметь атрибуты:

• width
  Этот атрибут задает ширину ячеек в колонке.
  <COL width=число>
• bgcolor
  Этот атрибут задает цвет фона ячеек.
  <СOL bgcolor= цвет >
• align
  Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
  <СOL align= способ >
• valign
  Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle – по середине и top – вверху.
  <СOL valign=значение>
• id
  Этот атрибут задает имя для ссылки.
  <COL id=имя>

Элемент <COLGROUP>

Элемент <COLGROUP> используется с целью задания групп колонок таблицы, может иметь атрибуты:

• width
  Этот атрибут задает ширину ячеек.
  <COLGROUP width=число>
• bgcolor
  Этот атрибут задает цвет фона ячеек.
  <COLGROUP bgcolor= цвет >
• align
  Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
  <COLGROUP align= способ >
• valign
  Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle – по середине и top – вверху.
  <COLGROUP valign=значение>
• span
  Этот атрибут задает количество колонок в группе.
  <COLGROUP span=число>
• width
  Этот атрибут задает ширину ячеек в колонках.
  <COLGROUP width=число>
• id
  Этот атрибут задает имя для ссылки.
  <COLGROUP id=имя>

Элемент <THEAD>

Элемент <THEAD> используется с целью логического задания групп строк для верхней “шапки”.
<THEAD ><TR ><TD >…<TD >…</THEAD>

• bgcolor
  Этот атрибут задает цвет фона ячеек.
  <THEAD bgcolor= цвет >
• align
  Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
  <THEAD align= способ >
• valign
  Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle – по середине и top – вверху.
  <THEAD valign=значение>
• id
  Этот атрибут задает имя для ссылки.
  <THEAD id=имя>

Элемент <TBODY>

Элемент <TBODY> используется с целью логического задания групп строк “тела” таблицы.
<TBODY ><TR ><TD >…<TD >…</TBODY>

• bgcolor
  Этот атрибут задает цвет фона ячеек.
  <TBODY bgcolor= цвет >
• align
  Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
  <TBODY align= способ >
• valign
  Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle – по середине и top – вверху.
  <TBODY valign=значение>
• id
  Этот атрибут задает имя для ссылки.
  <TBODY id=имя>

Элемент <TFOOT>

Элемент <TFOOT> используется с целью логического задания групп строк для нижней “шапки”.
<TFOOT ><TR ><TD >…<TD >…</THEAD>

• bgcolor
  Этот атрибут задает цвет фона ячеек.
  <TFOOT bgcolor= цвет >
• align
  Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
  <TFOOT align= способ >
• valign
  Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle – по середине и top – вверху.
  <TFOOT valign=значение>
• id
  Этот атрибут задает имя для ссылки.
  <TFOOT id=имя>

Начало строки: элемент <TR>

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

• bgcolor
  Этот атрибут задает цвет фона ячеек.
  <TR bgcolor= цвет >
• align
  Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
  <TR align= способ >
• valign
  Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle – по середине и top – вверху.
  <TR valign=значение>
• id
  Этот атрибут задает имя для ссылки.
  <TR id=имя>

Заголовок таблицы: элемент <CAPTION>

Элемент <CAPTION> задает заголовок вне рамки таблицы, имеет атрибут align, который может принимать значения top и bottom, left и right, а также id
– имя для ссылки.
<CAPTION> текст </CAPTION>

Ячейки заголовка: элемент <TH>

Элемент <TH> задает ячейку, которая содержит заголовок, поддерживает атрибут id
– имя для ссылки.
<TH атрибуты > текст заголовка

Ячейки с данными <TD>

Элемент <TD> определяет ячейку с данными

• bgcolor
  Этот атрибут задает цвет фона ячейки.
  <TD bgcolor= цвет >
• width
  Этот атрибут задает ширину ячейки в пикселах или %.
  <TD width= число или % >
• heigt
  Этот атрибут задает высоту ячейки в пикселах.
  <TD height=значение>
• rowspan
  Этот атрибут задает объединение соседних ячеек столбца в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются пока соседняя ячейка использует их пространство.
  <TD rowspan=количество строк >
• colspan
  Этот атрибут задает объединение соседних ячеек строки в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются пока соседняя ячейка использует их пространство.
  <TD colspan=количество колонок >
• align
  Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
  <TD align= способ >
• valign
  Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle – по середине и top – вверху.
  <TD valign=значение>
• nowrap
  Этот атрибут блокирует автоматический перенос по словам в пределах ячейки в зависимости от других параметров таблицы. Аналогичного результата можно достичь при помощи замены обычных пробелов на неразрывнй мнемонический объект &nbsp;
• id
  Этот атрибут задает имя для ссылки.
  <TD id=имя>

Исходные коды некоторых таблиц.

Таблица с общим заголовком и заголовками в колонках.

Таблица с общим заголовком и заголовками в колонках, и в строках.

Таблица с объединенными ячейками в колонках, и в строках.

Более сложное объединение ячеек в колонках, и в строках.

Таблица в ячейке таблицы.

Таблица, состоящая из одной ячейки.

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