Come creare una tabella personalizzata nei colori con il CSS.

Come creare uno stile personale nei colori e nella forma di una tabella con il CSS e l'HTML.

Le tabelle sono uno tra gli oggetti HTML più conosciuti e utilizzati. L'uso di una tabella serve per allineare bottoni o immagini o anche per creare una galleria di foto. Le tabelle inoltre sono importanti per organizzare meglio i contenuti da mostrare nei post. In questo articolo vedremo come creare una tabella con il codice HTML e poi come personalizzarla con quello CSS.

Questo lavoro è importante anche per crearsi uno stile particolare da usare nel sito in modo da avere le tabelle tutte dello stesso aspetto e con gli stessi colori. Per rendere le cose più semplici e per un approccio migliore dal punto di vista didattico inizierò con il codice di base di una tabella per poi via via arricchirlo con nuovi attributi e impostazioni. Per mostrare le risultanze di ciascun codice userò il sito Real Time HTML Editor che mostra nella parte bassa del layout quello che riproduce il browser dal codice incollato nella parte alta.  

CODICE HTML DI UNA TABELLA

Il codice di base di una tabella è il seguente

<table>
  <tr>
    <th>Nome</th>
    <th>ID</th>
    <th>Colore Preferito</th>
  </tr>
  <tr>
    <td>Tizio</td>
    <td>00001</td>
    <td>Blu</td>
  </tr>
  <tr>
    <td>Caio</td>
    <td>00002</td>
    <td>Rosso</td>
  </tr>
  <tr>
    <td>Sempronio</td>
    <td>00003</td>
    <td>Verde</td>
  </tr>
</table>

Il tag <table> indica l'inizio e la fine della tabella. Il tag <tr> indica l'inizio e la fine di una riga. Il tag <th> indica l'inizio e la fine di una cella della Intestazione che di default risulta essere centrata. Infine il tag <td> indica l'inizio e la fine di una cella della tabella. In sostanza tra i tag <tr> e </tr> si incollano i tag <td> delle celle con i loro rispettivi contenuti. Il codice precedente se pubblicato in una pagina web produce questo risultato.

INTESTAZIONE E FOOTER DELLA TABELLA

Nell'esempio precedente abbiamo inserito l'intestazione in modo implicito ma lo si può fare anche in modo esplicito e si può aggiungere anche il footer. Si usano i tag <thead> per l'intestazione <tbody> per il corpo della tabella e <tfoot> per il footer. Il precedente codice in questo caso diventa

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>ID</th>
      <th>Colore Preferito</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tizio</td>
      <td>00001</td>
      <td>Blu</td>
    </tr>
    <tr>
      <td>Caio</td>
      <td>00002</td>
      <td>Rosso</td>
    </tr>
    <tr>
      <td>Sempronio</td>
      <td>00003</td>
      <td>Verde</td>
    </tr>
  </tbody>
</table>

Nel footer sono stati inseriti i contenuti della intestazione in inglese. Il risultato sarà il seguente

PERSONALIZZARE DISTANZE DELLE CELLE

Se facciamo precedere il codice precedente da questo foglio di stile

<style>
table {
  border-spacing:20px;
}
</style>

inseriremo una distanza tra le celle che porterà a una maggiore separazione degli elementi

ATTRIBUTI COLSPAN E ROWSPAN

I tag colspan e rawspan servono per unificare più celle orizzontalmente e verticalmente. Accanto a questi attributi c'è un numero che determina quanti elementi unificare. È opportuno fare un esempio

<style>
table {
  border-spacing: 0.5rem;
}
td {
  padding: 0.5rem;
}
td:nth-child(1) { background: hsl(150, 50%, 50%); }
td:nth-child(2) { background: hsl(160, 60%, 50%); }
td:nth-child(3) { background: hsl(170, 70%, 50%); }
td:nth-child(4) { background: hsl(180, 80%, 50%); }
td:nth-child(5) { background: hsl(190, 90%, 50%); }
td:nth-child(6) { background: hsl(200, 99%, 50%); }
</style>
<table>
  <tr>
    <td>This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
    <td>Market</td>
  </tr>
  <tr>
    <td colspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
    <tr>
    <td colspan="4">This</td>
    <td rowspan="3">Little</td>
    <td>Piggy</td>
  </tr>
  <tr>
    <td rowspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
  <tr>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
</table>

Il codice precedente in cui sono stati aggiunti anche dei colori di sfondo porta a questo risultato

TABELLA IN DUE ASSI

Qualche volta può essere utile usare una tabella a due assi. Si tratta di una variante della classica rappresentazione in coordinate cartesiane. Per esempio questo codice

<style>
td, th {
  width: 4rem;
  height: 2rem;
  border: 1px solid #ccc;
  text-align: center;
}
th {
  background: lightblue;
  border-color: white;
}
body {
  padding: 1rem;
}
</style>
<table>
  <tr>
    <th>1</th>
   <th>2</th>   
  <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tr>
   <th>2</th>
   <td>4</td>
    <td>6</td>
    <td>8</td>
    <td>10</td>
  </tr>
  <tr>
    <th>3</th>   
   <td>6</td>
    <td>9</td>
    <td>12</td>
    <td>15</td>
  </tr>
  <tr>
    <th>4</th>   
    <td>8</td>
    <td>12</td>
    <td>16</td>
    <td>20</td>
  </tr>
  <tr>
    <th>5</th>
    <td>10</td>
    <td>15</td>
    <td>20</td>
    <td>25</td>
  </tr>
</table>

porta a questo risultato esteticamente molto interessante

COME EVIDENZIARE UNA RIGA DI UNA TABELLA

Le righe sono contenute tra i tag <tr> e </tr>. Per evidenziare una riga basta creare una regola CSS. Se tra i tag <style> e </style> aggiungiamo questo CSS

.highlight {background-color:yellow;}

e per esempio nella terza riga sostituiamo <tr> con <tr class="highlight">  otterremo questo

COME CREARE UNO STILE PERSONALE PER UNA TABELLA

Si può creare uno stile di una tabella per un singolo post oppure da usare sempre richiamandolo con il nome della classe. Se si preferisce utilizzare sempre lo stesso stile si va su Modello > Modifica HTML e si cerca la sezione <b:skin> nelle prime righe. Si clicca sulla freccetta nera sulla sinistra per visualizzare tutto il codice quindi subito sopra a ]]></b:skin> si incolla questo CSS

table.personale{
width:95%;
font-family:Georgia;
border-collapse: collapse;
border-spacing: 0;
border: 0px solid #bbb;
}
table.personale,table.personale th,table.personale td{
border:1px solid #ddd;
border-collapse:collapse;
}
table.personale td{
padding:15px;
}
.personale th {
padding:7px 10px;
text-align:left;
font-family:Georgia;
font-weight:400;
font-size:16px;
}
table.personale tr:nth-child(odd){
background-color:#f1f1f1;}
table.personale tr:nth-child(even){
background-color:#fff;}
table.personale th{
background-color:#333;
color:#fff;
border:1px solid #333;}
table.personale th:nth-child(even){
background-color:#555;
}

Si salva il modello. Quando si vorrà pubblicare una tabella con questo stile basterà sostituire il primo tag <table> con <table class="personale">. Ecco un esempio di tale stile applicato a una tabella relativa a attributi da usare nell'HTML e CSS delle tabelle.

Attributo	Osservazioni	Come si usa
colspan	si usa con <th>e <td>	Estende la cella a due o più
rowspan	si usa con <th>e <td>	Estende la cella a due o più
align	Deprecato	Al suo posto si usa float
bgcolor	Deprecato	Si usa background-color
cellpadding	Deprecato	Si usa padding
cellspacing	Deprecato	Si usa border-spacing
vertical-align	Esempi: top, bottom, ...	Allinea il contenuto all'interno di una cella
border-spacing	Versione moderna di cellspacing	Per definire lo spazio tra celle se impostato border-collapse:separate;
width	si usa con <td> e <th>	Determina la larghezza
border	Funziona con tutti gli elementi della tabella	Per inserire i bordi nelle celle e negli altri elementi
border-collapse	Valori: collapse, separate	Comportamento ai limiti della cella

Il codice del CSS può essere personalizzato modificando i codici dei colori e lo stile del bordo oltre al nome della famiglia di font.  Se si vuole mostrare una tabella con questo aspetto solo in un singolo post allora si aggiunge il tag <style> all'inizio del CSS e il tag </style> alla fine quindi si incolla il codice HTML della tabella che per la tabella appena postata è il seguente

<table class="personale"><tbody>     <tr>       <th><font size="4">Attributo della tabella</font></th>        <th><font size="4">Osservazioni</font></th> <th><font size="4">Come si usa</font></th>    </tr> <tr>
<td>colspan</td>
<td>si usa con th e td</td>
<td>Estende la cella a due o più</td></tr>
<tr>
<td>rowspan</td>
<td>si usa con th e td</td>
<td>Estende la cella a due o più</td></tr>
<tr>
<td>align </td>
<td>Deprecato </td>
<td>Al suo posto si usa float</td></tr>
<tr>
<td>bgcolor</td>
<td>Deprecato</td>
<td>Si usa background-color</td></tr>
<tr>
<td>cellpadding</td>
<td>Deprecato</td>
<td>Si usa padding</td></tr>
<tr>
<td>cellspacing</td>
<td>Deprecato</td>
<td>Si usa border-spacing</td></tr>
<tr>
<td>vertical-align</td>
<td>Esempi: top, bottom, ...</td>
<td>Allinea il contenuto all'interno di una cella</td></tr>
<tr>
<td>border-spacing </td>
<td>Versione moderna di cellspacing</td>
<td>Per definire lo spazio tra celle se impostato border-collapse:separate;</td></tr>
<tr>
<td>width</td>
<td>si usa con &lt;td&gt; e &lt;th&gt;</td>
<td>Determina la larghezza</td></tr>
<tr>
<td>border</td>
<td>Funziona con tutti gli elementi della tabella</td>
<td>Per inserire i bordi nelle celle e negli altri elementi</td></tr>
<tr>
<td>border-collapse</td>
<td>Valori: collapse, separate</td>
<td>Comportamento ai limiti della cella</td></tr>     </tbody></table>