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 utilizzate 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, si 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 d’intestazione. Le celle d’intestazione vengono solitamente usate per i titoli delle colonne o delle righe e sono visualizzate in grassetto per impostazione predefinita.
<td>: Il tag che definisce una cella standard della tabella.
Ecco come verrebbe visualizzata questa tabella in un browser:
| Intestazione 1 | Intestazione 2 |
|---|---|
| Riga 1, Cella 1 | Riga 1, Cella 2 |
| Riga 2, Cella 1 | Riga 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 un semplice layout a griglia, facile da leggere e da comprendere.
Sfida
FacileCrea un documento HTML che includa una tabella con la seguente struttura:
- Un tag
<table>per definire la tabella. - Una riga della tabella (
<tr>) per l'intestazione con due celle di intestazione (<th>). La prima cella di intestazione deve contenereNamee la seconda deve contenereAge. - Una riga della tabella (
<tr>) con due celle di dati (<td>). La prima cella deve contenereJohne la seconda30. - Un'altra riga della tabella (
<tr>) con due celle di dati (<td>). La prima cella deve contenereJanee la seconda25.
Provalo tu
<!DOCTYPE html>
<html>
<body>
<!-- Scrivi il codice qui -->
</body>
</html>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Fondamenti di HTML
Che cos’è HTML?Struttura di base di un documento HTMLTag ed elementiAnnidamento e tag di chiusuraCommenti in HTML7Pagina del profilo personale
Panoramica del progettoSezione intestazione
Immagine del profiloSezione Chi sonoLink ai social2Testo e formattazione
IntestazioniParagrafiInterruzioni di rigaTesto in grassetto e corsivoAncora grassetto e corsivoRiepilogo - formattazione5Aggiungere contenuti
Attributi HTMLCollegamentiCollegamenti a nuove pagineImmaginiAttributi delle immagini8Moduli e campi di input - Parte 1
Nozioni di base sui moduliCampi di testoAttributi degli inputCampo passwordEtichette per gli inputRiepilogo - modulo di base11Pagina di registrazione all'evento
Panoramica del progettoSezione intestazioneSezione dettagli dell'eventoModulo di registrazioneSezione piè di paginaEsercitati da solo: Playground Web