Come adattare la larghezza delle celle di una tabella HTML

In HTML, le tabelle possono essere utilizzate per visualizzare una gran quantità di dati. Le tabelle sono tra gli strumenti più utilizzati in HTML, per mostrare in modo organizzato differenti tipi di informazioni.

Creare una tabella HTML è semplice, ne abbiamo già parlato in questo articolo, ma organizzarle in modo che tutto possa essere visualizzato correttamente dagli utenti è ben altra cosa.

Uno dei problemi più frequenti che si presentano con la creazione di tabelle in HTML, è quello di mostrare i dati contenuti nelle celle con una larghezza ben definita, cosicché le parole non vengano tagliate fuori o non mostrate.

Adattare la larghezza delle colonne e celle di una tabella HTML richiede l’uso del CSS, come vedremo qui di seguito, e con poche istruzioni verranno la loro dimensione verrà automaticamente adattata dal browser.

Adattare la larghezza delle celle con HTML e CSS

Quando si crea una tabella HTML con più di 5-6 colonne, con una discreta quantità di testo, il browser potrebbe trovare difficoltà nel visualizzare il contenuto a tutto schermo, ricorrendo a sgradevoli overflow a scorrimento orizzontale, che comprometterebbero lo stile grafico del sito web.

Per fare questo possiamo ricorrere a poche istruzioni CSS. In questo articolo vedremo come fare per adattare le celle in base al contenuto, oppure tutte con larghezza fissa uguale.

Prima di tutto però, se nel tuo caso si presentasse il problema dell’overflow orizzontale (con la barra di scorrimento orizzontale), procedi a definire una larghezza massima alla tabella, e ad inserire un overflow:auto; al contenitore (container).

Questo può rivelarsi utile nel caso siano presenti lunghi testi all’interno delle celle.

Larghezza automatica delle celle

Nella stragrande maggioranza dei casi, la migliore soluzione è quella di generare tabelle con celle a larghezza automatica, in base al loro contenuto.

Per fare questo dobbiamo ricorrere all’attributo CSS table-layout. Per capire meglio vediamo un esempio:

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Luogo di nascita</th>
      <th>Data di nascita</th>
      <th>Codice fiscale</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mario</td>
      <td>Rossi</td>
      <td>Roma</td>      
      <td>01.01.1980</td>    
      <td>XXXXXX00XX12X235X</td>
    </tr>
    <tr>
      <td>Giacomo</td>
      <td>Verdi</td>
      <td>Viterbo</td>
      <td>12.12.1970</td>    
      <td>YYYYYY01YY89Y567Y</td>
    </tr>
  </tbody>
</table>

table {
//STILE DELLA TABELLA
  border:1px solid;
  width:100%;
  height:auto;
  border-collapse: collapse;

  table-layout:auto;   // CELLE A LARGHEZZA AUTOMATICA
}

table tr td , table tr th {
//BORDI
  border:1px solid
}

Risultato:

Come puoi vedere, la larghezza viene adattata automaticamente in base al contenuto delle singole celle (th e td). I testi più lunghi avranno colonne più larghe. Tutto questo grazie all’attributo table-layout:auto;

Celle a larghezza fissa

Differentemente dall’esempio precedente, per far in modo che le colonne della tabella HTML siano tutte con la stessa larghezza, useremo sempre l’attributo table-layout, ma con il valore fixed.

Riprendendo la stessa tabella mostrata in alto, ma applicando la regole CSS table-layout:fixed; avremo questo risultato: