Come creare una tabella in HTML

Come creare una tabella in HTML

Come creare una tabella in HTML

Come creare una tabella in HTML: Le tabelle sono uno strumento utile per mostrare diversi elementi in colonna, vediamo quindi come fare per inserire una tabella in HTML.

In questa guida vedremo solo l’aspetto HTML della creazione di una tabella, tralasciando tutta la personalizzazione grafica in CSS.

Il tag di base per la creazione di una tabella è table, con il quale andiamo ad indicare che stiamo creando la struttura della nostra tabella.

Le tabelle sono sempre composte da righe (tr) e colonne (td), è importante ricordare che le colonne non possono esistere senza le righe, quindi dobbiamo necessariamente creare prima una riga e poi al suo interno inserire tutte le colonne di cui abbiamo bisogno.

Partendo, quindi, da questa premessa la struttura di base di una tabella è:

<table>
   <tr>
       <td>Colonna 1</td>
       <td>Colonna 2</td>
       <td>Colonna 3</td>
   </tr>
</table>

Praticamente quindi, inseriamo il tag table per indicare che stiamo creando la nostra tabella, poi inseriamo la prima riga (tr), al suo interno inseriamo le colonne (td) di cui abbiamo bisogno (in questo caso 3), poi chiudiamo il tag della riga.

Se dovessi avere la necessità di inserire altre righe possiamo inserire un nuovo tag tr ed aggiungere quindi una nuova riga con nuove colonne al suo interno.

Dopo aver inserito tutte le righe e le colonne necessarie possiamo chiudere il tag table e completare quindi la nostra tabella.

Come creare una tabella in HTML

Quella vista sopra è la struttura di base di una tabella semplice, ma abbiamo altri elementi che possiamo inserire per rendere la nostra tabella più completa.

Il primo elemento sono le intestazioni.

Le intestazioni sono delle celle che contengono il titolo della colonna e generalmente vengono inserite come prima riga della tabella.

Le intestazioni si inseriscono come le colonne, ma invece di utilizzare il tag td si usa il tag th (table header).

Quindi una riga con un’intestazione si può inserire scrivendo:

<tr>
       <th>Nome Colonna 1</th>
       <th>Nome Colonna 2</th>
       <th>Nome Colonna 3</th>
</tr>

Definire gli elementi di una tabella

Abbiamo visto come creare una tabella, come inserire delle righe, delle colonne e le intestazioni.

Ma abbiamo anche la possibilità di definire maggiormente una tabella.

Possiamo specificare quale parte della tabella contiene un’intestazione, quale il corpo e quale il footer.

Questa definizione è utile soprattutto se vogliamo che le diverse parti si comportino in maniera differente.

Ad esempio potremmo voler mantenere intestazione e footer fissi, e scorrere solo il corpo della tabella.

Oppure ancora, in caso di stampa, potremmo voler far stampare intestazione e footer su ogni pagina (in caso di tabelle con molti dati.

Possiamo definire queste 3 parti con l’utilizzo di 3 tag:

  • thead
  • tbody
  • tfoot

thead conterrà la riga con le intestazioni (th).

tbody invece conterrà le righe con le varie colonne.

Mentre tfoot conterrà eventuali footer, che non hanno tag particolari, ma si utilizzano tr e td come per il body.

Una tabella completa quindi può essere scritta in questo modo:

<table style="width: 100%;">
		<thead>
			<tr>
				<th>Nome</th>
				<th>Cognome</th>
				<th>Età</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Mario</td>
				<td>Rossi</td>
				<td>20</td>
			</tr>
			<tr>
				<td>Luigi</td>
				<td>Bianchi</td>
				<td>30</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>Footer1</td>
				<td>Footer2</td>
				<td>Footer3</td>
			</tr>
		</tfoot>
	</table>

In questo esempio uso un tag di stile css (width:100%) per permettere alla tabella di occupare il 100% della larghezza della pagina.

Claudio Masci
Claudio Masci

Sono innanzitutto un appassionato di informatica e tecnologia in generale. Lavoro in ambito informatico da circa 16 anni, spaziando in diversi campi, andando dalla programmazione web, allo sviluppo di software, dalla grafica alla modellazione 3d ed al video editing, ho sempre voluto approfondire ogni aspetto e questo mi ha permesso di lavorare in diversi ambiti informatici.

Rispondi