HTML 4.0 Part 15 (Table commands)

Cъздаване на таблици (Table commands)

Табличните функции в HTML са подходящо средство за представяне на информация в таблична форма. Използването на таблична структура улеснява в значителна степен представянето в полето на HTML документа и на не чисто таблична информация. Всичко зависи от предпочитанията на автора, характера и вида на информационните елементи. Таблица може да бъде изобразена и чрез командата <PRE>. Създадена с обикновен текстов редактор в ASCII формат таблица с тази команда се извежда в полето на документа във вида на нейния оригинал.

Табличните функции в езика HTML имат множество параметри и при тяхното комбиниране се получава по-атрактивно представяне на таблични структури. Елементът <TABLE> е непразен и основен за създаване на таблица. За описание на цялостна таблична структура се използват в комбинация и други HTML елементи.

Съкратен запис:

<TABLE> ... </TABLE>

Пълен запис с параметри:

<TABLE [ALIGN=left|center|right] [BORDER=n] [CELLPADDING=n] [CELLSPACING=n] [WIDTH=n] [HEIGHT=n] [FRAME=cAttr] [RULES=cAttr] [BACKGROUND="url"]> ... </TABLE>

ALIGN - Определя хоризонталното подравняване на таблицата като цяло при следните възможности:

LEFT - подравняване към левия ограничител на страницата;
CENTER - центрирано;
RIGHT - подравняване към десния ограничител на страницата;

BORDER=n - Определя наличието и дебелината в пиксели на рамка за ограждане на таблицата и всичките й клетки. Отсъствието на параметъра изключва изобразяването на рамка, но необходимото празно пространство около таблицата и елементите й се запазва;
CELLPADDING=n - Определя широчината на празното пространство в пиксели между рамката и съдържанието на клетка;
CELLSPACING=n - Определя разстоянието в пиксели между отделните клетки в таблицата;
WIDTH=n|%n - Желаната широчина на таблицата се задава в пиксели или в проценти от широчината на документа;
HEIGHT=n|%n - Минимално желаната височина на таблицата се задава в пиксели или в проценти;
FRAME=cAttr - свързва се наличието на рамка (BORDER) в таблицата и определя кои страни от кaдъра да се изобразяват в зависимост от установения атрибут;
RULES=cAttr - свързва се наличието на рамка (BORDER) в таблицата и определя допълнителни правила в таблицата в зависимост от установения атрибут.
BACKGROUND="url" - задава адрес и име на графичен файл за фон (тапет) на таблицата.

Елементът <CAPTION> се използва съвместно с <TABLE> или <IMG> за поставяне на заглавие или коментар на таблица или графика.

Съкратен запис:

<CAPTION> Text </CAPTION>

Пълен запис:

ALIGN - Определя разположението на текста на заглавието по отношение на таблицата или фигурата. Изравняване на текста в ляво (Left), дясно (Right) или центрирано (Center) не може да се използва съвместно с горно (Top) и долно (Bottom) позициониране. При тези случаи се използва допълнителен параметър VALIGN.
VALIGN - Определя месторазположението на заглавието спрямо таблицата или фигурата. Top поставя заглавието преди таблицата, Bottom - след таблицата. Този параметър се използва когато в ALIGN е зададено хоризонтално подравняване на текста.

Елементът <TR> е от празен тип и задава нов ред в една таблица. Използването му е възможно с или без параметри.

Съкратен запис:

<TR>

Пълен запис:

ALIGN - Задава хоризонталното подравняване на съдържанието в клетките на реда - ляво (Left), дясно (Right), центрирано (Center);
VALIGN - Задава вертикалното подравняване на съдържанието в клетките на реда - към горния край (Top), в средата (Middle), към долния край (Bottom), спрямо базовата линия на текста (Baseline).

Елементът <TD> служи за създаване на една клетка за данни в таблицата. Той може да унаследи всички параметри зададени чрез елемента <TR>. Елементът <TD> се задава като празен елемент.

Съкратен запис:

<TD>

Пълен запис:

ALIGN - Задава хоризонталното подравняване на съдържанието на клетката - в ляво (Left), в дясно (Right), центрирано (Center);
COLSPAN - Задава броят на колоните, обхванати от тази клетка;
ROWSPAN - Задава броят на редовете, обхванати от тази клетка;
NOWRAP - Предотвратява пренасяне на текст на следващ ред в рамките на клетката;
VALIGN - Задава вертикалното подравняване на съдържанието на клетката - към горния край (Top), в средата (Middle), към долния край (Bottom), спрямо базовата линия на текста (Baseline);
WIDTH - Задава предпочитания размер на клетката в пиксели или в проценти от размера на таблицата.

