Come gestire varie proprieta di una tabella in CSS Guida completta.

 Grazie alla sua percettibilità, versatilità e semplicità, le tabelle sono ampiamente utilizzate sui siti web per poter meglio trasmettere  materiale al lettore. L'esempio piu evidente che i possa incontrare descrizioni di prodotti in negozi online. Le tabelle in html vengono creati atraverso appositi tag. Il tag principale è <table></table>.

Aggiungendo alle tabelle tutta la potenza degli stili css, puoi integrarli molto organicamente nel tuo siti web, mantenendo idea stilistica del tuo template e presentare al meglio i dati in essa contenuti.

Quindi per creare una tabella in html dovremo utilizare tag <table></table> e gia al interno di questi tag inserire righe (tag <tr></tr>) e colonne(tag <td></td>) che di solito vediamo in Microsoft Excel, creando cosi celle dove in seguito posiamo inserire dei contenuti.

Come gestire la larghezza di una tabella coi css

Per impostazione predefinita, la larghezza della tabella viene impostata dal browser in base alla quantità di dati in essa contenuti. Se nelle celle c'è un sacco di testo, la tabella occuperà tutta la larghezza disponibile e se c'e ne poco, la larghezza della tabella vera diminuita automaticamente. Se ci sono diverse tabelle nella pagina, esso saranno sicuramente  visualizzati con le larghezze diverse. Quindi è meglio impostare un valore preciso per  la larghezza della tabella in percentuale, pixel, em o qualsiasi altra unità di misura CSS, come mostrato nell'esempio qui sotto.

Impostare larghezza della tabella in percentuale o in px

Vediamo di creare qualche classe CSS con diversi valori per vedere come posiamo usarli per gestire la largezza  di una tabella

table { width: 100%; }
.tbl-medium { width: 60%; }
.tbl-small { width: 200px; }

In questo esempio, la larghezza del 100% si applica a tutte le tabelle. E dopo, le classi che vediamo sopra ci aiutano a impostare  diverse larghezze  per le tabelle selezionate. Per specificare alla tabella  una larghezza paria 200 pixel dal nostro esempio, posiamo usare la classe tbl-small (il nome puo essere qualsiasi) dal esempio sopra atribuendola al tag  <table>.

<table class="tbl-small"> /*la nostra tabella sara larga di 200px*/

 

Allineare una tabelle in una pagina web

 

Inizialmente, qualsiasi tabella si trova attaccata al lato sinistro della finestra del browser. Puoi spostarla al centro se solo la tabella non occupa l'intera area disponibile, vale a dire meno del 100%. Per questo, aggiungeremo margini allo stile della tabella utilizzando la proprietà margin con il valore auto, come mostrato qui sotto.

 

  <style>
   table {
    margin: auto; /* allineare tabella al centro*/
   }
  </style>
 
  <table>
   ...
  </table>

In questo esempio,  tutte le tabelle della pagina, saranno allineati al centro.

Cambiare colore di sfondo in una tabella

 

Colore di sfondo di tutte le celle di una tabella viene impostato tramite la proprietà background , che puo essere inserita come una proprietà  di un selettore  per esempio a table. In questo caso, si deve ricordate delle regole per utilizzo di stili, in particolare, l'ereditarietà delle proprietà degli elementi. Se impostiamo colore di sfondo ai selettori  td o th e allo stesso tempo al selettore table, allora colore di td e th  ricoprira il colore di sfondo base (esempio 3).

 

  <style>
   table {
    background: #f5e8d0; /* Colore dello sfondo della tabella */
    border-spacing: 0; /* spazio fra le celle nella tabella  */
   }
   th {
    background: #496791; /* Colore di sfondo delle celle con itestazioni */
    color: #fff; /* Colore del testo */
   }
   td, th {
    padding: 5px 10px; /* spazzi nelle celle  */
   }
  </style>
  <table>
   <tr>
    <th rowspan="2">Tipo del locale   </th>
    <th colspan="2">Temperature  ammasibili </th>
   </tr>
   <tr>
    <th>albergo</th><th>capanone</th>
   </tr>
   <tr>
    <td>massime</td><td>20</td><td>10</td>
   </tr>
   <tr>
    <td>normale</td><td>18</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>minime</td><td colspan="2">15</td>
   </tr>
  </table> 

