Едно добро начало с HTML - част 4-та6

Добавен от legolas

06 Feb 2010

(6.0000 от 1 гласували)

ТАБЛИЦИ

Таблицата служи за по-нагледно представяне на Вашата информация. Например по-добре изглежда следния ред :

www.bukvar.bg

www.search.bg

www.google.com

..отколкото :

www.bukvar.bg www.search.bg www.google.com

Таблицата се състои от редове и колони. В горния пример имаме таблица с 3 колони и 1 ред. Всяка клетка от таблицата може да съдържа някакви данни, в примера URL-ите на български портали. За да направите таблица трябва да използвате елемента <TABLE> и съответно </TABLE> за да я завършите. За изграждане на ред в таблицата се използва <TR> и </TR> за края на реда (съкращение от TABLE ROW - ред в таблица) . Колоните във всяки ред се изписват с <TD> и </TD> (TABLE DATA - данни в таблицата), като между тях се вписва съдържанието на клетката. Всъщност, когато използвате <TD> вие създавате една клетка в реда, които сте започнали с <TR>. Колкото елемента <TD> има между два елемента <TR></TR>, толкова колони ще има в таблицата. Когато приключите реда с </TR> автоматично минавате на следващия. Сега ще направя една таблица с 2 колони и 3 реда, като клетките в нея ще оставя празни :

Новото тук е допълнението border="1" към елемента <TABLE>, както и width="90%". Числото в кавичките след border указва дебелината на рамката в пиксели, а това след width широчината на таблицата в проценти от екрана на браузъра. Подравняването на таблицата става с align, като са възможни 3 варианта, "left" (ляво), "center" (в средата) и "right" (вдясно). Особеното при задаването на широчината на таблицата е това, че тя може да се зададе в процент от ширината на екрана, но може да се зададе и в брой пиксели. В първия случай след числото се поставя знака %, а във втория не се поставя. Така че width="50%" задава широчина на таблицата половината от екрана, а width="50" ширина само 50 пиксела. Ето и два примера. Първия е таблица със широчина 80 % и рамка с дебелина 2 пиксела, подравнена вдясно, а втория таблица със ширина 200 пиксела с рамка 5 пиксела, подравнена вляво:

Във втория пример се вижда, че когато съдържанието на клетката е по голямо от размера и, тя автоматично се разширява във височина за да го побере. Вижте как изглежда по-дълъг текст в таблица с една колона и 1 ред със синя рамка с дебелина 3 пиксела и ширина 50% от екрана, подравнена в средата:

<table align="center" border="3" width="50%" bordercolor="#0000FF">
<tr>
<td>
<p align="center">Текста в тази клетка е по-дълъг
от широчината на клетката и за това
таблицата се разширява автоматично във
височина за да побере целия текст.
</td>
</tr>
</table>

Текста в тази клетка е по-дълъг от широчината на клетката и за това таблицата се разширява автоматично във височина за да побере целия текст.

Цвета на рамката се задава след bordercolor и представлява познатото ви вече шестнадесетично число, с което се определя съотношението на трите цвята, червено, зелено и синьо.
В горния пример вече имаме съдържание на клетка. То се поставя между елементите <TD> и </TD> и може да представлява текст, графика, хиперлинк или каквото ви хрумне!

Сега ще ви покажа как изглежда таблицата в началото на тази страница с препратките до дир.бг, сърч.бг и гювеч.бг, само че без рамка :

<table align="center" border="0" width="90%">
<tr>
<td width="33%">
<p align="center"><a href="https://www.dir.bg">www.dir.bg</a> </td>
<td width="33%">
<p align="center"><a href="https://www.search.bg">www.search.bg</a> </td>
<td width="34%">
<p align="center"><a href="https://www.gyuvetch.bg">www.gyuvetch.bg</a> </td>
</tr>
</table>

www.copaste.net

www.search.bg

www.gyuvetch.bg

За първи път тук правиме таблица без рамка (border="0"). Другото ново нещо е, че задаваме ширината на всяка колона поотделно с <td width="33%">. Това се прави за да се разпредели поравно ширината на трите колони в таблицата. Опитайте се да направите горната таблица, като махнете width="33%" след <TD . ,ефекта ще е по-различен.