Обикновено таблично представената информация съдържа клетки с наименование на колоните или редовете. Тази необходимост се реализира с помощта на елемента <TH>.

Съкратен запис:

<TH>

Пълен запис:

Сходството на атрибутите с тези на елемента <TD> е пълно, само функцията на елемента го различава и обстоятелството, че подразбиращите се значения за основните атрибути са насочени към центрирано представяне на съдържанието на клетката в получер шрифт (Bold).

Разполагането на една таблица в HTML документ често пъти създава проблеми, свързани с обема изобразявана информация. Възможно най-компактно представената таблица изисква установяване на параметрите border, cellspacing и cellpadding на елемента <TABLE> със стойност 0. Съдържанието на отделните клетки не се различава от допустимото съдържание за един HTML документ, т.е. текст, графика, хипервръзки, списъци, друга таблица. Включването на графични обекти като съдържание на клетка от таблица е възможно за новите версии на WWW клиентите като Netscape Navigator 3.x и Microsoft Internet Explorer 3.x. Оцветяване на клетките, рамките и текстовите компоненти в клетките е достъпно в момента за Microsoft Internet Explorer 3.x. Netscape 3x ги интерпретира частично. Следващите атрибути могат да се включват по избор към елементите за формиране на таблица.

bgcolor="#rrbbgg"|"colour" - Използва се за определяне на основния цвят в клетка, зададен като шестнадесетично число или по наименованието на цвета (виж Таблица 5);
bordercolor="#rrbbgg"|"colour" - Задава цвета на рамката за клетка (виж Таблица 5);
bordercolorlight="#rrbbgg"|"colour" - Задава цвета на светлото поле за рамка на таблица, изобразена в 3D-формат (виж Таблица 5);
bordercolordark="#rrbbgg"|"colour" - Задава цвета на тъмното поле за рамка на таблица, изобразена в 3D-формат (виж Таблица 5).

Следващите примери представят комбинираната употреба на команди за управление на таблици и техните параметри. Пример за таблица - HTML код:

<TABLE>
<TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR>
<TR><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD></TR>
</TABLE>

Визуализация след интерпретация на кода (Екран 8). Примерът може да бъде изпълнен и директно при проследяване на тази хипервръзка.

Екран 8 - Таблица с два реда и четири колони

Пример с обособена рамка и отделени клетки - HTML код:

<table border=10 cellpadding=10 cellspacing=10 width=75%>
<tr><th>Едно<th>Две<th>Три
<tr><th>Четири<th>Пет<th>Шест
</table>

Визуализация след интерпретация на кода (Екран 9). Примерът може да бъде изпълнен и директно при проследяване на тази хипервръзка.

Екран 9 - Нестандартно приложение на елемент <TH>

По-сложен е примерът с използване на графика вложена в клетка, общи клетки за серия колони и редове, празна клетка в таблица - HTML код:

<CENTER>
<TABLE border=2 width=70%>
<tr><th colspan=2 align=center><IMG SRC="computer.gif"> </th>
<th colspan=2><FONT SIZE="+2">Pentium Pro</FONT SIZE="+2"></th></tr>
<tr><td></td><td></td><th>CPU-180 Mhz</th><th>CPU-200 Mhz</th></tr>
<tr><th rowspan=6> Components </th><th>RAM</th><td
align=center>32 MB</td><td align=center>64 MB</td></tr>
<tr><th>Hard Disk</th><td align=center>1600 MB</td><td
align=center>2100 MB</td></tr>
<tr><th>Monitor</th><td align=center>15" Color SVGA 0.28 MPR-II</td>
<td align=center>17" Color SVGA 0.28 MPR-II</td></tr> <tr>
<th>CD-ROM</th><td align=center>8xSpeed EIDE</td><td
align=center>12xSpeed EIDE</td></tr>
<tr><th>Case</th><td align=center>MINI Tower 200W</td><td
align=center>MIDI Tower 200W</td></tr>
<tr><th>Mouse</th><td
align=center>3-Button Mouse+Pad</td><td align=center>3-Button Mouse+Pad</td></tr>
<tr><td></td><td colspan=3 align=right>
<A HREF="mailto://master@muled.vmei.acad.bg">For more, please ask!</A><IMG SRC="smile.gif"></td></tr>
</TABLE>
</CENTER>

