-
.
Utilizzo delle tabelle
Le tabelle sono degli elementi strutturali formati da un insieme di righe e colonne, dove ogni intersezione tra esse indica una cella all'interno della quale possiamo inserire del contenuto che spesso è di tipo testuale o grafico.
La creazione delle tabelle si effettua utilizzando i seguenti tag:- <table>: rappresenta l'elemento principale per la creazione di una tabella.
- <tr>: rappresenta una riga di celle in una tabella (table row).
- <td>: rappresenta una singola cella dentro la quale viente inserito il contenuto (table data).
- <th>: rappresenta una cella di intestazione (table header).
- <thead>: rappresenta un insieme di righe che contengono delle celle da utilizzare come intestazione (column label) per l'elemento table.
- <tfoot>: rappresenta un insieme di righe che contengono delle celle da utilizzare come piede (column summary) per l'elemento table.
- <body>: rappresenta un insieme di righe che contengono le celle del contenuto principale della tabella.
- <colgroup>: rappresenta un insieme di una o più colonne ( definito attraverso il valore dell'attributo span) cui applicare una determinata formattazione, evitando di ripeterla per ogni colonna.
- <col>: rappresenta un insieme di una o più colonne ( il numero viene definito attraverso il valore dell'attributo span) di un gruppo di colonne rappresentate dall'elemento colgroup.
- <caption>: rappresenta il titolo della tabella.
La dimensione della tabella (e delle relative righe e colonne) utilizza i valori di default. Quindi la quantità di testo inserito all'interno di una cella ne causa il suo ridimensionamento, che si ripercuote a sua volta sulle altre celle relative alla sua stessa posizione ma che si trovano nelle altre righe.
La tabella, in pratica, si espande e si contrae in maniera fluida a seconda del contenuto che struttura.SPOILER (clicca per visualizzare)CODICE<!DOCTYPE html>
<html>
<head>
<title>Tabelle</title>
</head>
<body>
<table border="1">
<caption>Popolarità dei linguaggi di programmazione</caption>
<colgroup>
<col span="3" width="250px" />
<col span="2" width="300px" />
</colgroup>
<thead>
<tr>
<th>Posizione novembre 2011</th>
<th>Posizione novembre 2010</th>
<th>Linguaggi</th>
<th>Rating novembre 2011</th>
<th>Delta novembre 2010</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Totale percentuale</td>
<td> </td>
<td> </td>
<td>75.979%</td>
<td> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td><td>1</td><td>Java</td><td>17.874%</td><td>-0.63%</td>
</tr>
<tr>
<td>2</td><td>2</td><td>C</td><td>17.322%</td><td>+0.61%</td>
</tr>
<tr>
<td>3</td><td>3</td><td>C++</td><td>8.084%</td><td>-1.41%</td>
</tr>
<tr>
<td>4</td><td>5</td><td>C#</td><td>7.319%</td><td>+1.61%</td>
</tr>
<tr>
<td>5</td><td>4</td><td>PHP</td><td>6.096%</td><td>-1.72%</td>
</tr>
<tr>
<td>6</td><td>8</td><td>Objective C</td><td>5.983%</td><td>+2.79%</td>
</tr>
<tr>
<td>7</td><td>7</td><td>Visual Basic</td><td>5.041%</td><td>-0.43%</td>
</tr>
<tr>
<td>8</td><td>6</td><td>Python</td><td>3.617%</td><td>-2.06%</td>
</tr>
<tr>
<td>9</td><td>10</td><td>JavaScript</td><td>2.565%</td><td>+0.90%</td>
</tr>
<tr>
<td>10</td><td>9</td><td>Perl</td><td>2.078%</td><td>-0.39%</td>
</tr>
</tbody>
</table>
</body>
</html>
EsempioNotiamo quindi l'utilizzo del tag <table> sul quale impostiamo l'attributo border con il valore di 1 al fine di far apparire attorno alle celle un bordo.
Nel tag <table> definiamo poi i tag per l'intestazione, per il sommario e per il corpo della tabella che conterranno le relative righe e celle.
Gli attributi colspan e rowspanI tag <td> e <th> possono avvalersi degli attributi colspan e rowspan per indicare, rispettivamente, per quante colonne o su quante righe una cella si deve espandere al fine di creare delle strutture tabellari di maggiore complessità.
Nell'esempio qui sotto troviamo nella prima tabella l'estensione per colonne mentre nella seconda troviamo l'estensione per righe.SPOILER (clicca per visualizzare)CODICE<table border="1">
<tr>
<th colspan="3">Linguaggi web</th>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>JavaScript</td>
</tr>
</table>
<table border="1">
<tr>
<th rowspan="3">Linguaggi web</th>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
</tr>
</table>
EsempioGuida a cura di ©True Story
.
Utilizzo delle tabelleGuida HTML 4 |
Like
