Таблицы

    С помощью таблиц можно создавать такие эффекты:
    • верстка в несколько колонок
    • применение эффектов состыковки картинки и фона
    • тонкие линии на всю ширину или высоту странички и т.д.

    Чтобы разобраться в устройстве таблицы,
    расмотрим простой пример:
      
    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    В данном примере создана таблица
    с фиксированой шириной (WIDTH="200" пикселей).
    Лучше использовать проценты, при этом размер таблицы будет изменятся в зависимости от размера окна.

    		Такая таблица реализуется следующим кодом:

    <TABLE BORDER="2" WIDTH="200"
    BGCOLOR="#00FF00">
    <TR>
    <TD>Ячейка 1</TD>
    <TD>Ячейка 2</TD>
    </TR>
    <TR>
    <TD>Ячейка 3</TD>
    <TD>Ячейка 4</TD>
    </TR>
    </TABLE>

    Таблица начинается открывающим тегом <TABLE> и завершается закрывающим </TABLE>.
    Тег <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 (заголовок таблицы).
    В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.

    Если ячейка пустая, то вокруг нее рамка не рисуется.
    Если рамка все же нужна вокруг пустой ячейки,
    то в нее надо ввести символ &nbsp; (non-breaking space - неразрывающий пробел).
    Ячейка по-прежнему будет пуста, но вокруг нее будет рамка
    (&nbsp; - обязательно должен набираться строчными буквами и завершаться точкой с запятой).

    Внимание!
    Теги шрифта (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF") необходимо повторять для каждой ячейки.

    При создании таблиц удобно использовать генератор:

    назад