Можете да променяте цвета на фона на таблицата или да отделните клетки, както и цвета на шрифта ето така:

<table align="center" border="1" width="50%">
<tr>
<td width="50%" align="center" bgcolor="#00FF00"><font color="#0000FF">зелен фон</font></td>
<td width="50%" align="center" bgcolor="#FF0000"><font color="#FFFF00">червен фон</font></td>
</tr>
</table>

зелен фон

червен фон

align="center" след <TD> указва, че съдържанието на клетката трябва да се подравни в средата. bgcolor дава цвета на фона на клетката. <font color задава цвета на шрифта. Ако bgcolor е след <TABLE> тогава указва цвета на фона на цялата таблица.

Сега да сложим в таблицата някаква картинка.

back

forward

За тази цел направих 2 картинки във вид на бутончета с размер 80Х40 пиксела. Тук виждате, че с командата valign може да се задава и вертикално подравняване в клетката, в случая middle (в средата).
Самата картинка се поставя с <img border="0" src="forward.jpg" width="80" height="40">. Хубаво е сложите border="0" след <img, иначе картинката ви ще бъде заградена с рамка, което няма да ви хареса много. Следва src=" името на файла" и след това размера му, width="80" ширина и height="40" височина. Ако искате клетката да съдържа линк към друга страница, преди <img.. трябва да добавите познатото ви вече <a href="https:// ...и т.н."> и да завършите с </a> накрая.

Има още 2 параметъра, които указват как да се подравни клетката в таблицата. Първият е cellpadding а втория cellspacing. Първият задава разстоянието от съдържанието на клетката до ръба на клетката, а втория разстоянието между клетките. Пример:

</table>

back

forward

cellpadding="10" задава разстояние от ръба на клетката до картинката 10 пиксела, а cellspacing="10" задава разстоянието между клетките да бъде 10 пиксела. Експериментирайте с други параметри. ВНИМАНИЕ! Ако не зададете параметрите cellpadding и cellspacing, техните стойности по подразбиране са "1", а не "0", така че ако не искате да имате разстояние между клетките и ограничаване на разстоянието между съдържанието на клетката и ръба на клетката трябва винаги да пишете cellpadding="0" cellspacing="0".

Можете да обединявате редове и колони в таблицата с colspan=.. и rowspan=.. например :

Хитро, нали ? colspan="2" задава да се обединят съседните 2 клетки хоризонтално, а rowspan="2" вертикално. Числото в кавички показва броя на клетките, които искате да се обединят. Ето един по-сложен пример :

Освен width за широчина на таблицата можете да използвате и параметъра height за да задетете и нейната височина. Стойностите също може да са в проценти от екрана на браузъра или в брой пиксели. Също така може освен цвета на рамката да зададете и цвета на светлата и тъмната част от рамката. Това става с bordercolorlight и bordercolordark. Вижте таблица с ширина 200 пиксела, височина 20% от екрана, дебелина на рамката 7 пиксела и два цвята на рамката, съответно тъмносин и светлосин, както и червен фон за клетката:

Забележка! Netscape Navigator не разпознава bordercolorlight и bordercolordark и показва цветове по подразбиране.

Замалко да забравя, вместо <TD> можете да използвате <TH> (Table Heading -заглавие в таблицата). В такъв случай текста в клетката автоматично се центрира в средата и се показва удебелен.

Ето какво научихте за таблиците :

1. Таблица се създава с двойката елементи <TABLE> и </TABLE>.

2. Редовете в таблицата се създават с <TR> и </TR> (table row). Клетките във всеки ред (колоните) се създават с <TD></TD>

3. Таблицата може да се подравнява спрямо екрана вляво, вдясно и в средата, както и да се задава нейната ширина в пиксели или в проценти от екрана.

4. Таблицата може да се изчертава със или без рамка. Може да се определи цвета на рамката, както и на светлата и тъмната и част.

5. В клетките на таблицата могат да се съдържат картинки, текст, хиперлинкове, цвят за фон.

6. Клетките в таблицата могат да се обединяват.

Тествай знанията си

Категории

РЕКЛАМИРАЙТЕ ВАШИТЕ УСЛУГИ

Последвайте ни

Едно добро начало с HTML - част 4-та6

Коментари