Tutorial HTML - Tabele

Tabelele pot aparea dificile la inceput, dar cu putina rabdare si practica vei vedea ca nu sunt asa cum par. Tagul <table> este folosit pentru a deschide un tabel. Inauntrul acestui tag vom gasi alte doua taguri tipice <tr> (liniile tabelului) si <td> (coloanele tabelului). Dar cea mai buna explicatie ar fi in momentul de fata un exemplu:

html<table border="1">
	<tr>
		<td>Randul 1 Coloana 1</td>
		<td>Randul 1 Coloana 2</td>
	</tr>
	<tr>
		<td>Randul 2 Coloana 1</td>
		<td>Randul 2 Coloana 2</td>
	</tr>
</table>

Demo

Continutul va fi plasat in interiorul casutelor tabelului. O casuta este ceea ce se afla intre <td> si </td>. Atributul borderstabileste latimea marginii tabelului.

HTML - Tabele asimetrice

Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a traversa mai mute linii si "colspan" pentru a traversa mai multe coloane. Deasemenea daca vrem ca prima linie sa serveasca de titluri pentru toate coloanele vom folosi tagul <th>. Acestea vor fi scrise cu litere ingrosate dupa cum vom vedea in exemplu urmator:

html<table border="1"> 
	<tr>
		<th>Coloana 1</th> 
		<th>Coloana 2</th>
		<th>Coloana 3</th>
	</tr>
	<tr>
		<td rowspan="2">Randul 1 Coloana 1</td> 
		<td>Randul 1 Coloana 2</td>
		<td>Randul 1 Coloana 3</td>
	</tr>
	<tr>
		<td>Randul 2 Coloana 2</td>
		<td>Randul 2 Coloana 3</td>
	</tr> 
	<tr>
		<td colspan="3">Randul 3 Coloana 1</td>
	</tr>
</table>

Demo

HTML - Spatierea celulelor

Cu ajutorul atributelor "cellpadding" si "cellspacing" vom defini distanta dintre celule. "cellspacing" stabileste marimea marginii, iar "cellpandding" stabileste distanta dintre margine si continut. In exemplu urmator a fost adaugata deasemenea putina culoare.

html<table border="1" cellspacing="10" cellpadding="10" bgcolor="rgb(0,255,0)"> 
	<tr> 
		<th>Coloana 1</th>
		<th>Coloana 2</th> 
	</tr> 
	<tr>
		<td>Randul 1 Coloana 1</td>
		<td>Randul 1 Coloana 2</td>
	</tr>
	<tr>
		<td>Randul 2 Coloana 1</td>
		<td>Randul 2 Coloana 2</td>
	</tr> 
</table>

Distanta intre celule si dimensiunea margini va fi inerpretata de browser in pixeli. Conform acestei "legi" o valoare de 10 sunt de fapt 10 pixeli. Acest atribut nu este singurul care foloseste ca unitate de masura, pixeli, dar vom invata despre celelalte pe masura ce vom innainta in urmatoarele tutoriale.