Tutorial HTML
BackNext
Tabele
Tag-uri specifice tabelelor<table> Defineste un tabel
<th> Defineste header-ul unui tabel
<tr> Defineste un rând (linie) în tabel
<td> Defineste o celula în tabel
<caption> Defineste caption-ul tabelului
<colgroup> Defineste un grup de coloane ale tabelului
<col> Defineste valorile atributelor a unei sau mai multor coloane dintr-un tabel
<thead> Defineste un rând de head
<tbody> Defineste corpul tabelului
<tfoot> Defineste footer-ul tabelului
Tabele
Tabelele se definesc cu ajutorul tag-ului <table>.
Tabelele se impart in linii care se definesc cu ajutorul tag-ului <tr> (table row).
Liniile tabelului se impart in celule cu ajutorul tag-ului <td> (table data)
O celula dintr-un tabel poate contine: text, imagini, paragrafe, forme, tabele, liste etc.
Exemplu:
<table border="1">
<tr>
<td>rand 1, ce1ula 1</td>
<td>rand 1, celula 2</td>
</tr>
<tr>
<td>rand 2, celula 1</td>
<td>rand 2, celula 2</td>
</tr>
</table>
Artibutul borders
Daca nu se specifica acest atribut tabelul va fi afsat fara linii. În unele cazuri acest lucru este
bun deoarece cu ajutorul tabelelor se poate asigura “împartirea” paginii web astfel încât
informatia sa poata fi structurata. Ex. În partea stânga se va afisa o celula care contine un
meniu de navigare iar în dreapta continutul .....
Pentru a afisa liniile tabelului atributul borders se utilizeaza astfel:
<table border="1">
<tr>
<td>rand 1, celula 1</td>
<td>rand 1, celula 2</td>
</tr>
</table>
Acelasi tabel dar fara atributul border
Capul de tabel
Capul de table sau heading se definesc într-un table cu tag-ul <th>.
<table border="1">
<tr>
<th>Cap de coloana 1</th>
<th>Cap de coloana 2</th>
</tr>
<tr>
<td>rand 1, ce1ula 1</td>
<td>rand 1, celula 2</td>
</tr>
<tr>
<td>rand 2, celula 1</td>
<td>rand 2, celula 2</td>
</tr>
</table>
Observatie: Capul de tabel apare bold fara a fi nevoie de editare speciala!
Celule goale într-un tabel
Tabelele care contin celule goale nu sunt afisate correct de toate browser-ele. Problema care
apare este lipsa chenarului în jurul celulei care nu contine nimic.
<html>
<body>
<table border="1">
<tr>
<th>Cap de coloana 1</th>
<th>Cap de coloana 2</th>
</tr>
<tr>
<td>rand 1, ce1ula 1</td>
<td>rand 1, celula 2</td>
</tr>
<tr>
<td>rand 2, celula 1</td>
<td></td>
</tr>
</table>
</body>
</html>
Pentru a rezolva aceasta problema adaugam un character special de spatiu
<html>
<body>
<table border="1">
<tr>
<th>Cap de coloana 1</th>
<th>Cap de coloana 2</th>
</tr>
<tr>
<td>rand 1, ce1ula 1</td>
<td>rand 1, celula 2</td>
</tr>
<tr>
<td>rand 2, celula 1</td>
<td> </td>
</tr>
</table>
</body>
</html>
Observatie: Alta viata!
Exemple diverse
1. Tabel cu caption (cu titlu)
<html>
<body>
<h4>
Acest tabel are un caption adica un titlu pe mijloc si o margine mai
groasa rosie:
</h4>
<table border="2" bordercolor="red">
<caption>titlul tabelului</caption>
<tr>
<td>unu</td>
<td>doi</td>
<td>trei</td>
</tr>
<tr>
<td>patru</td>
<td>cinci</td>
<td>o mie douasute saptezeci si trei</td>
</tr>
</table>
</body>
</html>
2. Celule care sunt unite peste 2 coloane/rânduri
<html>
<body>
<h4>celula peste doua coloane:</h4>
<table border="1">
<tr>
<th>Nume</th>
<th colspan="2">telefon</th>
</tr>
<tr>
<td>Stefan Cel Mare</td>
<td>0230.414055</td>
<td>230.4141195</td>
</tr>
</table>
<h4>celula peste doua randuri:</h4>
<table border="1">
<tr>
<th>Nume:</th>
<td>Stefan Cel Mare</td>
</tr>
<tr>
<th rowspan="2">telefon:</th>
<td>0230.414055</td>
</tr>
<tr>
<td>230.4141195</td>
</tr>
</table>
</body>
</html>
3. Alte tag-uri în cadrul celulelor:
<html>
<body>
<table border="1">
<tr>
<td>
<p>un paragraf</p>
<p>un alt paragraf</p>
</td>
<td>celula aceasta contine un tabel:
<table border="1" bordercolor="blue">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>celula contine o lista
<ul>
<li>unu</li>
<li>doi</li>
<li>trei</li>
</ul>
</td>
<td>salut</td>
</tr>
</table>
</body>
</html>
4. Crearea cu ajutorul atributului de cellpadding de spatiu între text si marginea celulei
<html>
<body>
<h3> Exemplu de table fara cellpadding</h3>
<table border="1" cellpadding="0">
<tr>
<th>Cap de coloana 1</th>
<th>Cap de coloana 2</th>
</tr>
<tr>
<td>rand 1, ce1ula 1</td>
<td>rand 1, celula 2</td>
</tr>
<tr>
<td>rand 2, celula 1</td>
<td> </td>
</tr>
</table>
<h3> Exemplu de table cu cellpadding</h3>
<table border="1" cellpadding="10">
<tr>
<th>Cap de coloana 1</th>
<th>Cap de coloana 2</th>
</tr>
<tr>
<td>rand 1, ce1ula 1</td>
<td>rand 1, celula 2</td>
</tr>
<tr>
<td>rand 2, celula 1</td>
<td> </td>
</tr>
</table>
</body>
</html>
5. Crearea cu ajutorul atributului de cellspacing de spatiu între cellule
<html>
<body>
<h3> Exemplu de table fara cellspacing</h3>
<table border="1" cellspacing="0">
<tr>
<th>Cap de coloana 1</th>
<th>Cap de coloana 2</th>
</tr>
<tr>
<td>rand 1, ce1ula 1</td>
<td>rand 1, celula 2</td>
</tr>
<tr>
<td>rand 2, celula 1</td>
<td> </td>
</tr>
</table>
<h3> Exemplu de table cu cellspacing</h3>
<table border="1" cellspacing="10">
<tr>
<th>Cap de coloana 1</th>
<th>Cap de coloana 2</th>
</tr>
<tr>
<td>rand 1, ce1ula 1</td>
<td>rand 1, celula 2</td>
</tr>
<tr>
<td>rand 2, celula 1</td>
<td> </td>
</tr>
</table>
</body>
</html>
6. Adaugarea de culoare sau imagine pe fundalul tabelului cu ajutorul atributelor bgcolor si
background.
<html>
<body>
<h4>culoare de fungdal pe intreg tabelul:</h4>
<table border="1"
bgcolor="green">
<tr>
<td>pam</td>
<td>pim</td>
</tr>
<tr>
<td>pim</td>
<td>pam</td>
</tr>
</table>
<h4>o imagine pe fundalul tabelului:</h4>
<table border="1"
background="04.gif">
<tr>
<td>pam</td>
<td>pim</td>
</tr>
<tr>
<td>pim</td>
<td>pam</td>
</tr>
</table>
</body>
</html>
6. Adaugare de culoare sau imagine pe fundalul unei celule cu ajutorul atributelor bgcolor si
background
<html>
<body>
<h4>culoare de fungdalul unei celule:</h4>
<table border="1">
<tr>
<td bgcolor="green">pam</td>
<td>pim</td>
</tr>
<tr>
<td>pim</td>
<td>pam</td>
</tr>
</table>
<h4>o imagine pe fundalul unei celule:</h4>
<table border="1">
<tr>
<td>pam</td>
<td background="04.gif">pim</td>
</tr>
<tr>
<td>pim</td>
<td>pam</td>
</tr>
</table>
</body>
</html>
7. Alinierea continutului unei cellule cu ajutoarul atributului align
<html>
<body>
<table border="1">
<tr>
<th align="left">pam</td>
<th>numere</td>
</tr>
<tr>
<td align="left">pim</td>
<td align="right">150.000 lei</td>
</tr>
<tr>
<td align="left">pam</td>
<td align="right">1.000 lei</td>
</tr>
<tr>
<td align="left">pum</td>
<td align="right">12.000 lei</td>
</tr>
</table>
</body>
</html>
BackNext