TABELE

Crearea tabelelor
• Pentru a crea tabele în paginile web se
folosește elementul <table> ... </table>
• acesta are și încadrează alte patru sub-
elemente.
– Linia Tabelului <tr> ... </tr>
– Titlul Tabelului <th> ... </th>
– Coloanele tabelului (datele) <dt> ... </dt>
– Sub-titlu tabelului <caption> ... </caption>
 Exemplu
<table border="1">
<tr>
    <th>titlu 1</th>
    <th>titlu 2</th>
</tr>
<tr>
    <td>linia 2- coloana 1</td>
    <td>linia 2- coloana 2</td>
</tr>
<tr>
    <td>linia 3- coloana 1</td>
    <td>linia 3- coloana 2</td>
</tr>
<tr>
    <td>linia 4- coloana 1</td>
    <td>linia 4- coloana 2</td>
</tr>
</table>
 Atributele tabelului
• bgcolor   = definește culoarea tabelului
• width   = specifică lungimea tabelului (în pixeli sau procente din lungimea
paginii)
• border   = grosimea liniei (în pixeli) ce definește tabelul și înconjoară fiecare
celulă
• cellspacing   = spațiu dintre celule (în pixeli)
• cellpadding   = spațiu dintre linia celulei și conținutul acesteia (în pixeli)
• align   = controlează poziţionarea tabelului în pagină, cu următoarele
atribute : left, right, sau center
• background   = controlează culoarea de fond a tabelului, care poate fi și o
imagine
• bordercolor   = culoarea liniei din jurul tabelului
• bordercolorlight   = culoarea luminoasă folosită de două linii din cele patru
care înconjoară tabelul
• bordercolordark   = culoarea întunecată folosită de doua linii din cele patru
care înconjoară tabelul
 Sub-titlul tabelului
• Sub-titlu tabelului "caption" permite specificarea unei linii de text
care va apărea deasupra sau sub tabel, acest lucru este definit de
atributul "align" care poate lua valorile: top (deasupra) bottom (jos)
Exemplu:
• <table border="1" cellpadding="2">
<caption align="bottom">acesta este textul</caption>
<tr>
    <th>titlu 1</th>
    <th>titlu 2</th>
</tr>
<tr>
    <td>linia 2- coloana 1</td>
    <td>linia 2- coloana 2</td>
</tr>
</table>
Atributele elementelor pentru titlu și
coloane
• colspan   = specifica cat de multe coloane ale tabelului aceasta
celula va inlocui
• rowspan   = specifica cat de multe randuri ale tabelului aceasta
celula va inlocui
• align   = alinierea datelor celulei pe orizontala (left, right sau
center)
• valign   = alinierea datelor celulei pe verticala (top, middle sau
bottom)
• background   = controleaza culoarea de fond a celulei, care poate
fi si o imagine
• bgcolor   = defineste culoarea celulei (dar nu imagine)
• width   = specifica lungimea celulei (In pixeli sau procente din
lungimea paginii)
• height   = specifica inaltimea celulei (In pixeli sau procente din
inaltimea paginii)
 Exemplu
<table border="1" cellpadding="2">
<caption align="bottom">acesta este textul</caption>
<tr>
    <th>titlu 1</th>
    <th>titlu 2</th>
</tr>
<tr>
    <td colspan="2">linia 2- coloana 1</td>
</tr>
<tr>
    <td rowspan="2">linia 3- coloana 1</td>
    <td>linia 3- coloana 2</td>
</tr>
<tr>
    <td bgcolor="#adadff">linia 4- coloana 2 - colorat</td>
</tr>
</table>