Студопедия

КАТЕГОРИИ:

АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника


Таблицы. Для описания таблиц используются три основных тега:




Для описания таблиц используются три основных тега:

<TABLE>

<TR>

<TD>

 

         
<--This--- ----is---- -----a---- ---Table-- ----Row-->
      cell  
  cell     cell

 

В устройстве таблицы легче всего разобраться на простом примере.

<HTML>

<head>

<TITLE>Пример 10</TITLE>

</head>

<H1>Простейшая таблица </H1>

<TABLE BORDER=1> <!--Это начало таблицы-->

<CAPTION> <!--Это заголовок таблицы-->

У таблицы может быть заголовок

</CAPTION>

<TR> <!--Это начало первой строки-->

<TD> <!--Это начало первой ячейки-->

Первая строка, первая колонка

</TD> <!--Это конец первой ячейки-->

<TD> <!--Это начало второй ячейки-->

Первая строка, вторая колонка

</TD> <!--Это конец второй ячейки-->

</TR> <!--Это конец первой строки-->

<TR> <!--Это начало второй строки-->

<TD> <!--Это начало первой ячейки-->

Вторая строка, первая колонка

</TD> <!--Это конец первой ячейки-->

<TD> <!--Это начало второй ячейки-->

Вторая строка, вторая колонка

</TD> <!--Это конец второй ячейки-->

</TR> <!--Это конец второй строки-->

</TABLE> <!--Это конец таблицы-->

</BODY>

</HTML>

 

Вид таблицы показан на рис.13.

Рис. 13.

Пример1

<TABLE>

<TR>

<TD>Ed</TD>

</TR>

</TABLE>

Ed

Пример2

<TABLE BORDER=1>

<TR>

<TD>Ed</TD>

</TR>

</TABLE>

 

Ed

Пример3

<TABLE BORDER=5>

<TR>

<TD>Ed</TD>

</TR>

</TABLE>

Ed

Пример4

<TABLE BORDER=0>

<TR>

<TD>Ed</TD>

</TR>

</TABLE>

Ed

Пример5

<TABLE BORDER=3>

<TR>

<TD>Ed, Rick and Tom</TD>

</TR>

</TABLE>

Ed, Rick and Tom

Пример6

<TABLE BORDER=3 WIDTH=100%>

<TR>

<TD>Ed, Rick and Tom</TD>

</TR>

</TABLE>

Ed, Rick and Tom

<TABLE BORDER=3 WIDTH=75%>

<TR>

<TD>Ed, Rick and Tom</TD>

</TR>

</TABLE>

Ed, Rick and Tom

<TABLE BORDER=3 WIDTH=75%>

<TR>

<TD>Ed</TD>

</TR>

</TABLE>

Ed

<TABLE BORDER=3 WIDTH=50%>

<TR>

<TD>Ed</TD>

</TR>

</TABLE>

Ed

<TABLE BORDER=3 WIDTH=50>

<TR>

<TD>Ed</TD>

</TR>

</TABLE>

Ed

<TABLE BORDER=3 WIDTH=100>

<TR>

<TD>Ed</TD>

</TR>

</TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD>Ed</TD>

</TR>

</TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD ALIGN="center">Ed</TD>

</TR>

</TABLE>

Ed

 

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD ALIGN="right">Ed</TD>

</TR>

</TABLE>

Ed

 

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD ALIGN="left">Ed</TD>

</TR>

</TABLE>

Ed

As you can see, the default value is (usually) ALIGN="left". You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.

 

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD ALIGN="left" VALIGN="top">Ed</TD>

</TR>

</TABLE>

Ed

 

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD ALIGN="left" VALIGN="bottom">Ed</TD>

</TR>

</TABLE>

Ed

 

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD ALIGN="left" VALIGN="middle">Ed</TD>

</TR>

</TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD ALIGN="left" VALIGN="middle"><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32 ALT="Ed"></TD>

</TR>

</TABLE>

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>

<TD WIDTH=80%>Ed</TD>

<TD WIDTH=20%>Tom</TD>

</TR>

</TABLE>

Ed Tom

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>

<TD WIDTH=60%>Ed</TD>

<TD WIDTH=20%>Tom</TD>

