W3docs
it
Accedi

Tag HTML <col>

Il tag <col> imposta le proprietà delle colonne di una tabella. Descrizione del tag, attributi ed esempi d'uso.

Il tag <col> definisce le proprietà di una o più colonne nella tabella HTML definita dal tag <table>. Permette di applicare stili all'intera colonna in un colpo solo, invece di stilizzare ogni singola cella <td>. Il tag <col> viene quasi sempre utilizzato all'interno del tag <colgroup>, che raggruppa una o più colonne con proprietà comuni.

Il tag <col> va inserito all'interno del tag <table>, prima dei tag <thead>, <tbody>, <tfoot> e <tr>, e dopo il tag <caption> se viene utilizzato (nel tag <caption> si inserisce il nome della tabella).

Perché usare <col>?

Una cella di tabella si trova all'intersezione tra una riga e una colonna, ma la struttura HTML è orientata alle righe: <tr> raggruppa le celle orizzontalmente, e non esiste un elemento riga per riga che raggruppi le celle verticalmente. L'elemento <col> colma questa lacuna. Invece di aggiungere la stessa width, background-color o border a ogni <td> in una colonna, la si dichiara una volta sola su un <col>, e il browser la applica all'intera colonna.

Questo è particolarmente utile quando si vuole:

  • Assegnare a una colonna una larghezza fissa o proporzionale (ad esempio, rendere la prima colonna stretta e l'ultima larga).
  • Evidenziare una colonna con un colore di sfondo per attirare l'attenzione del lettore.
  • Applicare un bordo a una colonna per separarla visivamente.

Tenere presente una limitazione: un elemento <col> non contiene contenuto e non può essere stilizzato liberamente. I browser applicano solo un piccolo insieme di proprietà CSS tramite <col> — background, border, width e visibility. Proprietà come padding, color o font-size vengono ignorate su <col>; per queste bisogna stilizzare direttamente le celle <td>/<th>.

Sintassi

Il tag <col> è vuoto, il che significa che il tag di chiusura non è necessario. Ma in XHTML, il tag <col> deve essere auto-chiuso (<col />). In HTML5 moderno, la barra di chiusura viene omessa (<col>).

Esempio del tag HTML <col>:

Tag HTML <col>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>
Provalo tu stesso »

Risultato

Result

L'attributo span

L'attributo span indica a un elemento <col> di coprire più colonne consecutive. Evita di ripetere lo stesso <col> per colonne adiacenti che devono avere lo stesso aspetto. Il valore deve essere un intero positivo; il valore predefinito è 1.

Nell'esempio seguente, un singolo <col span="3"> applica lo stile alle prime tre colonne contemporaneamente, mentre un secondo <col> stilizza la quarta colonna separatamente:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="3" style="background-color: #eee;" />
        <col style="background-color: #8ebf42;" />
      </colgroup>
      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>120</td>
        <td>98</td>
        <td>143</td>
        <td>361</td>
      </tr>
    </table>
  </body>
</html>

Stilizzare le colonne con CSS

Gli attributi align, valign e width sono obsoleti in HTML5 — sono stati rimossi dalla specifica e non bisogna fare affidamento su di essi. L'approccio moderno consiste nell'impostare larghezze e altre proprietà supportate tramite CSS invece di attributi presentazionali inline.

È possibile puntare direttamente a un <col>, oppure assegnargli una class e stilizzare quella classe. Poiché width è una delle proprietà che si applica tramite <col>, questo funziona bene:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
      /* Style the column directly */
      col.label {
        width: 60%;
      }
      /* Or use the column index */
      col.value {
        width: 40%;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="label" />
        <col class="value" />
      </colgroup>
      <tr>
        <th>Product</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>Keyboard</td>
        <td>$29</td>
      </tr>
      <tr>
        <td>Mouse</td>
        <td>$15</td>
      </tr>
    </table>
  </body>
</html>
Attenzione

Solo un insieme limitato di proprietà CSS ha effetto quando applicato a <col>: background, border, width e visibility (ad esempio visibility: collapse per nascondere una colonna). Proprietà come padding, color, text-align e font-size vengono ignorate sulla colonna e devono essere impostate sulle celle <td> o <th>.

Accessibilità

Gli elementi <col> e <colgroup> sono puramente presentazionali — raggruppano le colonne visivamente ma non creano una relazione semantica che i lettori di schermo annunciano. Un lettore di schermo naviga in una tabella cella per cella usando le associazioni di riga (<tr>) e intestazione (<th>), non attraverso i gruppi di colonne.

Per rendere una tabella di dati comprensibile quando letta in ordine non sequenziale:

  • Usare celle intestazione <th> appropriate con l'attributo scope (scope="col" per le intestazioni di colonna) in modo che ogni cella dati sia collegata alla sua intestazione.
  • Fornire un <caption> per dare un nome alla tabella.
  • Non usare background-color su un <col> come unico modo per trasmettere un significato (ad esempio colonne "valide" vs "non valide"), perché il colore è invisibile agli utenti di screen reader e a chi non riesce a distinguerlo. Abbinarlo sempre a testo o un'icona.

Attributi

AttributoValoreDescrizione
spannumberImposta il numero di colonne le cui proprietà sono determinate dall'elemento <col>. Il numero deve essere un intero positivo. Se il parametro non è specificato, il valore predefinito è 1.
alignleft, right, center, justify, charImposta l'allineamento orizzontale del contenuto della colonna. Obsoleto in HTML5 — usare la proprietà CSS text-align sulle celle <td>/<th>.
charcharacterAllinea il contenuto della colonna a un carattere. Usato solo con align="char". Obsoleto in HTML5.
charoffnumberSfasa il contenuto rispetto al carattere di allineamento. Usato solo con align="char". Obsoleto in HTML5.
valigntop, middle, bottom, baselineAllinea il contenuto verticalmente. Obsoleto in HTML5 — usare la proprietà CSS vertical-align sulle celle.
width%, pixels, relative_lengthImposta la larghezza della colonna. Obsoleto in HTML5 — usare la proprietà CSS width su <col> (ad es. col { width: 40%; }) invece.

span è l'unico attributo ancora definito per <col> in HTML5. Tutto ciò che in precedenza veniva fatto con align, valign e width viene ora realizzato con CSS, come mostrato nella sezione "Stilizzare le colonne con CSS" sopra.

Il tag <col> supporta anche gli Attributi Globali e gli Attributi degli Eventi.

Esercizio

Pratica
Cosa fa il tag HTML col in una tabella?
Cosa fa il tag HTML col in una tabella?
Was this page helpful?