Опубликовано: 25.06.2010 Последняя правка: 08.12.2015

Тег <TABLE>

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

Изначально спецификацией HTML предполагалось, что таблицы будут использоваться только по их прямому назначению — отображению табличных данных. Но находчивые HTML-верстальщики быстро нашли им совсем другое применение — использование в глобальной разметке веб-страниц. И по сегодняшний день табличная верстка является самой распространенной в интернете ввиду простоты, удобства и предсказуемости поведения (особенно, если говорить о «трехколоночных» макетах). Конечно, давно уже имеется верстка слоями («на DIV-ах»), но до сих пор во всех уголках интернета идут ожесточенные споры меж приверженцами обоих способов, которым нет конца.

Атрибуты

Личные атрибуты:

align — Задает горизонтальное положение таблицы относительно родительского элемента.
background — Подключает изображение, которое будет фоном таблицы.
bgcolor — Фоновый цвет таблицы.
border — Указывает толщину рамки вокруг таблицы.
bordercolor — Задает цвет рамки.
cellpadding — Устанавливает внутренние отступы от границы ячеек до их содержимого.
cellspacing — Устанавливает расстояние между ячейками.
cols — Указывает количество столбцов в таблице.
frame — Определяет какие границы рамки отображать.
height — Задает высоту таблицы.
rules — Управляет отображением границ ячеек.
width — Задает ширину таблицы.

Общие атрибуты:

accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
dir — указывает направление текста внутри элемента.
id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
lang — указывает язык, на котором написан текст внутри HTML-элемента.
style — необходим для применения встроенных стилей CSS к тегу.
tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: таблицы.

Модель тега: block (блочный, уровня блока).

Должен содержать: теги <TBODY> или <TR>, но не оба варианта одновременно.

Может содержать: по одному тегу <CAPTION>, <THEAD>, <TFOOT>, в любом количестве теги <COL> или <COLGROUP>.

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

<table>
 <tr>
  <td>содержимое<td>
 </tr>
</table>

Пример HTML: применение тега TABLE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега TABLE</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="5" bgcolor="#66cc00" width="100%">
   <tr valign="top"><td height="50">Хедер</td></tr>
   <tr><td bgcolor="#cc0066">Вспомогательная навигация</td></tr>
  </table>
  <table cellspacing="0" cellpadding="5" bgcolor="#66cc00" width="100%">
   <tr valign="top">
    <td width="150" height="350">Меню сайта</td>
    <td bgcolor="#ffffff">Основное содержимое</td>
    <td width="100">Дополнительное меню</td>
   </tr>
   <tr><td colspan="3" bgcolor="#999999">Футер</td></tr>
  </table>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

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

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да