HTML: le tabelle

HTML: I tag principali come "table", "tr" e "td" creano tabelle. Combinandoli, si strutturano i dati. Esempi ed esercizi favoriscono la comprensione.

Tutorial html italiano

TI PIACE QUESTA IMMAGINE?

Personalizza

HTML: le tabelle

HTML: I tag principali come "table", "tr" e "td" creano tabelle. Combinandoli, si strutturano i dati. Esempi ed esercizi favoriscono la comprensione.

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

<table>

  <!-- Contenuto della tabella -->

</table>

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:


<table>

  <tr>

    <!-- Celle della riga -->

  </tr>

</table>

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:

<table>

  <tr>

    <td>Contenuto della cella</td>

  </tr>

</table>

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:

<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>

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

Codice

        <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>

Risultato

Riga 1, Cell 1	Riga 1, Cell 2
Riga 2, Cell 1	Riga 2, Cell 2
Riga 3, Cell 1	Riga 3, Cell 2

Esempio 2

Codice

        <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>

Risultato