Lezioni
Inizia
Inizia il corso
CodeGym /Corsi /Frontend SELF IT /Stilizzazione delle tabelle

Stilizzazione delle tabelle

Frontend SELF IT
Livello 5 , Lezione 4
Disponibile

9.1 Utilizzo degli attributi

Stilizzare le tabelle in HTML può essere fatto in modi diversi. Uno di questi è l'utilizzo degli attributi direttamente nel tag della tabella e nei suoi elementi. Anche se gli sviluppatori web moderni di solito preferiscono usare CSS per stilizzare, capire gli attributi HTML è utile per una stilizzazione di base.

Attributi principali della tabella

Attributo border

Definisce lo spessore del bordo della tabella. Di solito il valore è dato in pixel.

HTML 
    
      <table border="1">
        <tr>
          <th>Nome</th>
          <th>Voto</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria </td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attributo cellpadding:

Definisce il padding interno delle celle (spacing all'interno delle celle dai loro bordi).

HTML 
    
      <table cellpadding="10">
        <tr>
          <th>Nome</th>
          <th>Voto</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>
Kotlin

Attributo cellspacing:

Definisce la distanza tra le celle.

HTML 
    
      <table cellspacing="5">
        <tr>
          <th>Nome</th>
          <th>Voto</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attributi width e height:

Definiscono la larghezza e l'altezza della tabella. Questi attributi possono essere usati anche nei tag <td> e <th> per impostare le dimensioni delle celle.

HTML 
    
      <table style="text-align: left;" width="100%" height="200">
        <tr>
          <th width="50%">Nome</th>
          <th width="25%">Progetto</th>
          <th width="25%">Città</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>Parigi</td>
        </tr>
      </table>

Attributo align:

Definisce l'allineamento della tabella sulla pagina (left, right, center).

HTML 
    
      <table align="center">
        <tr>
          <th>Nome</th>
          <th>Voto</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attributo bgcolor:

Definisce il colore di sfondo della tabella o delle celle.

HTML 
    
      <table bgcolor="#f0f0f0">
        <tr>
          <th>Nome</th>
          <th>Voto</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

9.2 Attributi per le celle della tabella

Attributi per le celle della tabella

Attributo colspan:

Unisce le celle orizzontalmente.

HTML 
    
      <td colspan="2">Cella unita</td>

Attributo rowspan:

Unisce le celle verticalmente.

HTML 
    
      <td rowspan="2">Cella unita</td>

Attributo align:

Definisce l'allineamento orizzontale del contenuto della cella (left, right, center).

HTML 
    
      <td align="center">Testo centrato</td>

Attributo valign:

Definisce l'allineamento verticale del contenuto della cella (top, middle, bottom).

HTML 
    
      <td valign="top">Testo in alto</td>

Attributo bgcolor:

Definisce il colore di sfondo per la cella.

HTML 
    
      <td bgcolor="#ffcc00">Sfondo colorato</td>

9.3 Esempio completo

Esempio completo di stilizzazione della tabella con attributi:

HTML 
    
      <table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
        <caption>Lista studenti e loro voti</caption>
        <thead bgcolor="#c0c0c0">
          <tr>
            <th align="left">Nome</th>
            <th align="center">Età</th>
            <th align="right">Città</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ivan</td>
            <td align="center">30</td>
            <td align="right">Londra</td>
          </tr>
          <tr>
            <td colspan="2" align="center">Maria e Pietro</td>
            <td align="right">Liverpool</td>
          </tr>
          <tr>
            <td rowspan="2" valign="middle">Anna</td>
            <td>25</td>
            <td>Manchester</td>
          </tr>
          <tr>
            <td>27</td>
            <td>Leeds</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3" align="center">Fine tabella</td>
        </tfoot>
      </table>

Spiegazione dell'esempio

  • border="1": imposta il bordo della tabella di 1 pixel
  • cellpadding="10": imposta il padding interno di 10 pixel per tutte le celle della tabella
  • cellspacing="5": imposta la distanza di 5 pixel tra le celle della tabella
  • width="80%": imposta la larghezza della tabella all'80% della larghezza dell'elemento padre
  • align="center": centra la tabella sulla pagina
  • bgcolor="#e0e0e0": imposta il colore di sfondo per la tabella
  • <caption>: aggiunge un'intestazione alla tabella
  • <thead> e <tbody>: raggruppano le intestazioni e il corpo della tabella. Il colore di sfondo per le intestazioni è impostato con bgcolor="#c0c0c0"
  • <th> e <td>: sono usati per definire celle di intestazioni e dati
  • <align> e <valign>: definiscono l'allineamento orizzontale e verticale del contenuto delle celle
  • <colspan> e <rowspan>: uniscono le celle orizzontalmente e verticalmente
Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION