/usr/local/apache/htdocs/lib/public_html/book/WEBMASTER/crosstabl.txt Библиотека на Meta.Ua Коротко о формате таблиц из \"Перекрестка\"
<META>
Интернет
Реестр
Новости
Рефераты
Товары
Библиотека
Библиотека
Попробуй новую версию Библиотеки!
http://testlib.meta.ua/
Онлайн переводчик
поменять

Олег Бунин. HTML: Формат таблиц



Original of this document is on Crossroad server
http://www.cross.ru/rusweb/articles/html/tables.htm Ў http://koi.cross.ru/rusweb/articles/html/tables.htm




















Таблицы



не совсем для чайников






Общая информация о таблицах



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



Итак таблица вставляется в HTML-документ тэгами <TABLE> и </TABLE>.
Одна из самых катастрофических ошибок в редактировании HTML-документов является отсутствие
закрывающего тэга </TABLE> Netscape Navigator , например, вообще отказывается выводить такую таблицу.


Параметры у тэга <TALBE> следующие:



  • BORDER - Ширина бордюра;
  • WIDTH - Ширина таблицы;
  • BGCOLOR - цвет фона под таблицей;




Между этими двумя тэгами могут располагаться следующие элементы:

  • <CAPTION> Название таблицы </CAPTION>. Параметр у тэга CAPTION всего один -
    ALIGN - расположение названия таблицы. Может принимать всего два значения -
    top ( над таблицей ) и bottom ( под таблицей )

  • <TR> Строчка таблицы </TR> - Одна строка таблицы. Может иметь следующие параметры:

    • ALIGN - Выравнивание внутри строки ( LEFT, RIGHT, CENTER );
    • VALIGN - Вертикальное выравнивание внутри строки таблицы ( TOP, BOTTOM, MIDDLE );
    • BGCOLOR - Цвет фона внутри строки.


  • <TD> Столбец таблицы </TD> - Одна столбец таблицы. Может иметь следующие параметры:

    • ALIGN - Выравнивание ( см. выше );
    • VALIGN - Вертикальноее выравнивание ( см. выше );
    • COLSPAN, ROWSPAN - Растягивание клетки на несколько столбцов, строк ( подробнее см. ниже );
    • BGCOLOR - Цвет фона под столбцом.





    Пример таблицы:

    <TABLE BORDER>

    <TR>

    <TD>A</TD> <TD>B</TD> <TD>C</TD>

    </TR>

    <TR>

    <TD>D</TD> <TD>E</TD> <TD>F</TD>

    </TR>

    </TABLE>




    Результат:








    A B C
    D E F





  • <TH> Заголовок </TH> - Элемент таблицы с заголовком столбца или строки.
    Может иметь следующие параметры:

    • ALIGN - Выравнивание ( см. выше );
    • VALIGN - Вертикальноее выравнивание ( см. выше );
    • COLSPAN, ROWSPAN - Растягивание клетки на несколько столбцов, строк ( подробнее см. ниже );
    • WIDTH - Ширина названия;
    • BGCOLOR - Цвет фона под названием.




    Пример использования заголовков:

    <TABLE BORDER>

    <TR>

    <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH>

    </TR>

    <TR>

    <TD>A</TD> <TD>B</TD> <TD>C</TD>

    </TR>

    <TR>

    <TD>D</TD> <TD>E</TD> <TD>F</TD>

    </TR>

    </TABLE>




    Результат:











    Заголовок 1 Заголовок 2 Заголовок 3
    A B C
    D E F





    COLSPAN, ROWSPAN



    Нередко возникает ситуация, когда требуется растянуть одну клетку таблицы,
    например, на два столбца или на две строки и прочее. Для достижения подобного результата
    необходимо использовать два параметра тэгов TH, TR и TD. Рассмотрим использование этих параметров подробнее.


    Итак, параметр COLSPAN - есть указание броузеру раздвинуть клетку таблицы на несколько столбцов.
    Например: COLSPAN=2 - раздвинуть клетку таблицы на 2 столбца.


    Параметр ROWSPAN - вытянуть клетку ( строчку, столбец ) таблицы на 2-е строки.



    Примеры использования:

    <TABLE BORDER>

    <TR>

    <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>

    <TD>1</TD>

    <TD>2</TD>

    </TR>

    <TR>

    <TD>3</TD>

    <TD>4</TD>

    </TR>

    <TR>

    <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>

    <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>

    </TR>

    <TR>

    </TR>

    </TABLE>



    Результат:


















    A 1 2
    3 4
    C D






    Бордюры таблицы



    Выше был описан такой параметр тэга <TABLE> как BORDER. Этот параметр
    устанавливает ширину бордюра таблицы. Он может принимать любое значение от 0 до 10.


    Ширина бордюра равная 0 обозначает отсутствие оного. Я выделил описание этого параметра
    в отдельный параграф, так как с помощью него можно создать довольно интересные эффекты. Например:

    <TABLE ALIGN=center BORDER=5>

    <TR>

    <TD>

    <A HREF="http://www.cross.ru/index.htm"><IMG src="/usr/local/apache/htdocs/testlib/public_html/book/WEBMASTER/crosstabl.txt/http://koi.cross.ru/menu/cross3small.gif"

    ALT="ПЕРЕКРЕСТОК" ALIGN=left WIDTH=300 HEIGHT=55 BORDER=0></A>

    </TD>

    </TR>

    </TABLE>




    Результат:






    ALT="ПЕРЕКРЕСТОК" ALIGN=left WIDTH=300 HEIGHT=55 BORDER=0>






    Параметр WIDTH




    Этот немаловажный параметр, который встречается во многих
    табличных тэгах обозначает во всех случаях одно - принудительныю установку ширины.
    Например, ширина столбца будет равна самому широкому элементу этого столбца, а если же
    Вы хотите, установить точную ширину для этого столбца в половину всей таблицы, то используйте для этого параметр WIDTH




    Пример использования:

    <TABLE BORDER WIDTH="50%">

    <TR><TD WIDTH=80%>Таблица в 50% ширины от экрана. Столбец в 80% ширины таблицы</TD><TD>2</TD>

    </TR>

    <TR><TD>3</TD><TD>4</TD>

    </TR>

    </TABLE>






    Результат:







    Таблица в 50% ширины от экрана. Столбец в 80% ширины таблицы2
    34






    В дорожку



    Вот Вы и познакомились с приличным набором табличных тэгов. В добрый путь. Однако, не забывайте, что на этом пути существует множество подводных камней. В первую очередь они связаны с различными типами браузеров. Например, Internet Explorer совсем недавно научился корректно показывать таблицы, а Netscape Navigator сбрасывает установки шрифта и текста для таблицы ( т.е. внутри самой таблицы эти установки не сохраняют свои значения, а сбрасываются на значения по умолчанию ).









Original of this document is here Ў
Олег Бунин
















© "Перекресток"


Комментарии
Анонимно
Войти под своим именем


Ник:
Текст сообщения:
Введите код:  

Загрузка...
Поиск:
добавить сайт | реклама на портале | контекстная реклама | контакты Copyright © 1998-2018 <META> Все права защищены