Элемент <TABLE> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD>. Внутри <TABLE> допустимо использовать следующие элементы: <CAPTION>, <COL>, <COLGROUP>, <TBODY>, <TD>, <TFOOT>, <TH>, <THEAD> и <TR>.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
<table> ... </table>
align | Определяет выравнивание таблицы. |
background | Задает фоновый рисунок в таблице. |
bgcolor | Цвет фона таблицы. |
border | Толщина рамки в пикселах. |
bordercolor | Цвет рамки. |
cellpadding | Отступ от рамки до содержимого ячейки. |
cellspacing | Расстояние между ячейками. |
cols | Число колонок в таблице. |
height | Высота таблицы. |
width | Ширина таблицы. |
Обязателен.
<!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/logo.gif" alt="" width="150" height="70" border="0" style="background: #CC9"></td> <td align="right"><img src="/images/title.gif" 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> </td></tr> </table> </td> </tr> </table> </body> </html>
Результат данного примера показан ни рисунке. Показ изображений в браузере отключен.
Задает выравнивание таблицы по краю окна браузера.
<table align="left | center | right">...</table>
left | Выравнивание таблицы по левому краю. |
center | Выравнивание таблицы по центру. |
right | Выравнивание по правому краю. |
left
text-align
<!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, параметр align</title> </head> <body> <table align="center" width="600" bgcolor="#ffcc00"> <tr> <td> ... </td> </tr> </table> </body> </html>
Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.
<table background="URL">...</table>
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.
Нет.
background-image
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр background</title> </head> <body> <table background="/images/snow.gif" width="600"> <tr> <td> ... </td> </tr> </table> </body> </html>
Устанавливает цвет фона таблицы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку
<table bgcolor="цвет">...</table>
Значение цвета можно задавать двумя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Зависит от браузера и его версии, обычно используется белый цвет фона.
background-color
<!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, параметр bgcolor</title> </head> <body> <table bgcolor="#ffcc00" width="600"> <tr> <td> ... </td> </tr> </table> </body> </html>
Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется в зависимости от браузера. Когда в теге <TABLE> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.
<table border="толщина">...</table>
Любое положительное целое число.
0
border
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр border</title> </head> <body> <table cellspacing="2" border="1" cellpadding="5" width="600"> <tr> <td> ... </td> </tr> </table> </body> </html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр border</title>
</head> <body>
<table cellspacing="2" border="1" cellpadding="5" width="600"> <tr> <td> ... </td> </tr> </table>
</body> </HTML>
Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.
<table bordercolor="цвет">...</table>
См. параметр BGCOLOR.
Зависит от браузера и операционной системы.
border-color
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр bordercolor</title> </head> <body> <table bordercolor="red" border="2" width="100%"> <tr> <td> ... </td> </tr> </table> </body> </html>
<HTML> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр bordercolor</title>
</head> <body>
<table bordercolor="red" border="2" width="100%"> <tr> <td> ... </td> </tr> </table>
</body> </HTML>
Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
<table cellpadding="значение">...</table>
Любое целое значение в пикселах или процентах от доступного пространства.
0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр cellpadding</title> </head> <body> <table cellpadding="7" border="2" width="100%"> <tr> <td> ... </td> </tr> </table> </body> </html>
<HTML> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр cellpadding</title>
</head> <body>
<table cellpadding="7" border="2" width="100%"> <tr> <td> ... </td> </tr> </table>
</body> </HTML>
Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет.
<table cellspacing="значение">...</table>
Любое целое положительное число.
0 (когда нет параметра border) 2 (когда параметра border установлен)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр cellspacing</title> </head> <body> <table cellspacing="5" cellpadding="10" border="1" width="100%"> <tr> <td> ... </td> <td> ... </td> </tr> </table> </body> </html>
<HTML> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр cellspacing</title>
</head> <body>
<table cellspacing="5" cellpadding="10" border="1" width="100%"> <tr> <td> ... </td> <td> ... </td> </tr> </table>
</body> </HTML>
Параметр cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого параметра таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование параметра cols позволяет несколько ускорить отображение содержимого таблицы.
<table cols="число">...</table>
Любое целое положительное число.
Нет.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр cols</title> </head> <body> <table width="600" cellspacing="0" border="1" cols="10"> <tr> <td> </td> <td>1995</td><td>1996</td><td>1997</td><td>1998</td> <td>1999</td><td>2000</td><td>2001</td><td>2002</td> <td>2003</td> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html>
<HTML> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр cols</title>
</head> <body>
<table width="600" cellspacing="0" border="1" cols="10"> <tr> <td> </td> <td>1995</td><td>1996</td><td>1997</td><td>1998</td> <td>1999</td><td>2000</td><td>2001</td><td>2002</td> <td>2003</td> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table>
</body> </HTML>
Сообщает браузеру, где отображать границы вокруг таблицы. Толщина границы указывается с помощью параметра border.
<table frame="значение">...</table>
void | Не отрисовывать границы. |
border | Граница вокруг таблицы. |
above | Граница по верхнему краю таблицы. |
below | Граница снизу таблицы. |
hsides | Добавить только горизонтальные границы (сверху и снизу таблицы). |
vsides | Рисовать только вертикальные границы (слева и справа от таблицы). |
rhs | Граница только на правой стороне таблицы. |
lhs | Граница только на левой стороне таблицы. |
border
border
Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если не установлен <!DOCTYPE>. В том случае, когда в документе задан <!DOCTYPE>, браузеры высоту таблицы, заданную через параметр height, игнорируют.
<table height="значение">...</table>
Любое целое значение в пикселах или процентах от доступного пространства.
Высота вычисляется на основе содержимого таблицы.
height
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тег TABLE, параметр height</title> </head> <body> <table cellpadding="10" bgcolor="#ffcc00" align="center" width="50%" height="50%"> <tr> <td> ... </td> </tr> </table> </body> </html>
<HTML> <head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тег TABLE, параметр height</title>
</head> <body>
<table cellpadding="10" bgcolor="#ffcc00" align="center" width="50%" height="50%"> <tr> <td> ... </td> </tr> </table>
</body> </HTML>
Сообщает браузеру, где отображать границы между ячейками. Толщина границы и ее цвет указывается с помощью параметров border и bordercolor. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку.
<table rules="значение">...</table>
all | Линия рисуется вокруг каждой ячейки таблицы. |
groups | Линия отображается между группами, которые образуются тегами <THEAD>, <TFOOT>, <TBODY>, <COLGROUP> или <COL>. |
cols | Линия отображается между колонками. |
none | Все границы скрываются. |
rows | Граница рисуется между строками таблицы, созданых через тег <TR>. |
none (если border=«0»); all (если значение параметра border отлично от нуля).
border
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр rules</title> </head> <body> <table cellspacing="0" cellpadding="10" rules="rows" border="1" width="80%"> <tr> <td> ... </td> <td> ... </td> <td> ... </td> </tr> </table> </body> </html>
<HTML> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр rules</title>
</head> <body>
<table cellspacing="0" cellpadding="10" rules="rows" border="1" width="80%"> <tr> <td> ... </td> <td> ... </td> <td> ... </td> </tr> </table>
</body> </HTML>
Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.
<table width="значение">...</table>
Любое целое значение в пикселах или процентах от доступного пространства.
Ширина вычисляется на основе содержимого таблицы.
width
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр width</title> </head> <body> <table cellpadding="10" border="1" width="80%"> <tr> <td> ... </td> </tr> </table> </body> </html>
<HTML> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE, параметр width</title>
</head> <body>
<table cellpadding="10" border="1" width="80%"> <tr> <td> ... </td> </tr> </table>
</body> </HTML>