Lez.12 - Corso Intermedio Css

TABELLE
Le Tabelle in un foglio di stile Css

Le Tabelle

Una tabella è un contenitore strutturato con una griglia.
All'interno di questo contenitore ci sono delle caselle chiamte celle. Le celle di una tabelle vengono disctribuite secondo righe e colonne.

Il tag per formare una tabella è <table> </table> e va aperto e chiuso.

Subito dopo aver aperto il tag table, solo se ne avete bisogno, per avere una tabella completa formiamo anche una intestazione di riga che contiene un titolo:
<th> </th> (table heading) intestazione della tabella

Per fare una riga:
<tr> </tr> (table row) row riga, una tabella contiene una o più righe.

Per fare una cella:
<td> </td> (table data ) dati da rappresentare in una casella o cella.
In una riga ci possono essere una o più celle ogni cella rappresenta una colonna.
In una tabella per avere la colorazione su delle righe alternate con il css3 ci viene in aiuto il Selettore di:
Numerazione dei Nodi Figli | tr:nth-child()
il suo significato è: che tutte le righe, nth, (cioè tutte le righe che contengono un figlio ennesimo), a tutte queste righe si può dare un colore di sfondo univoco e a queste righe si può dare un valore even (pari), oppure odd (dispar), da inserire nelle parentesi tonde, oppure con un numero intero specificare la singola riga, sempre da inserire nelle parentesi tode.
In definitiva si può colorare in maniera alternata le righe di una tabella e la sintassi è:

tr:nth-child(odd -oppure- even) td {background-color: white;}

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Le Tabelle	</title>
  <meta charset="utf-8">
  <style type="text/css">
	body {
		background-color: cyan;
	}
	table {
		background-color: #91CF5F;
	}
	th {
		background-color: darkkhaki;
	}
	td {
			
		background-color: greenyellow;
	}
	tr:nth-child(odd) td {	
		background-color: white;
	}
  </style>
 </head>
 <body>			    
	<h1>Tabelle e color</h1>
	<table>
	    <tr>
		    <th>Mese</th><th>Vendite</th>
	    </tr>
	    <tr>
		    <td>Gennaio</td><td>10</td>
	    </tr>
	    <tr>
		    <td>Febbraio</td><td>20</td>
	    </tr>
	    <tr>
		    <td>Marzo</td><td>30</td>
	    </tr>
	    <tr>
		    <td>Aprile</td><td>10</td>
	    </tr>
	    <tr>
		    <td>Maggio</td><td>20</td>
	    </tr>
	    <tr>
		    <td>Giugno</td><td>30</td>
	    </tr>
	</table>
 </body>               
</html>