Путешественникам, меломанам, бизнесменам, вебмастерам, новости.

Главная сайта     Контакты     Поиск по сайту

Скачать справочники можно на isxodniki.ru

Тег <table>

Internet Explorer Chrome Opera Safari Firefox
6.0 7.0 8.0 9.0 9.0 10.0 11.0 12.0 9.2 9.6 10.0 11.0 2.0 3.1 4.0 5.0 2.0 3.0 3.6 4.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 12Op 11Sa 5Fx 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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.php">Lorem</a><Br>
      <a href="lorem.php">Ipsum</a><Br>
      <a href="lorem.php">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. Использование таблиц для создания макета страницы





Спонсоры сайта:

Поделиться ссылкой на эту страницу в Vkontakte, FaceBook, Одноклассниках и других социальных сетях:


Есть ли эта страница в памяти поисковиков?

Yandex ТИЦ:      Google PR:  

Скачать справочники можно на isxodniki.ru