HTML: le tabelle

L'HTML utilizza i tag principali come "table", "tr" e "td" per creare tabelle strutturate. Il tag "table" definisce la tabella stessa, mentre il tag "tr" indica una riga all'interno della tabella. Infine, il tag "td" rappresenta una cella della tabella. Questi tag possono essere combinati per creare una disposizione tabellare di dati. Ad esempio, <table> inizia la tabella, <tr> definisce una riga e <td> crea una cella. È possibile inserire contenuti all'interno delle celle per organizzare i dati in modo chiaro e leggibile. Gli esempi pratici e gli esercizi possono aiutare a comprendere meglio come utilizzare correttamente questi tag per creare tabelle interattive e informative.

I tag HTML <table>, <tr>, e <td> sono utilizzati per creare tabelle in una pagina web. Ecco una descrizione di come utilizzare questi tag per creare tabelle.

Tag table

<table>: Questo è il tag principale che viene utilizzato per definire una tabella. Viene posizionato all'inizio e alla fine di tutto il contenuto tabella. Ad esempio

Tag tr

<tr>: Questo tag viene utilizzato per creare una riga all'interno della tabella. Viene posizionato all'interno del tag <table> e contiene le celle della riga. Ad esempio:

Tag td

<td>: Questo tag viene utilizzato per creare una cella all'interno di una riga della tabella. Viene posizionato all'interno del tag <tr> e contiene il contenuto della cella. Ad esempio:

Tabelle con più colonne

Puoi creare tabelle più complesse aggiungendo più righe e celle all'interno della tabella. Ecco un esempio di come potrebbe essere una tabella HTML completa con più righe e celle:

Questo codice HTML genererà una tabella con 3 righe e 2 colonne. Le celle della tabella conterranno il testo specificato all'interno dei tag <td>. Puoi personalizzare ulteriormente l'aspetto della tabella utilizzando CSS o aggiungendo attributi ai tag HTML pertinenti.

Esempio 1

        <table  class="table" >
          <tr>
            <td>Riga 1, Cell 1</td>
            <td>Riga 1, Cell 2</td>
          </tr>
          <tr>
            <td>Riga 2, Cell 1</td>
            <td>Riga 2, Cell 2</td>
          </tr>
          <tr>
            <td>Riga 3, Cell 1</td>
            <td>Riga 3, Cell 2</td>
          </tr>
        </table>
      

Esempio 2

        <table  class="table" >
          <tr>
             <td>1</td>
            <td>Riga 1, Cell 1</td>
            <td>Riga 1, Cell 2</td>
          </tr>
          <tr>
             <td>2</td>
            <td>Riga 2, Cell 1</td>
            <td>Riga 2, Cell 2</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Riga 3, Cell 1</td>
            <td>Riga 3, Cell 2</td>
          </tr>
        </table>
      

Nella tabella sopra è stata aggiunta una colonna con il numero di riga.

Esercizi

Riproduci nell'editor online le tabelle sopra. Ricordati di partire dalla struttura base del documento html.

Indice

• Introduzione all'Html
• Html: editor online gratuito
• Html: i titoli
• Html: tag per la formattazione del testo
• Html: le liste ordinate e non ordinate
• Html: le tabelle
• Html: il tag th per le intestazioni delle tabelle
• Html: gli attributi
• Html: attributo border per le tabelle