Scopul tutorialului
Tutorialul isi propune createa unui tabel in html utilizand majoritatea tagurilor disponibile si crearea unui design cat mai placut pentru tabelul nostru.
Crearea tabelului in html
Tagul <table> este folosit pentru crearea unui tabel. Un tabel html este alcatuit din linii si coloane. Liniile sunt create folosing tagul <tr> iar coloanele sunt create folosind tagul <td>. De asemenea un rand poate contine si titluri sau heading definite cu tagul <th>.
In continuare vom crea un exemplu de tabel cu elevii unei clase si media lor.
| Nume elev | Media |
|---|---|
| Druc Petru | 7.56 |
| Mihai Costea | 9.77 |
| Agapei Cristian | 8.50 |
Codul sursa in html:
<table border="1" cellpadding="1" cellspacing="1" style="width:400px">
<tbody>
<tr>
<th>Nume elev</th>
<th>Media</th>
</tr>
<tr>
<td>Druc Petru</td>
<td>7.56</td>
</tr>
<tr>
<td>Mihai Costea</td>
<td>9.77</td> </tr>
<tr>
<td>Agapei Cristian</td>
<td>8.50</td>
</tr>
</tbody>
</table>
De ce am adaugat aceasta linie border="1" cellpadding="1" cellspacing="1" style="width:400px" imediat dupa tagul table? Am vrut sa aranjam putin continutul tabelului. proprietatea cellpadding specifica spatiul dintre continutul celulei si marginile sale in timp ce proprietatea cellspacing specifica spatiul dintre celulele tabelului. Codul width:400px seteaza lungimea tabelului.
Customizarea unui tabel folosind CSS
Ca sa facem tabelul si mai frumos, ii putem seta cateva stiluri in <header> la pagina.
| Nume elev | Media |
|---|---|
| Druc Petru | 7.56 |
| Mihai Costea | 9.77 |
| Agapei Cristian | 8.50 |
/*Setam colturile rotunjite pentru tabelul nostru. Avem 3 linii de cod pentru ca dorim ca rotunjirea colturilor tabelului sa functioneze pe toate browserele.*/
<style type="text/css">
table
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid #ccc
}
</style>
Scris de