Тег <table>

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Атрибуты

align: Определяет выравнивание таблицы.
background: Задает фоновый рисунок в таблице.
bgcolor: Цвет фона таблицы.
border: Толщина рамки в пикселах.
bordercolor: Цвет рамки.
cellpadding: Отступ от рамки до содержимого ячейки.
cellspacing: Расстояние между ячейками.
cols: Число колонок в таблице.
frame: Сообщает браузеру, как отображать границы вокруг таблицы.
height: Высота таблицы.
rules: Сообщает браузеру, где отображать границы между ячейками.
summary: Краткое описание таблицы.
width: Ширина таблицы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример. Использование тега <table>

HTML 4.01IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6

<!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>Тег TABLE</title>
 </head>
 <body>

  <table width="100%" border="0" cellspacing="0" cellpadding="4">
   <tr align="center" bgcolor="#999999">
    <td colspan="3" style="font-size: 160%; font-family: sans-serif">Lorem 
     ipsum dolor sit amet...</td>
   </tr>
   <tr>
    <td><img src="images/title.png" alt="" width="150" height="70" 
      border="0" style="background: #CC9"></td>
    <td align="right"><img src="images/logo.png" alt="" width="70" 
      height="70" style="background: #CF9"></td>
    <td>
      <a href="lorem.html">Lorem</a><Br>
      <a href="lorem.html">Ipsum</a><Br>
      <a href="lorem.html">Dolar</a>
    </td>
   </tr>
   <tr>
    <td colspan="3">
     <table  width="100%" border="0" cellpadding="0" 
       cellspacing="0" bgcolor="#333333">
       <tr><td>&nbsp;</td></tr>
     </table>
    </td>
   </tr>
  </table>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Использование таблиц для создания макета страницы

Блочные элементыТаблицы

Если вам понравились материалы сайта, вы можете поддержать сайт, купив справочник по HTML в формате CHM, в виде набора HTML-файлов или в формате PDF за 30 р.