Le tabelle sono molto utili per organizzare i contenuti di una pagina. Vediamo in questa lezione come crearle utilizzando righe e colonne.
Per creare una tabella non si utilizza un solo tag, ma diversi tag che lavorano insieme.
Il tag principale per creare una tabella è <table>, che ne racchiude l'intera struttura. Per visualizzare il bordo della tabella, inseriamo l'attributo border=”1”, utile soprattutto all'inizio per comprenderne il funzionamento. All'interno di <table> … </table> dobbiamo inserire i tag che rappresentano le righe, <tr>, e quelli che rappresentano le 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 una riga utilizziamo il tag <tr>. Se vogliamo, per esempio, creare una tabella con due righe, possiamo utilizzare una struttura come quella dell'esempio seguente.
<table border="1">
<tr> <!-- Inizio riga 1 -->
</tr> <!-- Fine riga 1 -->
<tr> <!-- Inizio riga 2 -->
</tr> <!-- Fine riga 2 -->
</table>
Per creare le celle utilizziamo il tag <td> all'interno di <tr>. In base al numero di celle inserite, verranno create le 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 gli esempi, avrai capito qual è la gerarchia dei tag di una tabella: prima <table>, poi <tr> e infine <td>, sempre uno all'interno dell'altro.
Per evitare che venga visualizzato un doppio bordo tra le celle, puoi utilizzare la proprietà CSS border-collapse:collapse all'interno dell'attributo style.
<table border="1" style="border-collapse:collapse;">
<tr>
<td> Cella 1 </td>
<td> Cella 2 </td>
</tr>
</table>