Главная/ Cправочник HTML, CSS, Javascript/ HTML справочник : HTML теги, HTML атрибуты, мета теги, спецсимволы/ Tags/ HTML тег table | назначение, синтаксис, атрибуты, примеры

Тег table

Последнее обновление: 23.01.2011

Тег <table> (с англ. таблица) — тег-контейнер, определяет таблицу. Один из основных тегов при табличной верстке, используется для разметки страниц.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис


<table>...</table>

Атрибуты



align выраванивание таблицы

  • left — по левому краю (по умолчанию)
  • center — по центру
  • right — по правому краю
background URL фонового изображения для таблицы.
В спецификации HTML 4.01 отсутствует
bgcolor цвет фона таблицы
border толщина рамки в пикселях
bordercolor цвет рамки.
В спецификации HTML 4.01 отсутствует
bordercolordark цвет правой и нижней частей рамки. В паре с bordercolorlight создает трехмерный эффект
В спецификации HTML 4.01 отсутствует
bordercolorlight цвет левой и верхней частей рамки. В паре с bordercolordark создает трехмерный эффект
В спецификации HTML 4.01 отсутствует
cellpadding отступ от рамки до текста в ячейке
cellspacing расстояние между границами ячеек
class определяет имя используемого класса
cols количество столбцов в таблице. Используется для ускорения отображения.
В спецификации HTML 4.01 отсутствует
datapagesize количество столбцов в таблице, подгружаемой из базы данных. Используется для ускорения отображения. Работает только в IE.
В спецификации HTML 4.01 отсутствует
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
frame позволяет настроить вид границ:

  • above — по верхнему краю
  • below — по нижнему краю
  • border — вокруг таблицы (по умолчанию)
  • hsides — по верхнему и нижнему краю
  • lhs — только на левой стороне таблицы
  • rhs — только на правой стороне таблицы
  • void — нет границ
  • vsides — по правому и левому краю
height высота таблицы.
В спецификации HTML 4.01 отсутствует
hspace отступ по горизонтали (по умолчанию 0).
В спецификации HTML 4.01 отсутствует
id уникальный идентификатор
lang определяет используемый язык
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
rules отрисовка границ ячеек:

  • all — вокруг всех ячеек
  • groups — отображается между группами ячеек, созданными с помощью тегов <col>, <colgroup>, <tbody>, <tfoot>, <thead>
  • cols — между столбцами
  • none — нет границ
  • rows — между строками
style задает встроенную таблицу стилей
summary общая информация об назначении и структуре таблицы для голосовых систем просмотра
title добавляет всплывающую подсказку
vspace отступ по вертикали (по умолчанию 0).
Отсутствует в спецификации HTML 4.01!
width ширина таблицы

Пример

Задаем ширину и горизонтальное выравнивание:


<table width="300px" rules="rows">
<col width="30%" align="center"/>
<tr><th>№ п/п</th><th>Фамилия</th></tr>
<tr><td>1</td><td>Иванов</td></tr>
<tr><td>2</td><td>Петров</td></tr>
</table>

Распространяем форматирование на несколько колонок. Выравнивание по вертикали.


<table>
<col align="center"/>
<col width="100px"/>
<col span="2" valign="top" align="right"/>
<tr>
<th>№ п/п</th><th>Вид кактуса</th><th>количество в оранжерее, шт</th><th>заказано, шт</th>
</tr>
<tr>
<td>1</td><td>Gymnocalycium hybopleurum</td><td>15</td><td>8</td>
</tr>
</table>

Рекомендации по использованию

  • закрывающий тег обязателен (</table>)
  • тег <table> может содержать теги <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>.
  • обязательных атрибутов нет
  • в некотрых браузерах не наследуется размер шрифта от родителя для содержимого <table>, рекомендуется явно указывать размер шрифта для таблицы
  • для создания полноценной таблицы достаточно тегов <table>, <tr>, <th> и <td>
  • рекомендуем не использовать атрибуты <table>, для оформления используйте таблицы стилей
  • используйте таблицы только для вывода табличных данных, для разметки страниц используйте верстку блоками (<div> совместно с таблицами стилей)
Твой код:

Результат: