TABELE Crearea tabelelor Pentru a crea tabele n
TABELE
Crearea tabelelor • Pentru a crea tabele în paginile web se folosește elementul <table>. . . </table> • acesta are și încadrează alte patru subelemente. – 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> <td>linia 2 - coloana 1</td> <td>linia 2 - coloana 2</td> </tr> <td>linia 3 - coloana 1</td> <td>linia 3 - coloana 2</td> </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> <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> <td colspan="2">linia 2 - coloana 1</td> </tr> <td rowspan="2">linia 3 - coloana 1</td> <td>linia 3 - coloana 2</td> </tr> <td bgcolor="#adadff">linia 4 - coloana 2 - colorat</td> </tr> </table>
- Slides: 7