Програмиране в среда Интернет
Начало
Увод
Съдържание
Въведение в Интернет
HTML
CSS
JavaScript
Perl
Полезни връзки
Речник на термините
HTML - ВТОРА ЧАСТ
Таблици - създаване, форматиране. Параметри на таблиците.
Вложени таблици.
Списъци и дефиниции.
Един от най-важните тагове в HTML е тага за създаване на таблици <TABLE></TABLE>. Благодарение на таблиците е възможен много по-добър конкрол върху изгледа на документа. Например документа, който четете е съставен от една таблица с два реда и три колони. Тъй като таблиците са много важни тук ще ги разгледаме в големи подробности. Както беше отбелязано тага за създаване на една таблица е <TABLE>. Той се нуждае от затварящ таг, който да обозначи края на таблицата. Сега последователно ще създадем проста таблица, която ще усъвършенстваме впоследствие :
<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Моята първа таблица</H1>
<TABLE>
</TABLE>
</BODY>
</HTML>
Резултата от този код ще е една празна страница със заглавие и нищо повече. Това е така, защото всяка една таблица трябва да има дефинирани поне един ред и една колона. Това става с таговате <TR> (за ред) и <TD> (за колона). Ето как ще изглежда модифицирания код:
<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Моята първа таблица</H1>
<TABLE>
<TR>
<TD>Ред 1, колона 1.</TD>
<TR>
</TABLE>
</BODY>
</HTML>
Това
е резултата от този код.
Сега нека създадем още един ред и една колона. За да
видим границите между тях ще използваме атрибута на <TABLE>
- BORDER="...". Параметър на този атрибут е дебелината
на границта между клетките на таблицата в пиксели.Ето го и кода:
<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Моята първа таблица</H1>
<TABLE BORDER="2">
<TR>
<TD>Ред 1, колона 1.</TD>
<TD>Ред 1, колона 2.</TD>
</TR>
<TR>
<TD>Ред 2, колона 1.</TD>
<TD>Ред 2, колона 2.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Това
е резултата от този код.
Атрибутите на тага <TABLE>
следните :
| bgcolor="..." | Установява цвета на фона на таблицата. |
| background="..." | Дефинира изображение, което да служи като фон. |
| border="..." | Установавя дебелина на границата между клетките. |
| bordercolor="..." | Цвят на границата. Ефекта от използването на този атрибут е различно е Internet Explorer и Netscape Navigator. |
| cellspacing="..." | Дефинира празното пространство между външните линии на клетките в пиксели. |
| align="..." | Установавя подравняването на таблицата. |
| cols="..." | Дефинира броя на колоните в таблицата. Ако се изпусне броя на колоните се намира автоматично от броя на <TD> таговете. |
| height="..." | Един от най-важните атрибути. Установява височината на таблицата в пиксели или относително спрямо външния контейнер в проценти. |
| width="..." | Още един много важен атрибут. Установява ширината на таблицата в пиксели или относително спрямо външния контейнер в проценти. |
| cellpadding="..." | Дефинира празното пространство между границата на клетката и текста в клетката в пиксели. |
| bordercolorlight="..." | Цвят светлите линии, използвани за постигане на 3-D ефекта. |
| bordercolordark="..." | Цвят тъмните линии, използвани за постигане на 3-D ефекта. |
Освен атрибутите на тага <TABLE> собствени атрибути имат и таговете <TR> и <TD> :
|
Атрибути на тага <TR>
|
|
| bgcolor="..." | Установява цвета на фона на реда. |
| align="..." | Установавя хоризонталното подравняване на текста в дадения ред. |
| valign="..." | Установавя вертикалното подравняване на текста в дадения ред. Възможни параметри на този атрибут са :top (подравняване горе), middle (подравняване по средата), bottom (подравняване долу), baseline (препоръчва се ако текста ще се пренася на няколко реда). |
| bordercolor="..." | Цвят на границата. Ефекта от използването на този атрибут е различно е Internet Explorer и Netscape Navigator. |
| bordercolorlight="..." | Цвят светлите линии, използвани за постигане на 3-D ефекта. |
| bordercolordark="..." | Цвят тъмните линии, използвани за постигане на 3-D ефекта. |
|
Атрибути на тага <TD>
|
|
| bgcolor="..." | Установява цвета на фона на клетката. |
| align="..." | Установавя хоризонталното подравняване на текста в дадения ред. |
| valign="..." | Установавя вертикалното подравняване на текста в дадения ред. Възможни параметри на този атрибут са :top (подравняване горе), middle (подравняване по средата), bottom (подравняване долу), baseline (препоръчва се ако текста ще се пренася на няколко реда). |
| colspan="..." | Дефинира броя на колоните около които дадената клетка трябва да се разшири. За пример може да вземета най-горния ред на тази таблица, за който атрибута colspan="2". |
| rowspan="..." | Дефинира броя на редовете около които дадената клетка трябва да се разшири. |
| height="..." | Установява височината на клетката в пиксели или в проценти. |
| width="..." | Установява ширината на клетката в пиксели или в проценти. |
| nowrap | Този атрибут няма параметри и указва на браузъра да не пренася текста на нов ред ако дължината му е по-голяма от ширината на клетката. |
| background="..." | Дефинира изображение, което да служи като фон. |
| bordercolor="..." | Цвят на границата. Ефекта от използването на този атрибут е различно е Internet Explorer и Netscape Navigator. |
| bordercolorlight="..." | Цвят светлите линии, използвани за постигане на 3-D ефекта. |
| bordercolordark="..." | Цвят тъмните линии, използвани за постигане на 3-D ефекта. |
Това са основните тагове, които може да се поставят в контейнера <TABLE>. Освен тях има още няколко, които не се използват често и ще бъдат само изброени с кратко обяснение на всеки от тях:
| <TBODY>...</TBODY> | Това е условен контейнер на един или няколко реда клетки на таблицата. Във всяка таблица може да има повече от един такъв контейнер, като чрез него се дефинират отделни стилове за всяка една от групите клетки, които той включва. |
| <THEAD>...</THEAD> | Специален контейнер на един или повече реда от клетките на таблицата, който се показва в началото й. В една таблица може да има само един такъв контейнер, като той трябва да се намира веднага след тага TABLE. Netscape Navigator 4 игнорира този таг. |
| <TFOOT>...</TFOOT> | Специален контейнер на един или повече реда от клетките на таблицата, който се показва в края й. В една таблица може да има само един такъв контейнер, като той трябва да се намира винаги преди TBODY. Netscape Navigator 4 игнорира този таг. |
Следващият пример ще илюстрира действието на повечето от атрибутите обяснени по горе :
<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Таблица 1</H1>
<TABLE BORDER="1" BGCOLOR="yellow" WIDTH="80%" ALIGN="center">
<TR>
<TD COLSPAN="2" ALIGN="center">Сливане на две колони.</TD>
</TR>
<TR>
<TD ROWSPAN="2">Сливане на два реда.</TD>
<TD>Ред 2, колона 2.</TD>
</TR>
<TR>
<TD>Ред 3, колона 2.</TD>
</TR>
</TABLE>
<H1 ALIGN="center">Таблица 2</H1>
<TABLE BORDER="1" BGLOLOR="megenta" WIDTH="400" ALIGN="center" BORDERCOLOR="blue" HEIGHT="300">
<TR>
<TD COLSPAN="2" ALIGN="center" BORDERCOLORDARK="white" BORDERCOLORLIGHT="red">Сливане на две колони.</TD>
</TR>
<TR>
<TD ROWSPAN="2"VALIGN="top">Сливане на два реда.</TD>
<TD>Ред 2, колона 2.</TD>
</TR>
<TR>
<TD VALIGN="bottom">Ред 3, колона 2.</TD>
</TR>
</TABLE>
</BODY>
<H1 ALIGN="center">Таблица 3</H1><H4 ALIGN="center">(CELLSPACING="20")</H4>
<TABLE BORDER="1" WIDTH="100%" ALIGN="center" CELLSPACING="20">
<TR>
<TD COLSPAN="2" ALIGN="center">Сливане на две колони.</TD>
</TR>
<TR>
<TD ROWSPAN="2"VALIGN="top">Сливане на два реда.</TD>
<TD>Ред 2, колона 2.</TD>
</TR>
<TR>
<TD VALIGN="bottom">Ред 3, колона 2.</TD>
</TR>
</TABLE>
<H1 ALIGN="center">Таблица 4</H1><H4 ALIGN="center">(CELLPADDING="20")</H4>
<TABLE BORDER="1" WIDTH="100%" ALIGN="center" CELLPADDING="20">
<TR>
<TD COLSPAN="2" ALIGN="center">Сливане на две колони.</TD>
</TR>
<TR>
<TD ROWSPAN="2" VALIGN="top">Сливане на два реда.</TD>
<TD>Ред 2, колона 2.</TD>
</TR>
<TR>
<TD VALIGN="bottom">Ред 3, колона 2.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Това
е резултата от този код.
Резултата от примера, ще зависи от браузъра на който
се зарежда страницата (например таблица 2 от този пример зареден върху
Opera 7.20 има
този вид ). По-късно ще бъдат показани случаи когато използването
на таблици е наложително.
Понякога в една HTML страница се налага да се изброяват
различни неща ( например промени направени в настояща версия на софтуер
). За тези случаи HTML разполага с два тага за създаване на списъци -
първият <UL></UL> създава неподреден списък, а втория (<OL>...</OL>)-
подреден списък. Тук смисъла на подреден и неподреден списък е, че в подредения
списък всеки елемент е обозначен с число, обозначаващо неговата позиция,
за разлика от неподредения списък, при който елементите са обозначени
с графични знаци. Всеки един от тези тагове трябва да съдържа поне един
таг <LI>...</LI>, в който се загражда това, което изброяваме.Ето
пример :
<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Това е подреден списък</H1>
<OL>
<LI>Елемент 1</LI>
<LI>Елемент 2</LI>
<LI>Елемент 3</LI>
</OL>
<H1 ALIGN="center">Това е неподреден списък</H1>
<UL>
<LI>Елемент 1</LI>
<LI>Елемент 2</LI>
<LI>Елемент 3</LI>
</UL>
</BODY>
</HTML>
Това
е резултата от този код.
В примера ясно се вижда разликата между двата вида списъка.
Таговете <UL> и <OL> има следните атрибути :
|
Атрибути на тага <UL>
|
|
| compact | Атрибута няма параметри и служи да укаже на браузъра да визуализира списъка с по-малки разстояния между елементите. В повечето браузъри този атрибут не върши нищо. |
| type="..." | Този атрибут променя графичния знак пред всеки един елемент. Възможните параметри са: disc ( по подразбиране), circle, square. Използването му в HTML 4.0 е остаряло и се препоръчва използването на каскадни стилове. |
|
Атрибути на тага <OL>
|
|
| compact | Атрибута няма параметри и служи да укаже на браузъра на визуализира списъка с по-малки разстояния между елементите. В повечето браузъри този атрибут не върши нищо. |
| start="..." | Дефинира стартова позиция на номерата на елементите. Като стойност може да се подаде арабска, римска цифра или буква. |
| type="..." | Този атрибут променя начина на изброяването на всеки един елемент. Възможните стойности на атрибута са следните : A, a, I, i и 1. Те показват, че за изброяването ще се използват съответно букви (големи или малки), римски числа (големи или малки) и арабски цифри (по подразбиране). Използването му в HTML 4.0 е остаряло и се препоръчва използването на каскадни стилове. |
Друг начин за структуриране на информация в един HTML документ е използването на дефиниции. Дефиниция се създава чрез тага <DL>...</DL>. Всяка дефиниция е обозначена с тага <DT> , а обяснението на дефиницията е заградена от тага <DD>. Ето и пример за използване на дефиниции:
<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Списък с дефиниции</H1>
<DL>
<DT>Понятие 1
<DD>Обяснение на понятие 1
<DT>Понятие 2
<DD>Обяснение на понятие 2
<DT>Понятие 3
<DD>Обяснение на понятие 3
</DL>
</BODY>
</HTML>