Tipo del locale Temperature ammisibili
albergocapanone
massime2010
normale1819
minime15

Se dobbiamo creare effetto di  zebra, alternanza di linee di colori diversi, allora dobbiamo usare la pseudo-classe :nth-child , aplicando questa classe al selettore tr. Per fare che l'effeto di zebra si diffonde solo sul corpo della tabella, e non sul suo titolo, posiamo specifiare la parte che ci interessa con gli elementi <thead> e <tbody> .

  <style>
   table {
    width: 100%; /* largezza della tabella */
    border-collapse: collapse; /* eliminiamo le linee dopie  */
   }
   thead {
    background: #f5e8d0; /* lo sfondo del campo titolo */
   }
   td, th {
    padding: 5px; /* spazio al interno delle celle  */
    border: 1px solid #333; /* impostimo bordo */
   }
   tbody tr:nth-child(even) {
    background: #bfb3b3; /* per creare effetto Zebra colorando solo le righe pari*/
   }
  </style>
 
  <table>
   <thead>
    <tr>
     <th rowspan="2">Intervalli ammissibili, mm</th>
     <th colspan="4">Intervalli ammissibili per IT, mm, </th>
    </tr>
    <tr>
     <th>5</th><th>6</th><th>7</th><th>8</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>fino a  3</td><td>4</td><td>6</td><td>10</td><td>14</td>
    </tr>
    <tr>
     <td>Da  3 a 6</td><td>5</td><td>8</td><td>12</td><td>18</td>
    </tr>
    <tr>
     <td>Da 6 a 10</td><td>6</td><td>9</td><td>15</td><td>22</td>
    </tr>
    <tr>
     <td>Da 10 a 18</td><td>8</td><td>11</td><td>18</td><td>27</td>
    </tr>
    <tr>
     <td>Da 18 a 30</td><td>9</td><td>13</td><td>21</td><td>33</td>
    </tr>
    <tr>
     <td>Da 30 a 50</td><td>11</td><td>16</td><td>25</td><td>39</td>
    </tr>
    <tr>
     <td>Da 50 a 80</td><td>13</td><td>19</td><td>30</td><td>46</td>
    </tr>
   </tbody>
  </table>
 

Esempio

Intervalli ammissibili, mm Intervalli ammissibili per IT, mm,
5678
fino a 3461014
Da 3 a 6581218
Da 6 a 10691522
Da 10 a 188111827
Da 18 a 309132133
Da 30 a 5011162539
Da 50 a 8013193046

Valore del selettore :nth-child viene  applicato a tutte le righe pari e imposta il loro colore di sfondo. Possiamo sostituire selettore :nth con :add  e come risultato le righe dispari saranno evidenziate in grigio.

Allo stesso modo, posiamo selezionare non solo le celle ma anche le colonne nella nostra tabella, ma per colonne è necessario utilizzare il selettore tbody td: nth-child (even).

 

Spazzi all'interno delle celle della tabella html

 

Spazio interno o padding  è la distanza tra il bordo della cella e il suo contenuto. Se non ci fosse questo spazzio al interno della cella testo, come per esempio del contenuto piu diffuso, si sarebbe attacato al bordo della cella peggiorando così la sua percezione, l'aggiunta dello spazio libero al interno della cella è in grado di migliorare la leggibilità del testo. A tal fine, si applica la proprietà padding dei css, che posiamo atribuire ai selettori td th, come mostrato sopra negli Esempi. Tipicamente, si indica un singolo valore, quando si imposta lo spazio vuoto intorno al contenuto nelle celle che creera in questo caso spazio libero uguale da tutti i lati. Posiamo indicare due anche  valori, quando è necessario impostare diversi spazi in verticale (primo valore) e in orizontale ( secondo valore).

 

