«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML


Тег <table> предназначен для создания таблиц.

В основном таблицы используют:

- для представления числовых данных, текстовой или иной информации в табличном виде. Примером может служить прайс-лист.

- для создания каркаса страницы (при табличной верстке), границы которого в основном явно не прорисованы: страница разбивается на прямоугольные области разного размера (ячейки таблиц), в каждой из которых размещается свой элемент: текст, изображения, фотографии, реклама и т.д...

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

Обязателен


Атрибут Align

Атрибут тега table - определяет выравнивание таблицы по горизонтали.

Значение/я атрибута:
- left - выравнивание таблицы по левому краю
- center – выравнивание таблицы по центру
- right - выравнивание таблицы по правому краю
Значение по умолчанию:
left

Атрибут Background

Атрибут тега table - задает фоновый рисунок таблицы.

В качестве фонового рисунка желательно использовать изображение, размер которого совпадает (или больше) с размером таблицы, так как иначе картинка будет повторяться. В отличии от обычных изображений, размещаемых на странице - для фонового изображения нельзя задать ширину и высоту (оно всегда отображается в натуральную величину).

Значение/я атрибута:
Абсолютный или относительный путьк файлу с изображением (подробнее здесь...)
Значение по умолчанию:
Не имеет

Атрибут Bgcolor

Атрибут тега table - задает фоновый цвет таблицы.

Значение/я атрибута:
Цвет можно задать двумя способами (подробнее здесь...)
Значение по умолчанию:
Цвет фона, заданный в браузере по умолчанию (обычно белый)

Атрибут Border

Атрибут тега table - задает толщину рамки таблицы.

Значение/я атрибута:
Указывается целое положительное число, которое задает толщину рамки в пикселях.
Значение по умолчанию:
1 если атрибут указан без значения. Рамка рисуется трехмерной.
- 0 если атрибут отсутствует.

Атрибут Bordercolor

Атрибут тега table - задает цвет рамки таблицы.

Добавление этого атрибута устраняет эффект трехмерности и делает рамку однотонной.

Атрибут поддерживается не всеми браузерами!

Значение/я атрибута:
Цвет можно задать двумя способами (подробнее здесь...)
Значение по умолчанию:
Зависит от браузера

Атрибут Cellpadding

Атрибут тега table - задает отступ от границ ячейки до ее содержимого.

Значение/я атрибута:
Указывается целое положительное число, которое задает отступ в пикселях.
Значение по умолчанию:
0

Атрибут Cellspacing

Атрибут cellspacing тега table - задает расстояние между границами соседних ячеек и расстояние от границ ячеек до границы таблицы.

Значение/я атрибута:
Указывается целое положительное число, которое задает расстояние в пикселях.
Значение по умолчанию:
0 если атрибут border не установлен
- 2 если атрибут border установлен
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Тег table </title>
</head>
<body>

<table align="right" border="2" background="img/nebo.jpg" width="700" height="200">
<tr>
<td>
Выравнивание таблицы по горизонтали по правому краю окна. Толщина границы
2 пикселя. Небо является фоновым рисунком таблицы.
</td>
<td>
Выравнивание таблицы по горизонтали по правому краю окна. Толщина границы
2 пикселя. Небо является фоновым рисунком таблицы.
</td>
</tr>
</table>


</body>
</html>
Результат

Атрибут Cols

Атрибут cols тега table - указывает количество столбцов в таблице.

Если этот атрибут присутствует - браузеру требуется меньше времени для загрузки таблицы.

Значение/я атрибута:
Любое целое положительное число.
Значение по умолчанию:
Не имеет
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Тег table </title>
</head>
<body>

<table bgcolor="#00FF99" border="2" width="700" bordercolor="#FF0000" cellpadding="25" cellspacing="10" cols="2">
<tr>
<td>
Атрибут align отсутствует, поэтому таблица расположена у левого края окна.
Задали цвет фона. Ширина таблицы 700 пикселей.
</td>
<td> Граница красного цвета. Отступ от границ ячеек до их содержимого 25 пикселей,
расстояние между границами соседних ячеек и от границ ячеек до границы таблицы 10
пикселей.
</td>
</tr>
</table>


</body>
</html>
Результат

Атрибут Height и Width

Атрибут тега table - высота и ширина таблицы в пикселях, либо в процентах относительно ширины окна браузера

Значение/я атрибута:

- целое положительное число. В этом случае ширина будет задана в пикселях.

- целое положительное число с символом %.

Значение по умолчанию:
Высота и ширина меняются в зависимости от содержимого таблицы.

Атрибут Frame

Атрибут тега table - указывает, где рисовать границы вокруг таблицы.

Значение/я атрибута:

- void - граница отсутствует.
- border – граница вокруг таблицы.
- above - граница по верхнему краю таблицы.
- below – граница по нижнему краю таблицы.
- hsides - горизонтальные границы таблицы: сверху и снизу.
- vsides – вертикальные границы таблицы: слева и справа.
- rhs - граница на правой стороне таблицы.
- lhs - граница на левой стороне таблицы

Значение по умолчанию:
border

Атрибут Rules

Атрибут rules тега table - указывает, как рисовать рамку вокруг ячеек.

Значение/я атрибута:

- all - рамка рисуется вокруг каждой ячейки.
- groups – линии рамки отображаются между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>.
- cols - линии рамки отображаются между колонками.
- none – рамка отсутствует.
- rows - линии рамки отображаются между строками.

Значение по умолчанию:
none если border = 0
- all если border отлично от 0
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Тег table </title>
</head>
<body>

<p> <table border="2" bordercolor="#FF0000">
<tr> <td>
Граница вокруг таблицы и рамка вокруг ячейки. </td> </tr> </table> </p>

<p> <table border="2" bordercolor="#FF0000" frame="void">
<tr> <td>
Граница вокруг таблицы отсутствует. </td> </tr> </table> </p>

<p> <table border="2" bordercolor="#FF0000" rules="none">
<tr> <td>
Рамка вокруг ячейки отсутствует. </td> </tr> </table> </p>

<p> <table border="2" bordercolor="#FF0000" frame="above">
<tr> <td>
Граница по верхнему краю таблицы. </td> </tr> </table> </p>

<p> <table border="2" bordercolor="#FF0000" frame="vsides">
<tr> <td>
Вертикальные границы таблицы: слева и справа. </td> </tr> </table> </p>

<p> <table border="2" bordercolor="#FF0000" rules="cols" width="500">
<tr> <td>
Линия рамки отображается между колонками таблицы. </td>
<td>
Линия рамки отображается между колонками таблицы. </td> </tr> </table> </p>

<p> <table border="2" bordercolor="#FF0000" rules="rows">
<tr> <td>
Линия рамки отображается между строками таблицы. </td> </tr>
<tr> <td>
Линия рамки отображается между строками таблицы. </td> </tr> </table> </p>

<p> <table border="0">
<tr> <td>
Граница вокруг таблицы и рамка вокруг ячейки отсутствуют. </td> </tr>
</table>
</p>

</body>
</html>
Результат



Все теги HTML

HTML по шагам