html come creare tabelle

Imparare l’HTML – Creare tabelle

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:

NomeEtà
Giovanni35

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:

NomeEtàCittà
Giovanni35Roma
Mario47Milano

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.

Crea le Tabelle HTML con il nostro Editor di Codice Online


Continua con: Elenchi e liste HTML

Leggi anche: Gli attributi delle immagini o il Corso completo di HTML

Articoli Recenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA