7: Tabele in html – Tutoriale html

Tabelele in html multe ori pot fi foarte folositoare. E adevarat ca nu mai sunt la moda in html, si in mare parte rolul tabelelor a fost preluat de tagul div, insa si acum sunt multe cazuri cand se folosesc tabele in html. Acum cativa ani erau folosite si pentru definierea structurii unui site. Deci, pana la urma ce vreau sa va zic? Tabelele sunt foarte utile, dar nu trebuie sa le folosim in exces, de exemplu tabele html intr-o alta tabela.

Tabele in html

<table border="1" cellspacing="10">
<tr>
<td> Rand 1, camp 1 </td>
<td> Rand 1, camp 2 </td>
</tr>

<tr>
<td> Rand 2 , camp 1</td>
<td> Rand 2 , camp 2</td>
</tr>

</table>

Codul de mai sus rezulta intr-un tabel:

Rand 1, camp 1Rand 1, camp 2
Rand 2 , camp 1Rand 2 , camp 2

Unde tagurile urmatoare inseamna:

border=”1″ – fiecare camp si tabelul intreg este inconjurat cu o margine de 1 px

cellspacing=”10″ – inseamna ca spatiul intre campuri sa fie de 10 pixeli

<tr> – inseamna (table row), adica incepe un rand

<td> – inseamna (table data), un camp unde scriem date in cadrul randului in care ne aflam.

Bineinteles fiecare tag trebuie inchis in ordine .. </tr>, </td>, </table>.

Tabele html cu Heading – coloane intitulate

Exista o optiune care creaza un titlu pentru fiecare coloana. Pe langa aceasta optiune exista si altele si  poate fi ocolita (rezolvata altfel), insa eu va prezint aici cum se face:

<table border="1" cellspacing="10" width="100%" >

<tr>
<th> Sisteme de op. </th> <th>Tutoriale</th>
</tr>

<tr>
<td> Linux </td>
<td> Tutoriale html </td>
</tr>

<tr>
<td> Windows </td>
<td> Tutoriale Photoshop </td>
</tr>
</table>

Codul de mai sus rezulta in:

Sisteme de op.Tutoriale
LinuxTutoriale html
WindowsTutoriale Photoshop

<th> – (table heading), titlul coloanei, sau a tabelului.

width=”90%” – latimea tabelului. Se poate defini si latimea coloanei la primul element din coloana, prima data cand apare </td>.

Era un banc: “Merge webmasterul cu trenul și ce aude? — td, td, <td>, <td>”

Lasă un răspuns

(*)


*