Cambiare spazio tra le celle in una tabella

 

Esiste anche uno piccolo spazio  tra le celle, che non è visibile finché le celle o il colore di sfondo non vengono impostate. Inizialmente questa distanza è di 2px e può essere modificata utilizzando la proprietà border-spacing, aggiungendola al selettore table della tabella selezionata .

 

Uso di   border-spacing.

table {
 border-spacing: 3px; /* spazio fra le celle compreso il bordo che circonda la cella */
}
thead  th {
 background: #e08156; /* colore dello sfondo del titolo */
 color: #333; /* colore del testo */
}
td, th {
 padding: 5px; /* spzi al inetrno delle celle */
 background: #4c715b; /* colore dello sfondo nelle celle */
 color: #f5e8d0; /* colore del testo  */
}

Aggiungendo questi stili a qualsiasi tabella, otteniamo il risultato come quello che viene mostrato qui sotto

 

Intervalli ammissibili, mm Intervalli ammissibili per IT, mm,
5678
fino a 3461014
Da 3 a 6581218
Da 6 a 10691522
Da 10 a 188111827
Da 18 a 309132133
Da 30 a 5011162539
Da 50 a 8013193046

Se ad una  tabella aggiungere la proprietà border-collapse con il valore collapse allora border-spacing sara ignorato  perché non ci sara piu nessun spazio tra le celle.

 

Cambiare bordi delle celle in una tabella

Per separare evidentemente il contenuto di una cella da un'altra cella, si possa aggiungere bordo  alle celle. Per crearli, si usa la proprieta border di CSS che si applica agli elementi (<td> o <th>) . Tuttavia, qui  troveremo un problema. Poiché viene creato bordo per ciascuna cella, quindi dove loro sono affiancati avremo un bordo dopio come lo spessore. Per eliminare questa inconvenienza, ci sono diversi modi. Il modo più semplice è utilizzare la proprietà border-collapse  con il valore collapse . Il suo compito è quello di rintracciare dove i bordi  si toccano e di creare in questo punto una linea singola invece del doppio bordo. E sufficiente di aggiungere questa proprietà al selettore table per rimediare questo problema (esempio 6).

Applicazione della proprietà border-collapse durante la creazione di una tabella

  <style>
   table {
    border-collapse: collapse; /* eliminiamo il bordo doppio  */
    width: 100%; /* Larghezza della tabella  */
    border-spacing: 0; /* spazio fra le celle  */
   }
    td {
    border: 2px solid #333; /* stili del bordo  */
    padding: 4px; /* spazio nelle celle */
    text-align: center; /* allineamento al centro  */
   }
  </style>
 
  <table >
   <tr><td>O</td><td>X</td><td>X</td></tr>
   <tr><td>O</td><td>O</td><td>X</td></tr>
   <tr><td>X</td><td>X</td><td>O</td></tr>
  </table>
 </body>
</html>

 

La differenza nella visualizzazione dei bordi con  o senza utilizzo della proprietà di collasso di bordi è mostrata in qui sotto.

 

OXX
OOX
XXO


OXX
OOX
XXO


Qui sopra vediamo la tabella con dei bordi interni raddoppiati.  Aggiungendo la proprietà  border-collapse: collapse; questo problema viene risolto  e lo spessore di bordi di tutte le celle diventa uguale.

I bordi e non devono essere fatte per forza su  tutti i lati delle cellule, possono separarre per esempio una riga intera dal altra o una colonna intera da altra. Per questo utilizzeremo le proprietà border-bottom, border-left  e altri simili. Non posimo aplicare queste proprieta al tag   <tr>, <thead>, <tfoot> e <tbody>, per cio posiamo usarli per selettori table e td .

