Descriere:Lucru cu tabele
Download:Nu necesita
Autor:Anonim
Sursa (Link-ul oficial): Propria parere:Util.
Tutorialul:
Tabelele sunt elemente foarte utile pentru aşezarea şi prezentarea conţinutului într-o pagină web.
1. Crearea de tabele
Pentru a crea tabele în paginile web se foloseşte elementul <table> ... </table> , acesta încadrează alte patru sub-elemente, care alcătuiesc structura tabelului.
Linia (rândul) Tabelului <tr> ... </tr>
Titlul Tabelului <th> ... </th>
Coloanele tabelului (datele) <td> ... </td>
Sub-titlu tabelului <caption> ... </caption>
Linia tabelului de obicei conţine elementul pentru titlurile tabelului şi elementul pentru coloanele tabelului.
În cadrul elementelor pentru titluri şi coloanele tabelului se pot adăuga şi alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini
Mai jos puteţi vedea un exemplu de cod HTML pentru crearea unui tabel:
Cod:
Cod: Selectaţi tot
<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>titlu 1 titlu 2
linia 2- coloana 1 linia 2- coloana 2
linia 3- coloana 1 linia 3- coloana 2
linia 4- coloana 1 linia 4- coloana 2
2. 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 două linii din cele patru care înconjoară tabelul
Sub-titlul tabelului
- Sub-titlul 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:
Cod:
Cod: Selectaţi tot
<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>acesta este textul
titlu 1 titlu 2
linia 2- coloana 1 linia 2- coloana 2
3. Atributele specifice elementelor pentru titlu şi coloane
colspan = specifică cât de multe coloane ale tabelului această celulă va înlocui
rowspan = specifică cât de multe rânduri ale tabelului această celulă va înlocui
align = alinierea datelor celulei pe orizontală (left, right sau center)
valign = alinierea datelor celulei pe verticală (top, middle sau bottom)
background = controlează culoarea de fond a celulei, care poate fi şi o imagine
bgcolor = defineşte culoarea celulei (dar nu imagine)
width = specifică lungimea celulei (în pixeli sau procente din lungimea paginii)
height = specifică înălţimea celulei (în pixeli sau procente din înălţimea paginii)
în următorul exemplu puteţi vedea rezultatul folosirii atributelor: "colspan" "rowspan" şi "bgcolor"
Cod:
Cod: Selectaţi tot
<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>