Таблици в WEB-Дизайне при создание сайта

           главная страница сайта              Главная                                     обмен ссылками с тематическими сайтами                 Обмен ссылками                                        гостевая книга             Гостевая                                     обратная связь для отправки почты на e-mail              Обратная связь             |

Webmaster-Soft.ru - программы, скрипты для вебмастера            Меню

 

Книги для веб-мастера, книги програмирования  Программы
Электронные книги  Книги
Журналы для вебмастеров   Журналы вебмастеру
  Скрипты
Статьи
Учебник HTML  Учебник HTML
Базы каталогов для раскрутки сайта  Базы каталогов
Шаблоны, картинки, смайлы, иконки  Архив программ
   Интернет магазин
  Каталог статей
  Доска обьявлений
 

 

 

 

 

Работа в сети интернет
Лучшие системы в сети
для заработка

 

 
 

 


 

 

 

В помощь Web-Дизайнеру

Таблици в WEB-Дизайне

  Статьи
  Учебник по Веб-Дизайну



Таблицы


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

     

    Чтобы разобраться в устройстве таблицы, расмотрим простой пример:

     

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





 


 Страницы < 7 8 9 10 11 12 >
 

 

<<<На начало>>>

 


 



 

Ramblers.ru

Rambler's Top100

 

    

  

 
  
  

 

Inet-Bazar.ru
 Интернет магазин цифрового товара.

--==--

 

  

 

Copyright © 2006 Oleg Velikanov