Начнем с азов... Таблица представляет из себя конструкцию <TABLE><TBODY><TR><TH или TD> ... </TH или /TD></TR></TBODY></TABLE> (я не буду вдаваться в дебри с <THEAD> и <TFOOT>:).

<TABLE> может иметь следующие атрибуты:

<TABLE
ALIGN="left|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDER="value"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CELLPADDING="value"
CELLSPACING="value"
CLASS="Style Sheet Class"
COLS="n"
DATAPAGESIZE="No. of records to show"
DATAFLD="Column Name"
DATASRC="Data Source"
FRAME="void|above|below|hsides|lhs|rhs|vsides|box"
HEIGHT="value|value%"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
RULES="none|basic|rows|cols|all"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="top|bottom"
WIDTH="value|value%"
>

<TBODY> - определение глобальных переменных для таблицы (только IE):

<TBODY
ALIGN="Alignment"
BGCOLOR="#rrggbb|Colour Name"
CLASS="Style Sheet Class"
ID="Idenitifier"
LANG="Styling"
LANGUAGE="Styling"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="Vertical alignment"
>

<TR> - определение строки:

<TR
ALIGN="left|center|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CLASS="Style Sheet Class"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="top|middle|bottom"
>

<TH> - заголовок таблицы:

<TH
ALIGN="left|center|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CLASS="Style Sheet Class"
COLSPAN="Columns to span"
HEIGHT="value|value%"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NOWRAP
ROWSPAN="value"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="top|middle|bottom"
WIDTH="value|value%"
>

<TD> - ячейка таблицы:

<TD
ALIGN="left|center|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CLASS="Style Sheet class"
COLSPAN="value"
HEIGHT="value|value%"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NOWRAP
ROWSPAN="value"
STYLE="Style"
TITLE="Informational ToolTip"
VALIGN="top|middle|bottom"
WIDTH="value|value%"
>

Как вы поняли - это было вступление... а теперь - основная часть (жаль, что нельзя звук включить:-)):

Что такое BORDER и с чем его едят:

Можно еще 0 его приравнять, чтобы скрыть совсем... Разница ясна?

Теперь - об объединении строк и столбцов:

объединенная ячейка выглядит как: <td rowspan="2">

объединенная ячейка выглядит как: <td colspan="2">

А теперь - как красиво (и правильно!) "окантовать" таблицу:

"...как это сделано?" - все очень просто - помещаем одну таблицу в другую, у первой таблицы выставляем цвет фона, например bgcolor="#000000", ширину border-а приравниваем 0, cellspacing="0", cellpadding="1" (это и есть тот 1 пиксель черного цвета):

Окантовка ячеек:

Мысль ясна? - мы в таблицу с фоном: border="0" bgcolor="#000000" cellspacing="0" cellpadding="0" (ширину сами укажите), кладем другую, без фона с border="0" width="100%" cellspacing="1" cellpadding="0"... вот.

Таблица с горизонтальными линиями:

1-1	1-2	1-3

2-1	2-2	2-3

3-1	3-2	3-3

А здесь мы просто каждую вторую строку объединяем, задаем у нее цвет фона и помещаем в нее однопиксельный прозрачный GIF.

helloworld.ru © 2001-2021 Все права защищены