Ширина таблицы
Атрибут width используется для установки ширины таблицы. Значение задается как в пикселях, так и в процентах по отношению к расстоянию между левой и правой границами. Пример: <table border="3" cellpadding="10" width="80%">. Такое изменение кода приведет к следующему эффекту:
Год |
Продажи |
2000 |
$18M |
2001 |
$25M |
2002 |
$36M |
Выравнивание текста внутри ячеек
По умолчанию заголовки (th) выравниваются по центру ячеек, а данные (td) по левой границе. Вы можете изменить выравнивание, используя атрибут align, задать выравнивание во всей строке можно при помощи элемента tr. Атрибут align может принимать следующие значения "left", "center" или "right":
<table border="3" cellpadding="10" width="80%"> <tr align="center"><th>Год</th><th>Продажи</th></tr> <tr align="center"><td>2000</td><td>$18M</td></tr> <tr align="center"><td>2001</td><td>$25M</td></tr> <tr align="center"><td>2002</td><td>$36M</td></tr> </table>
Атрибут valign используется для вертикального выравнивания содержимого ячейки и принимает значения "top", "middle" или "bottom".
Ячейки, охватывающие больше, чем одну строку или столбец
Год |
Продажи |
||
Север |
Юг |
Итого |
|
2000 |
$10M |
$8M |
$18M |
2001 |
$14M |
$11M |
$25M |
Заголовок "Год" занимает две строки, а заголовок "Продажи" три столбца. Такой эффект достигается использованием атрибутов rowspan и colspan :
<table border="1" cellpadding="10" width="80%"> <tr align="center"><th rowspan="2">Год</th><th colspan="3">Продажи</th></tr> <tr align="center"><th>Север</th><th>Юг</th><th>Итого</th></tr> <tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr> <tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr> </table>
Раскрашивание таблицы
Для установки различных цветов заголовков и ячеек, содержащих данные, в атрибуте bgcolor укажите цвет, который вы хотите использовать. Например:
<table border="0" cellspacing="0" cellpadding="10">
<tr bgcolor="#000000">
<th bgcolor="#FFFFFF">Год</th>
<th bgcolor="#FFFFFF">Продажи</th>
Тег <TABLE> может включать следующие атрибуты:
WIDTH="n" |
Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек. |
BORDER="n" |
Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки. |
BORDERCOLOR="#FFFFFF" |
Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатеричное значение цвета. |
BGCOLOR="#FFFFFF" |
Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатеричное число. |
BACKGROUND="image.gif" |
Заполняет фон таблицы изображением. |
CELLSPACING="n" |
Определяет расстояние между рамками ячеек таблицы в пикселях. |
CELLPADDING="n" |
Определяет расстояние в пикселях между рамкой ячейки и текстом. |
ALIGN=LEFT |
Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа). |
FRAME="значение" |
Управляет внешней окантовкой таблицы, может принимать следующие значения: VOID - окантовки нет (значение по умолчанию). ABOVE - только граница сверху. BELOW - только граница снизу. HSIDES - границы сверху и снизу. VSIDES - только границы слева и справа. LHS - только левая граница. RHS - только правая граница. BOX - рисуются все четыре стороны. BORDER - также все четыре стороны. |
RULES="n" |
Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n): NONE - нет линий (значение по умолчанию). GROUPS - линии будут только между группами рядов. ROWS - только между рядами. COLS - только между колонками. ALL - между всеми рядами и колонками. |
Таблица может включать заголовок, который располагается между тегами <CAPTION></CAPTION>. Он должен быть непосредственно после тега <TITLE>. К заголовку возможно применение атрибута ALIGN, определяющего его положение относительно таблицы:
TOP - значение по умолчанию, заголовок над таблицей по центру. LEFT - заголовок над таблицей слева. RIGHT - заголовок над таблицей справа. BOTTOM - заголовок под таблицей по центру.
Строки и ячейки таблицы. Строки таблицы начинаются открывающимся тэгом <TR> и завершаются закрывающимся </TR>, а каждая ячейка таблицы начинается тегом <TD> и завершается </TD>. Данные теги могут иметь такие атрибуты:
Следующие атрибуты могут применяться для строк и ячеек. |
|
ALIGN=LEFT |
Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо). |
VALIGN=CENTER |
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю). |
BGCOLOR="#FFFFFF" |
Устанавливает цвет фона строки или ячейки. |
BACKGROUND="image.gif" |
Заполняет фон строки или ячейки изображением. |
Следующие атрибуты могут применяться только для ячеек. |
|
WIDTH="n" |
Определяет ширину ячейки в n пикселях. |
HEIGHT="n" |
Определяет высоту ячейки в n пикселях. |
COLSPAN="n" |
Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки. |
ROWSPAN="n" |
Растягивание ячейки по строке. Например, <TD ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы. |
NOWRAP |
Присутствие этого аттрибута показывает, что текст должен размещаться в одну строку |
BACKGROUND="image.gif" |
Заполняет фон ячейки изображением. |
Кроме этого, любая ячейка таблицы может быть определена не тегами <TD></TD>, а тегами <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.
Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект (неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет ( - обязательно должен набираться строчными буквами и закрываться точкой с запятой).
Теги, устанавливающие шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необходимо повторять для каждой ячейки.