Визуализация след интерпретация на кода (Екран 10). Примерът може да бъде изпълнен и директно при проследяване на тази хипервръзка.

Екран 10 - Таблица с вмъкнати компоненти
Атрибут FRAME

Атрибутът се използва единствено в елемента <TABLE> съвместно с атрибута BORDER. Приложението му е възможно за навигатори от по-ново поколение (Internet Expolorer 4.x, 5.x, Netscape Communicator 4.x), тъй като е въведен от HTML 4.0. Предназначението на атрибута е да определя кои страни от рамките в таблицата да бъдат изобразени с помощта на следните атрибути:

ABOVE - изобразява външните рамки от горната страна на таблицата..
BELOW - изобразява външните рамки от долната страна на таблицата.
BORDER - изобразява рамка от всички страни на таблицата.
BOX - изобразява рамка около таблицата.
INSIDES - изобразява рамка само от горе и отдолу в таблицата.
HSIDES - изобразява рамка на външните хоризонтални страни на таблицата.
LHS - изобразява рамка на външната лява страна на таблицата.
RHS - изобразява рамка на външната дясна страна на таблицата.
VOID - премахва всички външни страни от рамката в таблицата.
VSIDES - изобразява рамка на външната дясна и лява страна на таблицата.

Атрибут RULES.

Атрибутът се използва единствено в елемента <TABLE> съвместно с атрибута BORDER. Приложението му е възможно за навигатори от по-ново поколение (Internet Expolorer 4.x, 5.x, Netscape Communicator 4.x), тъй като е въведен от HTML 4.0. Предназначението на атрибута е да определя и променя правилата за изобразяване на рамка вътре в таблицата, чрез следните атрибути:

NONE - премахва всички рамки вътре в таблицата..
GROUPS - извежда хоризонтална рамка между секции.
ROWS - извежда хоризонтална рамка между всички линии в таблицата.
COLS - извежда вертикална рамка между всички колони в таблицата.
ALL - разчертава напълно таблицата.

Следните атрибути се използват с основния елемент на таблицата.

THEAD - формира антетка в таблицата.
TBODY - задава тялото на таблицата.
TFOOT - дефинира коментарна линия под таблицата.

Тези атрибути не се възприемат еднакво от IE и Netscape и съответно не се интерпретират по един и същи начин. Например, BORDERCOLORDARK е атрибут, използван съвместно с BORDERCOLOR и определя цвета на сянката на рамката в една таблица. Той се интерпретира правилно само от Internet Explorer 4.x, 5.x. Комбинацията от атрибути FRAME=HSIDES, RULES=COLS в дефиницията на таблица се игнорират от Netscape Communicator 4.x, а от Internet Explorer 4.x, 5.x се интерпретират коректно.

Следния пример показва възможностите на разгледаните атрибути.

<HTML>
<HEAD><TITLE>Пример за таблица</TITLE></HEAD>
<BODY>
<p> 
<P ALIGN=CENTER>Таблица с атрибути FRAME и RULES</P>
<TABLE ALIGN=CENTER BORDER=2 WIDTH=300 FRAME=HSIDES RULES=COLS BORDERCOLOR="BLUE" BORDERCOLORDARK="AQUA">
<THEAD>
<COLGROUP SPAN=3 ALIGN=LEFT VALIGN=TOP>
</THEAD>
<TBODY>
<TR>
<TD BGCOLOR="PINK">Клетка 1</TD>
<TD>Клетка 2</TD>
<TD>Клетка 3</TD>
</TR>
<TD>Клетка 4</TD>
<TD BGCOLOR="YELLOW">Клетка 5</TD>
<TD>Клетка 6</TD>
</TR>
<TR>
<TD>Клетка 7</TD>
<TD>Клетка 8</TD>
<TD BGCOLOR="MAROON">Клетка 9</TD>
<TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

Примерът може да бъде изпълнен и директно при проследяване на тази хипервръзка. Визуализация след интерпретация на кода c Internet Explorer 5.0 - Екран 10.1.

Екран 10.1 - Атрибути в таблица от HTML 4.0

Визуализация след интерпретация на кода c Netscape Communicator 4.72 - Екран 10.2.

Using Frame and Rules attributes with Netscape Communicator 4.72

Ектан 10.2 - Атрибути в таблица от HTML 4.0

Интернет за персонални компютри