TABLE
Элемент
<TABLE> служит контейнером для элементов, определяющих содержимое таблицы. Каждая таблица состоит из рядов (строк) и ячеек. В каждый контейнер строки
<TR> помещается один или несколько контейнеров ячеек
<TD> с возможностью задания индивидуальных параметров и стилей отображения.
Очень долго для создания сайтов использовалась так называемая "табличная верстка", где в основе сайта находилась таблица с прозрачными границами, и для каждой ячейки был отведен соответствующий контент. Сейчас, все чаще используется более современный метод верстки - "верстка слоями", но табличная верстка остается по-прежнему актуальной.
<body>
<table border="1" width="400" height="100" bgcolor="#f2f3d2">
<tr>
<td width="200" style="padding-left: 10; background-color: #111111;
color: #ffffff;">Ячейка 1, Ряд 1</td>
<td width="200" style="padding-left: 10; color: #7b3f2c;">
Ячейка 2, Ряд 1</td>
</tr>
<tr>
<td style="padding-left: 10; background-color: #cfcfcf;"
colspan="2" align="center">Ячейка 1, Ряд 2</td>
</tr>
</table>
</body>
|
| Ячейка 1, Ряд 1 |
Ячейка 2, Ряд 1 |
| Ячейка 1, Ряд 2 |
Параметры:
align Определяет выравнивание таблицы
background Задает фоновый рисунок в таблице
bgcolor Цвет фона таблицы
border Толщина рамки в пикселах
bordercolor Цвет рамки
cellpadding Отступ от рамки до содержимого ячейки
cellspacing Расстояние между ячейками
cols Число колонок в таблице
height Высота таблицы
width Ширина таблицы
rules Управляет отображением границ между ячейками
Параметр ALIGN
Задает выравнивание таблицы.
center Выравнивание таблицы по центру
left Выравнивание по левому краю*
right Выравнивание по правому краю
<table align="center">
Параметр BACKGROUND
Определяет фоновый рисунок для таблицы, который будет взят из графического файла по указанному пути. Размеры фонового рисунке невозможно изменить, он всегда отображается в натуральную величину.
Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. Этот недостаток можно устранить, используя стили
CSS. Аналогичным параметром в
CSS, для создания фона таблицы, является параметр
background-image.
<table background="URL">...</table>
Параметр BGCOLOR
Устанавливает цвет фона таблицы. Можно использовать этот параметр совместно с
background, подобрав цвет фона близкий к фоновому рисунку. Также для каждой ячейки в таблице можно будет назначить свой цвет фона и фоновый рисунок, который будет накладываться поверх основного. Аналогичным параметром в
CSS является
background-color.
<table bgcolor="цвет">...</table>
Параметр BORDER
Устанавливает толщину рамки в пикселях для данной таблицы. По умолчанию рамка будет отсутствовать, т.е. размер ее будет равен "
0".
Параметр BORDERCOLOR
Устанавливает цвет рамки в таблице. Данный параметр поддерживается не всеми браузерами, поэтому для этих целей рекомендуется использовать аналогичный параметр в CSS -
border-color.
<table bordercolor="цвет">...</table>
<table style="border-color: 'цвет';">...</table>
Параметр CELLPADDING
Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без
cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же
cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
<table cellpadding="значение">...</table>
Параметр CELLSPACING
Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет.
<table cellspacing="значение">...</table>
Параметр COLS
Данный параметр помогает ускорить загрузку таблицы, заранее определяя количество создаваемых столбцов.
<table cols="число">...</table>
Параметр FRAME
Управляет отображением границ вокруг таблицы. Аналогичный параметр в
CSS -
border.
void Не отрисовывать границы
border Граница вокруг таблицы*
above Граница по верхнему краю таблицы
below Граница снизу таблицы
hsides Добавить только горизонтальные границы (сверху и снизу таблицы)
vsides Рисовать только вертикальные границы (слева и справа от таблицы)
rhs Граница только на правой стороне таблицы
lhs Граница только на левой стороне таблицы
<table frame="void">
Параметры HEIGHT и WIDTH
Устанавливают высоту и ширину таблицы. Хотя большинство браузеров и понимают эти параметры в теге
<TABLE>, лучше управлять высотой таблицы, проставляя соответствующие параметры в тегах
<TD>,
<COL> или
<COLGROUP>.
Параметр RULES
Управляет отображением границ между ячейками. По умолчанию, при включенном параметре
border, рамка рисуется вокруг каждой ячейки, образуя тем самым сетку.
all Линия рисуется вокруг каждой ячейки таблицы*
groups Линия отображается между группами, которые образуются тегами <THEAD>, <TFOOT>, <TBODY>, <COLGROUP> или <COL>
cols Линия отображается между колонками
none Все границы скрываются
rows Граница рисуется между строками таблицы, созданых через тег