Menu
Coddy logo textTech

Nozioni di base sulle tabelle

Fa parte della sezione Fondamenti del percorso HTML di Coddy. Lezione 48 di 60.

In HTML, una tabella è un modo per organizzare i dati in righe e colonne. Le tabelle vengono comunemente usate per visualizzare i dati in un formato strutturato, ad esempio orari, statistiche o qualsiasi altro tipo di informazione che può essere presentata in una griglia. Per creare una tabella, usa il tag <table> insieme ad altri tag, come <tr> per le righe della tabella, <td> per i dati della tabella (celle) e <th> per le intestazioni della tabella.

Ecco la struttura di base di una tabella HTML:

<table>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
	</tr>
	<tr>
		<td>Row 1, Cell 1</td>
		<td>Row 1, Cell 2</td>
	</tr>
	<tr>
		<td>Row 2, Cell 1</td>
		<td>Row 2, Cell 2</td>
	</tr>
</table>
  • <table>: Il tag che definisce la tabella.
  • <tr>: Il tag che definisce una riga della tabella.
  • <th>: Il tag che definisce una cella di intestazione. Le celle di intestazione sono generalmente utilizzate per i titoli delle colonne o delle righe e vengono visualizzate in grassetto per impostazione predefinita.
  • <td>: Il tag che definisce una cella standard nella tabella.

Ecco come verrebbe visualizzata questa tabella in un browser:

Intestazione 1Intestazione 2
Riga 1, cella 1Riga 1, cella 2
Riga 2, cella 1Riga 2, cella 2

In questo esempio, abbiamo una tabella con due righe e due colonne. La prima riga contiene celle di intestazione e le righe successive contengono celle di dati normali. Questa struttura crea una semplice griglia, facile da leggere e comprendere.

challenge icon

Sfida

Facile

Crea un documento HTML che includa una tabella con la seguente struttura:

  1. Un tag <table> per definire la tabella.
  2. Una riga della tabella (<tr>) per l'intestazione con due celle di intestazione (<th>). La prima cella di intestazione dovrebbe contenere "Name" e la seconda "Age".
  3. Una riga della tabella (<tr>) con due celle di dati (<td>). La prima cella dovrebbe contenere "John" e la seconda "30".
  4. Un'altra riga della tabella (<tr>) con due celle di dati (<td>). La prima cella dovrebbe contenere "Jane" e la seconda "25".

Provalo tu

<!DOCTYPE html>
<html>
    <body>
        <!-- Scrivi il codice qui -->
    </body>
</html>
quiz iconMettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Fondamenti

Esercitati da solo: Playground Web