Personalizzazione della tabella coi CSS

1. Confini della tabella border
2. Come impostare la larghezza e l'altezza della tabella
3. Come impostare lo sfondo della tabella
4. Le colonne della tabella
5. Come aggiungere un'intestazione alla tabella
6. Come rimuovere lo spazio  tra i bordi delle cellule
7. Come aumentare lo spazio tra i bordi di cellule
8. Come nascondere le cellule  vuote della tabella
9. Formattazione layout della tabella utilizzando la proprietà table-layout

1. I confini di una tabella. Border

Tabella e cellule all suo interno di default vengono mostrati nel browser senza confini visibili. I confini di una tabella vengono introdotti con la  proprietà  border:

table {
border-collapse: collapse; /*rimuovere gli spazi vuoti tra le cellule*/
border: 1px solid grey; /* impostiamo bordo esterno  per la tabella  di colore grigio e   spessore di 1px */
}

I confini di ogni cellula del titolo della colonna vengono specificati per elemento th:

th {border: 1px solid grey;}

I confini delle celle del corpo della tabella vengono specificati atrverso elemento td:

td {border: 1px solid grey;}

Lo spessore del bordo di celle adiacenti non viene raddoppiato, quindi posiamo impostare lo spessore del bordo delle cellule nella tabela cosi:

th, td {border: 1px solid grey;}

Il bordo esterno della tabella  posimo evidenziare aumentanbdo lo spessore del  bordo  

table {border: 3px solid grey;}

Posimo imostare bordo anche parzialmente:

/* impostiamo il bordo della tabella con lo spesore di 3 px e colore griggio  */
table {border-top: 3px solid grey; }
/* impostimo il bordo grigio per la cella del corpo della tabella con lo spessore1px */
td {border-bottom: 1px solid grey;}

Maggiori informazioni su la proprietà border potete leggere qui.

2. Come impostare la larghezza e l'altezza della tabella

La larghezza predefinita e l'altezza della tabella dipende  dal contenuto delle sue cellule. Se la larghezza non è specificata, sarà uguale alla larghezza della riga più larga .

La larghezza per la tabella e le colonne viene impostata utilizzando la proprietà width . Se per la tabella è impostato table {width: 100%;}  la larghezza della tabella sara uguale alla larghezza del blocco contenitore in cui si trova.

La larghezza della tabella e delle colonne di solito vengono impostati in px o %, per esempio:

table {width: 600px;}
th {width: 20%;}
td:first-child {width: 30%;}

Fissare l'altezza utilizzando la proprietà height  non è raccomandato.. L'altezza delle righe della tabella può essere controllata attraverso padding superiore ed inferiore per elementi <td> e <th>.

th, td {padding: 10px 15px;}

3. Come impostare lo sfondo per una tabella

Di default lo sfondo delle celle della tabella è trasparente. Se una pagina o il blocco contenente la tabella, hanno uno sfondo, sarà visibile attraverso la tabella. Se lo sfondo è impostato per la tabella e le celle, lo sfondo delle cellule avrà precedenza e sarà visibile sopra lo sfondo del corpo della tabella . Come lo sfondo per la tabella e le cellule posiamo usare soliti proprietà :
colore solido,
gradiente,
immagine di sfondo.

4. Le colonne della tabella

Concetto della tabella  in CSS è focalizzato  principalmente sulle righe, formati dal tag   <tr>. In pratica, ci sono casi in cui è necessario applicare formattazione speciale solo alle colonne, le possibilità che abbiamo sono queste :

utilizzando tag <col> è possibile impostare lo sfondo per qualsiasi numero di colonne;

tramite selettore  table td:first-child , table td:last-child  è possibile specificare gli stili per la prima o l'ultima colonna della tabella (ad eccezione della prima cella della intestazione della tabella);

tramite  seletore  table td:nth-child(regole per selezionare colonne ) è possibile impostare gli stili per ualsisi colonna della tabella.

Maggiori informazioni di tag <col>, potete leggere qui.

Ulteriori informazioni di CSS-selettori potete leggere qui.

5. Come aggiungere un'intestazione alla tabella

Aggiungere un titolo al tabella è possibile attraverso tag <caption> e utilizzando la proprietà caption-side posiamo mettere titolo prima o dopo la tablla. Per l'allineamento in orizzontale del testo del titolo vine utilizzata le proprietà text-align. Si eredita.

<style>
caption {
caption-side: bottom;
text-align: right;
padding: 10px 0; 
font-size: 14px;
}
</style>.
<table>
   <caption>Tabella № 1</caption>
      <tr>
         <th>Company</th>
         <th>Q1</th>
         <th>Q2</th>
         <th>Q3</th>
         <th>Q4</th>
      </tr>
...
</table>

6. Come rimuovere gli spazzi tra i bordi delle cellule

Bordi delle cellule di default sono separati da un piccolo spazio. Se impostare border-collapse: collapse per la tabella  allora  lo spazio sara rimosso. La proprietà viene ereditata.

Sintassi

table {border-collapse: collapse;}

7. Come aumentare lo spazio tra i bordi delle cellule

Con la proprietà border-spacing è possibile modificare la distanza tra i bordi delle cellule. Questa proprietà si applica a tutta la tabella . Si eredita.

Sintassi

table {border-collapse: separate; border-spacing: 10px 20px;}
table {border-collapse: separate; border-spacing: 10px;}

8.Come nascondere le cellule vuote della tabella

Le proprietà empty-cells  nasconde o mostra cellule  vuote . Esso agisce solo sulle cellule che non contengono alcun contenuto. Se per una cellula è impostato lo sfondo e per tabella è impostato table {border-collapse: collapse;} allora la cellula vuota non sara nascosta. Si eredita

Markup html della tabella

<table>
<tr>
  <th>Company</th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  </tr>
<tr>
  <td>Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td></td>
</tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
</tr>
</table>

Stili CSS della tabella

table {
border: 1px solid #69c;
border-collapse: separate;
empty-cells: hide;
}
th, td {border: 2px solid #69c;}

9. Formattazione del layout  della tabella  utilizzando la proprietà table-layout

Formattazione del layout  della tabella è determinato da uno dei due metodi : layout fisso e layout responsivo. Sotto formattazione del layout  in questo caso si intende come sara distribuita la larghezza della tabella fra le cellule. La proprietà non si ereditata.

Sintassi

table {table-layout: fixed;}