самосоятельно сделать сайт

создание таблиц html

    Таблицы.

    У многих на начальном этапе при использовании таблиц возникают проблемы,а логика на самом деле очень проста,не стоит делать попытки и мастерить строя сложную таблицу,при помощи других средств можно совсем забыть про табличный дизайн страниц,но для этого нужны знания css таблиц стилей,зная html с таблицами стилей разобраться не составит особого труда,вот только по началу используя css и блочную верстку,бывает сложно уследить за поведением блоков,а с таблицами на мой взгляд с этим по проще,и лучше использовать все вместе что придает легкость и более широкие возможности.

    Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.

    Чтобы разобраться в устройстве таблицы, расмотрим простой пример:
    Ячейка 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 (слева), 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 (выравнивание влево), 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"), необходимо повторять для каждой ячейки.

 
Сайт создан в системе uCoz