<style>
   table {
    width: 100%; /* larghezza dell atabella  */
    border-collapse: collapse; /* eliminiamo line dopie  */
    border-bottom: 2px solid #333; /* aggiungimi bordi sotto  */
    border-top: 2px solid #333; /* giungiamo bordo sopra nella tabella  */
   }
   td { 
    text-align: center; /* allineamento  al cento */
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
   }
   td, th {
    padding: 5px; /* spazi nelle celle */
   }
  </style>
 
  <table>
   <thead>
    <tr>
     <th rowspan="2">tipo di congiunzione </th>
     <th colspan="2">spessore ammissibile </th>
    </tr>
    <tr>
     <th>tipo a</th><th>tipo b</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>libero</td><td>H9</td><td>D10</td>
    </tr>
    <tr>
     <td>normale</td><td>N9</td><td>I<sub>s</sub>9</td>
    </tr>
    <tr>
     <td>stretto</td><td colspan="2">P9</td>
    </tr>
   </tbody>
  </table>

tipo di congiunzione spessore ammissibile
tipo atipo b
liberoH9D10
normaleN9Is9
strettoP9

 

Allineare testo nelle celle

 

Per impostazione predefinita il testo in una  cella della tabella è allineato a sinistra e al centro per altezza della cella. Un'eccezione è l'elemento <th>, che porta la intestazione e quindi forse per quello che da default ellementi al suo interno vengono allineati al centro sia in alteza sia in largezza della cella. Per modificare il metodo di allineamento, si utilizza la proprietà text-align  come qui sotto .

 

 Allineamento del contenuto nelle celle in orizzontale.

<style>
   table {
    border-collapse: collapse; /* eliminiamo bordi dopii */
    width: 100%; /* larghezza della tabella  */
   }
   th { 
    background: #dfebb7; /* colode dello sfondo nelle celle */
    text-align: left; /* allineamento al bordo sinistro */
   }
   td {
    text-align: center; /* Allineamento al centro  */
   }
   th, td {
    border: 1px solid black; /* specifichiamo bordo  */
    padding: 4px; /* spazio intorno al testo*/
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Зtitolo 1</th><td> cella 1</td><td> cella 2</td></tr>
   <tr><th>titolo 2</th><td>cella 3</td><td> cella 4</td></tr>
  </table>
 

In questo esempio contenuto in <th> ( intestazione delle colonne ) è allineato a sinistra e contenuto in <td> è centrato. Il risultato dell'esempio è riportato qui sotto

titolo 1 cella 1 cella 2
titolo 2cella 3 cella 4

 

Allineamento in verticale  contenuto nelle celle

Allineamento del contenuto in verticale in una cella della tabella viene fatto sempre al centro, salvo diversa indicazione. Questo non è sempre gradevole, soprattutto nelle tabelle in cui il contenuto delle cellule varia in altezza. In tal caso, posiamo allineare in verticale un elemento  utilizzando la proprietà vertical-align con valore top  come mostrato qui sotto.

 

<style>
   th {
    background: #496791; /* colore di sfondo della celle con il titolo */
    color: #fff; /* colore del testo*/
   }
   td { 
    background: #f5e8d0; /* colore di sfondo di celle */
    text-align: center; /* allineamento al centro*/
   }
   td, th {
    padding: 5px 10px; /* spazi nelle celle  */
    vertical-align: top; /* allineamento in verticale al bordo superiore */
   }
  </style>
 
  <table>
   <tr>
    <th rowspan="2">tipo di congiunzione</th>
    <th colspan="2">valore ammissibile </th>
   </tr>
   <tr>
    <th>tipo2</th><th>tipo1</th>
   </tr>
   <tr>
    <td>libero</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>normale</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>stretto</td><td colspan="2">P9</td>
   </tr>
  </table>

In questo esempio, il testo viene allineato al top. Il risultato dell'esempio è mostrato qui sotto

tipo di congiunzione valore ammissibile
tipo2tipo1
liberoH9D10
normaleN9Is9
strettoP9

Letto 2183 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso