Le tabelle sono molto importanti per dare l’impaginazione adatta ad un contenuto. Vediamo in questa lezione come creare tabelle, con righe e colonne.
I tag delle tabelle
Per creare una tabella, non si utilizza un unico tag, ma tre diversi.
I tag per una tabella
Il tag iniziale per creare una tabella è <table>, che ne racchiude la struttura. Per vedere il bordo della tabella, inseriamo l’attributo border=”1”, necessaria almeno all’inizio per comprendere il funzionamento. All’interno di <table> .. </table> dobbiamo inserire dei tag particolari per la creazione delle righe, <tr>, e delle celle, <td>. Vediamo un esempio per capire meglio.
<table border="1">
<tr>
<td> Ecco la cella, dove posso inserire quello che voglio </td>
</tr>
</table>
Per creare quindi una riga usiamo <tr>. Se vogliamo per esempio creare una tabella con due righe, inseriamo una struttura come in esempio.
<table border="1">
<tr> <!-- Inizio riga 1 -->
</tr> <!-- Fine riga 1 -->
<tr> <!-- Inizio riga 2 -->
</tr> <!-- Fine riga 2 -->
</table>
Per creare delle celle, usiamo <td> all’interno di <tr>. In base a quanti ne inseriamo, si creeranno delle colonne. Per esempio, creiamo una tabella con due righe e due colonne.
<table border="1">
<tr>
<td> Cella 1 </td>
<td> Cella 2 </td>
</tr>
<tr>
<td> Cella 3 </td>
<td> Cella 4 </td>
</tr>
</table>
Provando, avrai capito qual è la gerarchia dei tag di una tabella: prima <table>, poi <tr> e infine <td>, sempre uno dentro l’altro.
Border
Per non creare un doppio bordo tra la cella e la tabella, puoi utilizzare lo stile border-collapse inserendo collapse.
<table border="1" style="border-collapse:collapse;">
<tr>
<td> Cella 1 </td>
<td> Cella 2 </td>
</tr>
</table>
| Prossima lezione |