<TD WIDTH=20%>Rick</TD>

</TR>

</TABLE>

Ed Tom Rick

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

 

<TR>

<TD WIDTH=60%>Ed</TD>

<TD WIDTH=20%>Tom</TD>

<TD WIDTH=20%>Rick</TD>

</TR>

 

<TR>

<TD>Larry</TD>

<TD>Curly</TD>

<TD>Moe</TD>

</TR>

 

</TABLE>

Ed Tom Rick
Larry Curly Moe

<TABLE BORDER=3 WIDTH=300 HEIGHT=75 >

 

<TR>

<TD WIDTH=60%>Ed</TD>

<TD WIDTH=20%>Tom</TD>

<TD WIDTH=20%>Rick</TD>

</TR>

 

<TR>

<TD>Larry</TD>

<TD>Curly</TD>

</TR>

 

</TABLE>

Ed Tom Rick
Larry Curly  

<TABLE BORDER=3 WIDTH=300 HEIGHT=75 >

 

<TR>

<TD WIDTH=60%>Ed</TD>

<TD WIDTH=20%>Tom</TD>

<TD WIDTH=20%>Rick</TD>

</TR>

 

<TR>

<TD>Larry</TD>

<TD>Curly</TD>

<TD>&nbsp;</TD>

</TR>

 

</TABLE>

Ed Tom Rick
Larry Curly  

 

<TABLE BORDER=3>

 

<TR>

<TD>Ed</TD>

<TD>Tom</TD>

<TD>Rick</TD>

</TR>

 

<TR>

<TD>Larry</TD>

<TD>Curly</TD>

<TD>Moe</TD>

</TR>

 

</TABLE>

Ed Tom Rick
Larry Curly Moe

<TABLE BORDER=3 CELLPADDING=12>

 

<TR>

<TD>Ed</TD>

<TD>Tom</TD>

<TD>Rick</TD>

</TR>

 

<TR>

<TD>Larry</TD>

<TD>Curly</TD>

<TD>Moe</TD>

</TR>

 

</TABLE>

Ed Tom Rick
Larry Curly Moe

If we substitute CELLSPACING for CELLPADDING we get a slightly different effect.

<TABLE BORDER=3 CELLSPACING=12>

 

<TR>

<TD>Ed</TD>

<TD>Tom</TD>

<TD>Rick</TD>

</TR>

 

<TR>

<TD>Larry</TD>

<TD>Curly</TD>

<TD>Moe</TD>

</TR>

 

</TABLE>

Ed Tom Rick
Larry Curly Moe

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>

 

<TR>

<TD>Ed</TD>

<TD>Tom</TD>

<TD>Rick</TD>

</TR>

 

<TR>

<TD>Larry</TD>

<TD>Curly</TD>

<TD>Moe</TD>

</TR>

 

</TABLE>

Ed Tom Rick
Larry Curly Moe

<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0>

 

<TR>

<TD>Ed</TD>

<TD>Tom</TD>

<TD>Rick</TD>

</TR>

 

<TR>

<TD>Larry</TD>

<TD>Curly</TD>

<TD>Moe</TD>

</TR>

 

</TABLE>

Ed Tom Rick
Larry Curly Moe

Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов:

ALIGN

Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).

WIDTH

Ширина таблицы. Ее можно задать в пикселах (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).

BORDER

Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.

CELLSPACING

Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).

CELLPADDING

Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).

Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).

Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:

ALIGN

Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).

VALIGN

Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).

Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:

NOWRAP

Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.

COLSPAN

Устанавливает «размах» ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.

ROWSPAN

Устанавливает «размах» ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.

ALIGN

Устанавливает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).

VALIGN

Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).

WIDTH

Устанавливает ширину ячейки в пикселах (например, WIDTH=200).

HEIGHT

Устанавливает высоту ячейки в пикселах (например, HEIGHT=40).

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

Любопытно отметить, что любая ячейка таблицы может содержать в себе другую таблицу.


Поделиться:

Дата добавления: 2015-08-05; просмотров: 117; Мы поможем в написании вашей работы!; Нарушение авторских прав





lektsii.com - Лекции.Ком - 2014-2024 год. (0.007 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты