HTML : Първи стъпки - <TABLE> (таблица)
Да вземем за пример ето тази таблица която се състои от 2 реда и 2колони.
В случая имаме 4 клетки .

клетка1клетка2
клетка3клетка4

Ето и HTML кода на тази таблица:

<table border="1">
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>

Всяка таблица започва с тага <table> и завършва със затварящия таг </table>
Всеки ред на таблицата започва с тага <tr> и завършва със тага </tr>
В този пример имаме два <tr> тага и два затварящи тага </tr> следователно
таблицата ще има два реда( както е в случая).
Ако искаме три реда добавяме още малко код:

<table border="1">
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
<tr>
<td> клетка5 </td>
<td> клетка6</td>
</tr>
</table>


клетка1клетка2
клетка3клетка4
клетка5клетка6


Всяка клетка от този редове трябва да е обградена от таговете <td></td>
В зависимост от това колко <td> има, толкова ще е броя и на клетките в този ред:
Ако искаме клетките да стана 3 на всеки ред кода ще изглежда така:

<table border="1">
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
<td> клетка12 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
<td> клетка34 </td>
</tr>
</table>


клетка1 клетка2клетка12
клетка3клетка4клетка34


Ако на първия ред искаме да има три клетки, а на втория една която да е с дължината на 3 клетки( 3 клетки обединени в една):

<table border="1">
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
<td> клетка3 </td>
</tr>
<tr >
<td colspan="3" > клетка4 </td>
</tr>
</table>


клетка1 клетка2клетка3
клетка4


Ако трябва клетка1 да заема и двата реда:

<table border="1">
<tr>
<td rowspan="2" > клетка1 </td>
<td> клетка2 </td>
<td> клетка3 </td>
</tr>
<tr >
<td >клетка4 </td>
<td >клетка5 </td>
</tr>
</table>


клетка1 клетка2клетка3
клетка4клетка5


Най-горния ред гласи следното :
<table border="1"> - Начало на таблица, която е с дебелина на рамката(border)="1"
Ако променим числото на атрибута border и го напишете така:
<table border="5"> ще се получи следното:

клетка1клетка2
клетка3клетка4

при <table border="10"> следното:

клетка1клетка2
клетка3клетк4

при <table border="0"> няма да има рамка:

клетка1клетка2
клетка3клетка4


Ето и как може да зададем размер на таблица.
Ето пример за таблица която е широка 400 пиксела.

<table border="1" width="400">
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4


Ето още един пример за таблица широка 300 пиксела и висока 300 пиксела.

<table border="1" width="300" height="300" >
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4


Ето пример как може да зададем и размери в проценти.
Така таблицата винаги ще е широка колкото е щирок и прозореца на браузъра.

<table border="1" width="100%" >
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4


Ето и ако зададеме 60%:

<table border="1" width="60%" >
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4


Разтоянието между съдържанието на клетките и стените
на таблицата се задава с CELLPADDING:
Ето пример за разтояние 5 пиксела:

<table border="1" CELLPADDING="5" >
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4


и с 15 пиксела.

<table border="1" CELLPADDING="15" >
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4


Ето как се задава и широчината на рамката:
Пример с 5 пиксела:

<table border="1" CELLSPACING="5" >
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4

и с 15 пиксела:

<table border="1" CELLSPACING="15" >
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>

клетка1клетка2
клетка3клетка4


Цвят на таблица:

<table border="1" bgcolor="#00ff00" >
<tr>
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4


или само на един от редовете:

<table border="1" >
<tr bgcolor="#00ff00" >
<td> клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4


или на една клетка:

<table border="1" >
<tr >
<td bgcolor="#00ff00" > клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>


клетка1клетка2
клетка3клетка4


Ако искате таблицата да я позиционирате на определени координати примерно
100 пиксела наляво и 100 пиксела надолу спрямо горния ляв ъгъл на страницата
може да използвате <div> .

<div style=" position:absolute; left:100px; top:100px">
<table border="1" >
<tr >
<td > клетка1 </td>
<td> клетка2 </td>
</tr>
<tr>
<td> клетка3 </td>
<td> клетка4 </td>
</tr>
</table>
</div>


Това се нарича абсолютно позициониране.
Не мога да ви го демонстрирам, защото таблицата ще изкочи в началото на урока
точно на тези координати left:100px; top:100px...








/ Трябва да сте регистриран за да напишете коментар /
От: Fakeheal
19:55 08-06-2010
Уу, яко обяснен урок ^^
От: samko
23:25 04-03-2011
Страхотно обяснение,супер е.
1