HTML2_TABLES.ppt
- Количество слайдов: 26
Таблица: Структура таблицы Таблица Заголовок Тело Строка Ячейка заголовка Ячейка Страна Россия Чехия Дания Население Площадь 200 000 5 000 000 400 000 200 000
Таблицы <TABLE>. . . </TABLE> Атрибуты: − SUMMARY= (описание таблицы) − WIDTH= (ширина таблицы) − BORDER = (ширина границы таблицы) − FRAME = [ void | above | below | hsides | lhs | rhs | vsides | box | border ] (внешняя граница) − RULES = [ none | groups | rows | cols | all ] (внутренние границы) − CELLSPACING = (расстояние между ячейками) − CELLPADDING = (расстояние между границей ячейки и ее содержимым) − ALIGN= [ left | center | right ] (горизонтальное выравнивание) − VALIGN= [ top | bottom | middle ] (вертикальное выравнивание) − BGCOLOR= (цвет фона) • Общие атрибуты
Таблицы <TABLE>. . . </TABLE> Атрибут: FRAME = (внешняя граница) void - нет границ above - граница только сверху below - граница только снизу hsides - граница только сверху и снизу lhs - граница только слева rhs - граница только справа vsides - граница только слева и справа box - граница со всех сторон border - граница со всех сторон
Таблицы <TABLE> . . . </TABLE> Атрибут: RULES = [none| groups| rows| cols| all] (внутренние границы) Значения: none - нет groups - между группами rows - между строками cols - между колонками all - все
Таблицы CELLSPACING CELLPADDING
Строки <TBODY>. . . </TBODY> Тело таблицы <TR>. . . </TR> Строка таблицы Атрибуты: −VALIGN = [ top | middle | bottom | baseline ] [вверх, посередине, вниз, по базовой линии] (вертикальное выравнивание) −ALIGN = [ left | center | right ] [влево, вправо, по центру] (горизонтальное выравнивание) −BGCOLOR = (цвет фона) • Общие атрибуты
Ячейки <TH>. . . </TH> ЯЧЕЙКИ ЗАГОЛОВКА <TD>. . . </TD> ЯЧЕЙКИ СТРОКИ Атрибуты: −VALIGN= [ top | middle | bottom | baseline ] − (вертикальное выравнивание) −ALIGN= [ left | center | right ] (горизонтальное выравнивание) −BGCOLOR= (цвет фона) −WIDTH = (ширина) −HEIGHT = (высота) −ROWSPAN= (число строк, захватываемых ячейкой) −COLSPAN= (число столбцов, захватываемых ячейкой) • Общие атрибуты
ПРИМЕРЫ ТАБЛИЦ 1. ОБЫЧНАЯ ТАБЛИЦА 2 X 3 <TABLE BORDER=1 BORDERCOLOR=RED CELLSPACING=0 > <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
ПРИМЕРЫ ТАБЛИЦ <TABLE SUMMARY="В этой таблице даны сведения о туробъектах. " FRAME="box" BORDERCOLOR=RED CELLSPACING= 0 > RULES= «COLS» CELLPADDING=40 CELLSPACING=4 <TR style="COLOR: blue" bgcolor=#b 0 b 0 ee> <TH >Тип</TH> <TH >Название</TH> <TH>Сезонность</TH> <TH>Количество мест</TH> </TR> <TR> <TD>Турстоянка</TD> <TD>Лесовичок</TD> <TD>Летняя</TD> <TD>100</TD> </TR> <TR> <TD>Пансионат</TD> <TD>Адару</TD> <TD>Круглогодичный</TD> <TD>80</TD> </TR> </TABLE>
ПРИМЕРЫ ТАБЛИЦ 2. ПРИМЕР С ROWSPAN <TABLE BORDERCOLOR = RED CELLSPACING = 0 > <TR> <TD> 1 </TD> <TD ROWSPAN = 2> 2 </TD> <TD> 3 </TD> </TR> <TD> 4 </TD> <TD> 5 </TD> </TR> </TABLE> 1 3 2 4 5 E
ПРИМЕРЫ ТАБЛИЦ 3. ПРИМЕР С COLSPAN <TABLE BORDERCOLOR =RED CELLSPACING =0 > <TR> <TD> 1</TD> <TD COLSPAN =2> 2 </TD> </TR> <TD> 3 </TD> <TD> 4 </TD> <TD> 5 </TD> </TR> </TABLE> 1 23 3 5 4
ПРИМЕРЫ ТАБЛИЦ 4. ПРИМЕР C ЗАГОЛОВКАМИ <TABLE BORDERCOLOR=RED CELLSPACING=0 > <TR> <TH> H 1 </TH> <TH> H 2 </TH> H 3 H 1 H 2 <TH> H 3 </TH> A B C </TR> D E F <TR> <TD> A </TD> <TD> B</TD> <TD> C </TD> </TR> <TD> D </TD> <TD> E </TD> <TD> F </TD> </TR> </TABLE>
4. ПРИМЕР
5. ПРИМЕР
ПРИМЕР 6. Таблица сложной структуры <TABLE BORDER CELLPADDING=5 BORDERCOLOR="GREEN"> <TR BGCOLOR=#ABFFAB > <TD ROWSPAN=2 COLSPAN=2></TD> <TH COLSPAN=2>СРЕДНЕЕ</TH> </TR> <TR BGCOLOR=#ABFFAB > <TH >РОСТ</TH> <TH >ВЕС</TH> </TR> <TR> <TH ROWSPAN=2>ПОЛ</TH> <TH >МУЖЧИНЫ</TH><TD>1. 9 м</TD><TD>90 кг</TD> </TR> <TR> <TH >ЖЕНЩИНЫ</TH><TD>1. 65 м</TD><TD>70 кг</TD> </TR> </TABLE>
СТРУКТУРА СТРАНИЦЫ
HTML-КОД СТРАНИЦЫ
<TABLE cell. Spacing=0 cell. Padding=0 border=0> <TBODY> <TR> <TD v. Align=top align=right width=767><SPAN class=Body style="COLOR: #999966"><A class=topnav href="http: //www. conservation. org/xp/CIWEB/getinvolved/enews. xml">e. Newsletter</ A> <A class=topnav href="http: //www. conservation. org/xp/CIWEB/getinvolved/ecards. xml">e. Cards</ A> <A class=topnav href="http: //www. conservation. org/xp/CIWEB/contact. xml">Contact Us</A> <A class=topnav href="http: //www. conservation. org/xp/CIWEB/library/sites. xml">CI Sites</A> <A class=topnav href="http: //www. conservation. org/xp/CIWEB/search. xml">Search</A> <A class=topnav href="http: //www. conservation. org/xp/CIWEB/sitemap. xml">Site Map</A></SPAN><BR><SPAN><IMG height=5 src="EMP/spacer. gif" width=10 border=0></SPAN><BR> </TD></TR> <TR> ……………
<TR> <TD width=767><SPAN><IMG src="EMP/topnav_5 fleft. gif" border=0></SPAN><A href="http: //www. conservation. org/xp/CIWEB/regions/"> <SPAN><IMG src="EMP/topnav_5 fregions. gif" border=0> </SPAN></A><A href="http: //www. conservation. org/xp/CIWEB/strategies/"> <SPAN><IMG src="EMP/topnav_5 fstrategies. gif" border=0></SPAN></A><A href="http: //www. conservation. org/xp/CIWEB/programs/"><SPAN><IMG src="EMP/topnav_5 fprograms. gif" border=0></SPAN></A><A href="http: //www. conservation. org/xp/CIWEB/getinvolved/"><SPAN><IMG src="EMP/topnav_5 fgetinvolved. gif" border=0></SPAN></A><SPAN><IMG src="EMP/topnav_5 fright. gif" border=0></SPAN> </TD> </TR> <TR> …………. .
<TABLE cell. Spacing=0 cell. Padding=0 width=757 bg. Color=#ffffff border=0> <TBODY> <TR> <TD v. Align=top align=left width=307><A href="http: //www. natureserve. org/explorer/index. htm"><IMG height=109 alt="Nature. Serve Explorer logo. " src="Nature. Serve Explorer An Online Encyclopedia of Life_files/logo. gif" width=307 border=0></A><IMG height=184 alt="Water Lillies photo. " src="Nature. Serve Explorer An Online Encyclopedia of Life_files/lillies. jpg" width=307> <!-- Begin: Left Column with logo and links --> <TABLE cell. Spacing=0 cell. Padding=0 width=307 border=0> <TBODY> <TR> <TD align=left col. Span=2> <IMG height=40 alt=Highlights src="Nature. Serve/hd_highlights. gif" width=307> </TD></TR> <TR> <TD class=hpleft v. Align=top align=left col. Span=2><A class=leftlink href='javascript: popup("homenewsearch. htm")'>Search Rare Species Data by County or Watershed </A><BR> ……. . </TD></TR> <TR> ………. .
HTML2_TABLES.ppt