|
Le tabelle rappresentano un componente molto importante nelle pagine HTML, nate fin dall'inizio del Web vengono utilizzate per separare i
vari contenuti nella pagina. Ogni tabella può contenere un numero diversificato di righe e colonne, ad ogni riga quindi contenuta nella tabella corrisponde un
cero numero di colonne, dunque se in una riga mettiamo quattro colonne significa che otterremmo quattro celle dove è possibile inserire qualsiasi contenuto come
testo opportunamente formattato secondo le proprie esigenze, oppure immagini o altro contenuto, addirittura è possibile inserire in una o più celle o anche
tutte altre tabelle.
Quì sotto possiamo vedere il codice necessario per inserire in una pagina Web una tabella minimale costituita di due righe e due colonne,
quindi in totale si otterranno quattro celle.
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Come possiamo vedere il Tag principale contenitore della tabella è <table></table>, seguono due Tag contenitori
<tr></tr> che rappresentano le righe della tabella che a loro volta contengono rispettivamente due Tag <td></td>, questi creano le
celle dentro il quale sarà inserito il contenuto della tabella, ma ovviamente con questo codice quando andrà in esecuzione non si vedrà niente, perchè non sono
ancora stati previsti bordi colorati della tabella o delle celle, oppure uno sfondo colorato delle celle o della tabella e inoltre non è stato inserito alcun
contenuto.
Adesso nel codice sotto vediamo la stessa tabella presentata sopra ma con un bordo della tabella e uno sfondo colorato delle quattro
celle. In blu vediamo il codice aggiunto.
<html>
<head>
<title></title>
</head>
<body>
<table cellpadding="3" cellspacing="3" style="width: 50%; border:1px black solid ">
<tr>
<td
style="background-color: aqua">cella 1</td>
<td style="background-color: yellow">cella 2</td>
</tr>
<tr>
<td
style="background-color: greenyellow">cella 3</td>
<td style="background-color: gold">cella 4</td>
</tr>
</table>
</body>
</html>
E quì sotto vediamo il risultato.
| cella 1 |
cella 2 |
| cella 3 |
cella 4 |
Ma ci sono altri Tag che fanno parte della tabella che servono a formattare la loro struttura, anche se non è necessario usarli (non sono
obbligatori), vediamo una descrizione, un codice di
esempio e il suo risultato quì sotto.
| <caption> |
Consente di dare un titolo alla tabella. |
| <thead> |
raggruppa le righe che rappresentano l’intestazione della tabella. |
| <th> |
indica una cella che contiene una intestazione. |
| <tbody> |
rappresenta tutte le righe di una tabella che contengono tutte le celle che compongono il corpo principale della tabella. |
| <tfoot> |
Piè di pagina della tabella. |
<html>
<head>
<title></title>
</head>
<body>
<table cellpadding="3" cellspacing="3" style="width: 50%; border:1px black solid ">
<caption>
<p>Tabella di esempio</p>
</caption>
<thead>
<tr>
<th>Colonna 1</th><th>Colonna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td
style="background-color: aqua">cella 1</td>
<td style="background-color: yellow">cella 2</td>
</tr>
<tr>
<td
style="background-color: greenyellow">cella 3</td>
<td style="background-color: gold">cella 4</td>
</tr>
</tbody>
<tfoot>
<tr><td>Totale 1</td><td>Totale 2</td></tr>
</tfoot>
</table>
</body>
</html>
Tabella di esempio
| Colonna 1 | Colonna 2 |
| cella 1 |
cella 2 |
| cella 3 |
cella 4 |
| Totale 1 | Totale 2 |
Ci sono poi due attributi molto interessanti che si possono usare con il Tag <td></td> che sono colspan e rowspan e servono ad
espandere rispettivamente orizzontalmente e verticalmente una cella.
Vediamo qui sotto il codice e il risultato di una tabella con due righe e due colonne
per riga che quindi dovrebbero formare quattro celle, ma la prima cella nella prima riga verrà espansa e quindi le celle risulteranno essere tre.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>tabelle</title>
</head>
<body>
<table cellpadding="5" cellspacing="5" style="width: 60%; border:thin black solid">
<tr>
<td
colspan="2" style="border:thin black
solid">cella espansa in orizzontale </td>
</tr>
<tr>
<td style="border:thin black solid">cella 2 </td>
<td style="border:thin black
solid">cella 3 </td>
</tr>
</table>
</body>
</html>
| cella espansa in orizzontale |
| cella 2 |
cella 3 |
Adesso vediamo invece il codice e il risultato di una tabella che espande la prima cella in verticale.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>tabelle</title>
</head>
<body>
<table cellpadding="5" cellspacing="5" style="width: 60%; border: thin black solid;">
<tr>
<td
rowspan="2" style="border: thin black
solid">cella espansa verticalmente</td>
<td style="border: thin black solid">cella 2</td>
</tr>
<tr>
<td style="border: thin black solid">cella
3</td>
</tr>
</table>
</body>
</html>
| cella espansa verticalmente |
cella 2 |
| cella 3 |
|
