Pubblicato il 07/04/16e aggiornato il

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.

codice-tabella


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

codice-tabella-intestazione


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

codice-tabella-css


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

colspan-rawspan


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

tabella-due-assi


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

evidenziare-riga-tabella


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>




2 commenti :

  1. Aggiungendo il css, da desktop viene una tabella meravigliosa ma, da mobile va oltre l'inquadratura. Ho dovuto togliere i vari padding e altre cose legate allo spazio per "adattarla", anche se così non è bella come prima.

    RispondiElimina
    Risposte
    1. Le tabelle sono degli oggetti HTML che è difficile renderli responsive. Salvo il commento e poi vedo se posso fare qualcosa in merito
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.