Come creare le tabelle - Imparare l'HTML

Indice dei contenuti

In questo articolo imparerai a creare delle tabelle con il linguaggio HTML da inserire nelle pagine web

Un step importante durante lo studio del linguaggio HTML è imparare come creare le tabelle o tables. Sono utili per creare liste di oggetti con le relative descrizioni, migliorare la lettura e la comprensione di determinati contenuti con una particolare formattazione, ecc…

Che vengano usate o no in un determinato sito web, a mio parere è comunque importante conoscere la base sulla loro creazione con il linguaggio HTML.

N.B. in passato le tabelle venivano utilizzate come sostituto dei div; Ora la struttura a tabelle non viene più utilizzata a favore dei più performanti <div>.

La configurazione di una tabella è semplice, ma richiede la conoscenza di più tag per realizzarne una.

Inizialmente potrà sembrare un procedimento confuso, ma consiglio prima tutto di leggere il testo e poi di controllare il codice HTML in fondo alla pagina

Tabelle HTML

I tag più importanti da conoscere per creare una tabella in HTML sono i seguenti:

<table> … </table>

<table> dichiara l’apertura e la chiusura dell’intera tabella. Al suo interno andranno inseriti gli altri tag, che determineranno il numero di colonne e righe e celle di cui è composta.
[L’esempio di codice è a fondo pagina]

<tr> riga </tr>

Il tag <tr> crea le righe orizzontali della tabella. Ogni tr creato corrisponde ad una riga di tabella. Tra l’apertura e la chiusura del tag, andranno inseriti gli altri tag che seguono, che conterranno i campi e descrizioni delle singole caselle.

<td> cella </td>

Al contrario, il tag <td> serve a creare una singola cella della tabella o potremmo dire anche “colonna“. Sono sempre inseriti all’interno dei tag <tr>. Possono essere multipli e al loro interno andranno digitati i campi o valori delle caselle.

<th> intestazione o valore chiave </th>

Il tag <th> serve a dichiarare l’intestazione di una riga o colonna all’interno della tabella, e va a sostituzione del tag <td>.

Rispetto al tag <td>, che serve a creare ed inserire un valore in una singola cella, il tag <th> determina l’intestazione di un intera colonna o riga.

Per fare un esempio:

Nome	Età
Giovanni	35

I tag th (Nome; Età) sono l’intestazioni delle colonne, seguono poi i valori delle singole celle (<td>);

Esempio di Codice HTML

<H2> Una tabella HTML </H2>
<table>                    <!-- apertura tabella -->
      <tr>                 <!-- prima riga -->
        <th>Nome</th>      <!-- intestazioni -->
        <th>Età</th>
        <th>Città</th>
      </tr>       
      <tr>                 <!-- seconda riga -->
        <td>Giovanni</td>         <!-- celle -->
        <td>35</td>
        <td>Roma</td>
      </tr>
      <tr>                  <!-- terza riga -->
        <td>Mario</td>
        <td>47</td>
        <td>Milano</td>
      </tr>
</table>                    <!-- chiusura tabella -->

Il risultato sarà questo:

Nome	Età	Città
Giovanni	35	Roma
Mario	47	Milano

Avrai notato che testando il codice su un nuovo file i bordi non compariranno, questo perché andranno impostati separatamente con il CSS.

In questo articolo vedremo una sola regola CSS, esclusivamente per rendere visibile lo spessore dei bordi e migliorare l’estetica delle tabelle, ma non entreremo nel merito: per farlo basterà inserire il seguente codice all’interno di ogni tag: style=”border: 1px solid black;” (bordo di spessore 1 px di colore nero);

Per esempio:

<table style="border: 1px solid black;">   
      <tr>   
        <th style="border: 1px solid black;">Nome</th>    
        <th style="border: 1px solid black;">Età</th>
        <th style="border: 1px solid black;">Città</th>
      </tr>
    ....
</table>

Sarà possibile poi aggiungere altri stili e colori alle tabelle, alle righe o alle singole celle, ma per questo scopo dovremo utilizzare altre regole CSS che abbiamo trattato in un altro articolo.

Testa qui in basso il tuo codice HTML:

o Crea le Tabelle HTML con Codewith.it

Visualizza il Corso completo di HTML

⇦ Il tag img e gli attributi

Elenchi e liste HTML ⇨

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti: