TABELE.

Prezentarea pe tema: "TABELE."— Transcriere de prezentare:

1 TABELE

2 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>

3 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>

4 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

5 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>

6 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)

7 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>