Come personalizzare tabelle HTML con gli stili CSS

Specificazione CSS  dà opportunità illimitate per personalizzare  tabelle html.  Tabella e le celle al suo interno di default non hanno bordi e colore di sfondo e nello stesso tempo le cellule all'interno delle tabelle sono strettamente atacati l'una all'altra. La larghezza delle celle di una tabella è determinata dalla larghezza del loro contenuto, quindi la larghezza delle colonne della tabella può essere differsa. L'altezza di tutte le cellule della stessa riga  è determinata dall'altezza della cellula più alta.

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.

caption-side
Valore:
top Intestazione della tabella e situata sopra la tabella. E il valore di default.
bottom Posiziona l'intestazione della tabella sotto di essa.
initial Imposta il valore della proprietà al suo valore di default.
inherit eredita valore della proprietà del elemento genitore.

<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>

Tabella 1
Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

animatedDude

video prevui

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.

border-collapse
Valore:
separate Bordi delle celle sono disposte separatamente.
collapse Bordi delle cellule vicini vengono uniti, e gli spazi tra i bordi vengono rimossi.
initial Imposta il valore della proprietà al suo valore di default.
inherit Eredita valore della proprietà del elemento genitore.

Sintassi

table {border-collapse: collapse;}

table border collapse1

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.

border-spacing
Valore:
valore numerico valore numerico Aggiunge gli spazzi tra i bordi sia verticalmente che orizzontalmente. Se si specificano due valori , il primo sempre definisce lo spazio in orizzontale, e secondo in verticale.
initial Imposta il valore della proprietà al suo valore di default.
inherit Eredita valore della proprietà del elemento genitore.

Sintassi

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

table border spacing

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

empty-cells
Valore:
show Bordo e sfondo delle celle vuote saranno visualizzate uguale alle celle con contenuto .
hide Se tutte le celle nella riga sono vuote, allora l'intera stringa viene visualizzata come se fosse impostato display: none.
initial Imposta il valore della proprietà al suo valore di default.
inherit Eredita valore della proprietà del elemento genitore.

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;}

Company Q1 Q2 Q3
Microsoft 20.3 30.5
Google 50.2 40.63 45.23

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.

table-layout
Valore:
auto Valore di default. La larghezza del layout della tabella è determinata dalla larghezza del suo contenuto incluso valori della proprieta padding-left, padding-right, border-left width piu una largezza di border-right del'ultima cella della riga. Se la larghezze delle cellule non sono impostate chiaramente, esso possono avere larghezze diverse.
fixed La proprietà funziona solo se è impostata la larghezza per la tabella. Le larghezze delle cellule saranno uguali, me nelle cellule dove il contenuto è piu lungo della cellula esso coprirà il contenuto della cellula vicina.
initial Imposta il valore della proprietà al suo valore di default.
inherit Eredita valore della proprietà del elemento genitore.

Sintassi

table {table-layout: fixed;}

Letto 1416 volte