Lez.14 - Corso Intermedio Css

- Il BORDO di una TABELLA
- L'ALLINEAMENTO in una CELLA

Il Bordo di una Tabella

Una tabella, per impostazione predefinita, non rende visibile i propri bordi.

Per visualizzare i bordi di una tabella dobbiamo usare la proprietà border (confine) che accetta i valori:

- spessore del bordo,
- tipo di linea (se continua, se tratteggiata, se punteggiata o altro ancora)
- colore per il tratto.


border-spacing: 10px; spacing (spaziatura)
con border-sapacing indichiamo lo spazio che c'è fra le celle e il bordo della tabella, tale valore lo possiamo variare come vogliamo fino a portarlo a 0, in questo caso il bordo delle celle e il bordo della tabella coincidono, perciò ci saranno in contemporanea i due bordi.
Se invece, volessimo fondere i due bordi in un unico bordo, dovremmo usare la proprietà:

border-collapse: collapse; collapse (crollo) nel caso in cui volessimo fondere i due bordi in un unico bordo.

Oppure:

border-collapse: separate separate (separato) è il valore che separa i due bordi.

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Il BORDO di una TABELLA</title>
  <meta charset="utf-8">
  <style type="text/css">
	body {
		background-color: aqua;
	}
	table {
		background-color: #91CF5F;
		width: 250px;
		border: 4px black solid;
		border-spacing: 10px;
	}
	th {
		background-color: darkkhaki;
		height: 40px;
		border: 4px #14B1E1 solid;
	}
	td {
		border: 4px #14B1E1 solid;
	}
	tr {
		background-color: #AA2225;
		height: 30px;
	}
  </style>
 </head>
 <body>			    
   <h1>Tabelle e bordi</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>
   </table>
 </body>               
</html>                    

ALLINEAMENTO in una CELLA

L'Allineamento in una Cella.

Per impostazione predefinita la cella di una tabella ha il contenuto allineato a sinistra e al centro in verticale.

Per modificare l'allineamento del contenuto di una cella c'è la proprietà:

text-align: valore;

Nel caso specifico che vediamo nel codice sottostante:
text-align: left; allinea il contenuto in maniera orizzontale e a sinistra.
Mentre la proprietà:
vertical-align: bottom; allinea il contenuto nella cella in maniera verticale e sotto.

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Allineamento nelle Celle</title>
  <meta charset="utf-8">
  <style type="text/css">
      body {
	      background-color: aqua;
      }
      table {
	      background-color: yellowgreen;
	      font-size: 2m;
	      width: 200px;
	      height: 200px;
      }
      th {
	      background-color:skyblue;
	      height: 40px;
	      border: 4px red solid;
      }
		table, td {
	      border: 4px red solid;
      }
      td {
	      text-align: left;
	      vertical-align: bottom;
      }
  </style>
 </head>
 <body>			    
   <h1>Allineamento nelle Celle</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>
   </table>
 </body>               
</html>