<table>

HTML <table> Тег

Пример

Простая таблица HTML, содержащая два столбца и две колонки:

<table border="1">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

(больше примеров внизу страницы)

Определение и использование

Тег <table> определяет таблицу HTML.

Простая таблица HTML состоит из элементов таблицы и одного или более элемента <tr>, <th>, и <td>.

Элемент tr определяет строку таблицы, элемент th определяет заголовок таблицы, и элемент td определяет ячейку таблицы.

Более сложные таблицы HTML также могут включать элементы <caption>, <col>, <colgroup>, <thead>, <tfoot>, и <tbody>.

Поддержка браузеров

тег <table> поддерживается во всех ведущих браузерах

Отличия между HTML и XHTML

НЕТ

Дополнительные атрибуты

DTD указывает, в какой HTML 4.01/XHTML 1.0 DTD допускаются атрибуты. S=Strict (строгий), T=Transitional (переходный), и F=Frameset (набор фреймов).

Атрибут	Значение	Описание	DTD
align	left center right	Устаревший. Используйте стили вместо этого. Определяет выравнивание таблицы в соответствии с окружающим текстом	TF
bgcolor	rgb(x,x,x) #xxxxxx colorname	Устаревший. Используйте стили вместо этого. Определяет цвет фона для таблицы	TF
border	pixels	Определяет ширину рамки вокруг таблицы	STF
cellpadding	pixels	Определяет расстояние между рамкой таблицы и содержанием ячейки	STF
cellspacing	pixels	Определяет расстояние между ячейками	STF
frame	void above below hsides lhs rhs vsides box border	Определяет, какие части внешней границы видны	STF
rules	none groups rows cols all	Определяет, какие части внутренней рамки видны	STF
summary	text	Определяет краткое содержание таблицы	STF
width	pixels %	Определяет ширину таблицы	STF

Стандартные атрибуты

Тег <table> поддерживает следующие стандартные атрибуты:

Атрибут	Значение	Описание	DTD
class	classname	Определяет имя класса для элемента	STF
dir	rtl ltr	Определяет направление текста для содержания в элементе	STF
id	id	Определяет уникальный id для элемента	STF
lang	language_code	Указывает код языка для содержания элемента	STF
style	style_definition	Определяет встроенный стиль для элемента	STF
title	text	Определяет дополнительную информацию об элементе	STF
xml:lang	language_code	Указывает код языка для содержимого элементов, в документах XHTML	STF

Более подробная информация о Стандартных атрибутах.

Атрибуты событий

Тег <table> поддерживает следующие атрибуты событий:

Атрибут	Значение	Описание	DTD
onclick	script	Скрипт выполняется когда нажимается мышка	STF
ondblclick	script	Скрипт выполняется когда мышка нажимается дважды	STF
onmousedown	script	Скрипт выполняется когда клавиша мышки нажата	STF
onmousemove	script	Скрипт выполняется когда указатель мышки сдвинулся	STF
onmouseout	script	Скрипт выполняется когда указатель мышки вышел из границ элемента	STF
onmouseover	script	Скрипт выполняется когда указатель мышки проходит над элементом	STF
onmouseup	script	Скрипт выполняется когда клавиша мышки отпущена	STF
onkeydown	script	Скрипт выполняется когда клавиша клавиатуры нажата	STF
onkeypress	script	Скрипт выполняется когда клавиша клавиатуры нажата и отпущена	STF
onkeyup	script	Скрипт выполняется когда клавиша мышки отпущена	STF

Более подробная информация о Атрибуты событий.

Больше примеров

Пример 1

Таблицы HTML с различными рамками.

<h4>Нормальная рамка:</h4>  
<table border="1">
  <tr>
    <td>Первая</td>
    <td>Строка</td>
  </tr>   
  <tr>
    <td>Вторая</td>
    <td>Строка</td>
  </tr>
</table>

<h4>Без рамки:</h4>
<table border="0">
  <tr>
    <td>Первая</td>
    <td>Строка</td>
  </tr>   
  <tr>
    <td>Вторая</td>
    <td>Строка</td>
  </tr>
</table>

<h4>Толстая рамка:</h4>  
<table border="8">
  <tr>
    <td>Первая</td>
    <td>Строка</td>
  </tr>   
  <tr>
    <td>Вторая</td>
    <td>Строка</td>
  </tr>
</table>

<h4>Очень толстая рамка:</h4>  
<table border="15">
  <tr>
    <td>Первая</td>
    <td>Строка</td>
  </tr>   
  <tr>
    <td>Вторая</td>
    <td>Строка</td>
  </tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Пример 2

Как создавать заголовки таблицы.

<h4>Заголовки таблицы:</h4>
<table border="1">
  <tr>
    <th>Имя</th>
    <th>Телефон</th>
  </tr>
  <tr>
    <td>Бил Гейтс</td>
    <td>555 77 854</td>
  </tr>
</table>

<h4>Вертикальные заголовки:</h4>
<table border="1">
  <tr>
    <th>Имя:</th>
    <td>Бил Гейтс</td>
  </tr>
  <tr>
    <th>Телефон:</th>
    <td>555 77 854</td>
  </tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Пример 3

Как использовать 'nbsp' для обработки клеток, которые не имеют содержания.

<table border="1">
<tr>
  <td>Некоторый текст</td>
  <td>Некоторый текст</td>
</tr>
<tr>
  <td></td>
  <td>Некоторый текст</td>
</tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Пример 4

Таблица HTML с заголовком.

<table border="1">
  <caption>Месячные сбережения</caption>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$50</td>
  </tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Пример 5

Как отобразить элементы внутри других элементов.

<table border="1">
<tr>
  <td>
   <p>Это параграф</p>
   <p>Это другой параграф</p>
  </td>
  <td>Эта ячейка включает таблицу:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>Эта ячейка включает список
   <ul>
    <li>яблоки</li>
    <li>бананы</li>
    <li>ананасы</li>
   </ul>
  </td>
  <td>ПРИВЕТ</td>
</tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Пример 6

Как определить ячейки таблицы, которые охватывают более одной строки или одного столбца.

<h4>Ячейка, которая включает две колонки:</h4>
<table border="1">
<tr>
  <th>Имя</th>
  <th colspan="2">Телефон</th>
</tr>
<tr>
  <td>Бил Гейтс</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>Ячейка, которая включает две строки:</h4>
<table border="1">
<tr>
  <th>Имя:</th>
  <td>Бил Гейтс</td>
</tr>
<tr>
  <th rowspan="2">Телефон:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Пример 7

Как использовать cellpadding, чтобы создать больше пустого пространства между содержимым клетки и ее границами.

<h4>Без cellpadding:</h4>
<table border="1">
<tr>
  <td>Первая</td>
  <td>Строка</td>
</tr>   
<tr>
  <td>Вторая</td>
  <td>Строка</td>
</tr>
</table>

<h4>С cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
  <td>Первая</td>
  <td>Строка</td>
</tr>   
<tr>
  <td>Вторая</td>
  <td>Строка</td>
</tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Пример 8

Как использовать cellspacing, чтобы увеличить расстояние между клетками.

<h4>Без cellspacing:</h4>
<table border="1">
<tr>
  <td>Первая</td>
  <td>Строка</td>
</tr>   
<tr>
  <td>Вторая</td>
  <td>Строка</td>
</tr>
</table>

<h4>С cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
  <td>Первая</td>
  <td>Строка</td>
</tr>   
<tr>
  <td>Вторая</td>
  <td>Строка</td>
</tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Пример 9

Как добавить фон к таблице.

<h4>Цвет фона:</h4>
<table border="1" style="background-color:red">
<tr>
  <td>Первая</td>
  <td>Строка</td>
</tr>   
<tr>
  <td>Вторая</td>
  <td>Строка</td>
</tr>
</table>

<h4>Изображение фона:</h4>
<table border="1" style="background-image:url('http://xhtml.co.il/images/13-red-snapper-665.gif'); color:#fff;">
<tr>
  <td>Первая</td>
  <td>Строка</td>
</tr>   
<tr>
  <td>Вторая</td>
  <td>Строка</td>
</tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Пример 10

Как использовать атрибут "frame" для отображения границ вокруг таблицы.

<p>Таблица с frame="box":</p>
<table frame="box">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>

<p>Таблица с frame="above":</p>
<table frame="above">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>

<p>Таблица с frame="below":</p>
<table frame="below">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>

<p>Таблица с frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>

<p>Таблица с frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>

Результат выполнения кода выше:

Попробуйте сами

Была ли эта информация полезной?

Да Нет

<table>

HTML <table> Тег

Пример

Определение и использование

Поддержка браузеров

Отличия между HTML и XHTML

Дополнительные атрибуты

Стандартные атрибуты

Атрибуты событий

Больше примеров

Пример 1

Пример 2

Пример 3

Пример 4

Пример 5

Пример 6

Пример 7

Пример 8

Пример 9

Пример 10

Комментарии