TABELLE HTML

In html si definisce una tabella attraverso l’utilizzo dei seguenti tag:


  • <table> :  definisce che si tratta di una tabella
  • <th> : definisce l’ intestazione della tabella (di default le intestazioni sono centrate ed in grossetto)
  • <tr> : definisce ogni riga della tabella
  • <td> : definisce una cella della tabella

Per capire il funzionamento delle tabelle , partiamo subito con un esempio pratico :

<!doctype html>
<html lang=”it”>
<body>
<table>
 <tr>
 <th>NOME</th>
 <th>INDIRIZZO</th>
 <th>NUMERO DI TELEFONO</th>
 </tr>
 <tr>
 <td>GIUSI </td>
 <td>VIA LE MANI DALLE MIE COSE</td>
 <td> 7</td>
 </tr>
 </table>
</body>
</html>

Come potete vedere , mancano i bordi e sicuramente lo stile della tabella potrebbe essere migliore, come ormai saprete tutto ciò che riguarda lo styling è stato affidato ad i fogli di stile, in ogni caso , vediamo come stilizzare un po la nostra tabella attraverso l’ attributo style di Css.

Bordi tabella

Se non specificato , come anticipato precedentemente , la tabella sarà priva di bordi , per inserirne uno ci occorrerà definirlo all’ interno del tag <head> del nostro documento.

La sintassi per inserire un bordo alla nostra tabella è la seguente :

<style>
table, th, td {
 border: valori;
}
</style>

VEDIAMO SUBITO UN ESEMPIO PRATICO

<!doctype html>
<html lang=”it”>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>NOME</th>
<th>INDIRIZZO</th> 
<th>NUMERO DI TELEFONO</th>
</tr>
<tr>
<td>GIUSI </td>
<td>VIA LE MANI DALLE MIE COSE</td> 
<td> 7</td>
</tr>
</table>
</body>
</html>

Come avrete notato di default la tabella e le celle , possiedono ciasuna un proprio bordo, per unificarli in un bordo unico , è sufficiente aggiungere al nostro codice la proprietà border collapse.




Border collapse

Border Collapse , serve ad unificare il bordo della tabella con quello delle singole celle , vediamo subito un esempio , modificando il codice contenuto in head come segue.

<style>
table, th, td {
 border: 2px solid black;
 border-collapse: collapse;
}
</style>

border collapse può assumere i seguenti valori :

  • collapse
  • separate ( valore di default )

Padding

Padding è la proprietà CSS che consente di impostare una distanza tra la cella ed il suo contenuto.

Aggiungendo il seguente codice all’ interno del tag <head> aggiungeremo un padding alla nostra pagina.

<style>
table, th, td {
 border: 2px solid black;
 border-collapse: collapse;
}
th, td {
 padding:50px ;
}
</style>

Il padding può essere impostato singolarmente per ogni lato della nostra cella attraverso i seguenti elementi:




  • padding top (superiore)
  • padding-right (destra)
  • padding-bottom (inferiore)
  • padding-left (sinistra)

Modificando come segue il codice della pagina html avremo :

<head>
<style>
table, th, td {
 border: 2px solid black;
 border-collapse: collapse;
}
th, td {
 padding-top: 50px;
 padding-right: 30px;
 padding-bottom: 50px;
 padding-left: 80px;
 
}
</style>
</head>


Continua a leggere


Lascia un commento