Tag tabella HTML - Scopri gli esempi di tag di tabella HTML con sintassi

• Introduzione ai tag della tabella HTML

Introduzione ai tag della tabella HTML

La tabella HTML fornisce un modo per derivare o definire dati come testo, immagini, collegamenti ecc. In termini di righe e colonne di celle. Le tabelle HTML possono essere create utilizzando

etichetta. Per impostazione predefinita, i dati della tabella sono allineati a sinistra. In questo argomento, impareremo i tag di tabella HTML.

La tabella può essere creata utilizzando

tag.

• Il

tag specifica le righe della tabella utilizzate per creare una riga.

I dati della tabella possono essere strutturati all'interno

,	, e
tag definisce un'intestazione per la tabella. Il	tag specifica le celle di dati della tabella utilizzate per creare la colonna. Il

contenuto della tabella con numerosi elementi da tavolo.

Sintassi

Intestazione tabella 1	Titolo della tabella 2
Cella dati 1	Cella dati 2
Cella dati 3	Cella dati 4

Esempi di tag di tabella HTML

Ecco gli esempi di tag di tabella HTML forniti di seguito

1. Utilizzo di base della tabella



HTML Table Tag Usage



Nome	Nazione
Dhoni	India
David Miller	Sud Africa
Joe Root	Inghilterra

Salvare il codice con estensione .html e aprirlo nel browser. Verrà visualizzato il seguente output:

2. Didascalia della tabella

La didascalia per la tabella può essere specificata usando il tag < didascalia > .

Esempio



HTML Table Tag Usage



Questa è la didascalia della tabella

Nome	Nazione
Dhoni	India
David Miller	Sud Africa
Joe Root	Inghilterra

Il codice sopra mostrerà l'output seguente:

3. Spaziatura delle celle della tabella

Lo spazio delle celle della tabella può essere definito utilizzando l'attributo cellpacing. L'attributo cellpacing specifica lo spazio tra le celle della tabella.

Esempio



HTML Table Tag Usage



Nome	Nazione
Dhoni	India
David Miller	Sud Africa
Joe Root	Inghilterra

Il codice sopra mostrerà il seguente output:

4. Imbottitura delle celle della tabella

Il riempimento delle celle della tabella può essere definito utilizzando l'attributo cellpadding. La distanza dell'attributo cellpadding tra il bordo della cella della tabella e i dati.

Esempio



HTML Table Tag Usage



Nome	Nazione
Dhoni	India
David Miller	Sud Africa
Joe Root	Inghilterra

Il codice sopra mostrerà l'output seguente:

5. Attributi di intervallo di colonne e righe

Le due o più righe della tabella possono essere unite in una singola riga utilizzando l'attributo rowpan e le colonne della tabella possono essere unite in una singola colonna utilizzando un attributo colspan.

Esempio



HTML Table Tag Usage



Colonna Uno	Colonna due	Colonna tre
Fila Uno	Fila due	Fila tre
	Riga quattro	Riga cinque
Fila Sei

Il codice visualizzerà il seguente output:

6. Sfondo per la tabella

Lo sfondo della tabella può essere creato usando l'attributo bgcolor. Il bordo della cella della tabella può essere specificato utilizzando l'attributo border-color.

Esempio



HTML Table Tag Usage



Nome	Nazione
Dhoni	India
David Miller	Sud Africa
Joe Root	Inghilterra

Eseguire il codice sopra e verrà visualizzato l'output seguente:

7. Altezza e larghezza della tabella

L'altezza e la larghezza della tabella possono essere impostate utilizzando gli attributi di larghezza e altezza.

Esempio



HTML Table Tag Usage



Nome	Nazione
Dhoni	India
David Miller	Sud Africa
Joe Root	Inghilterra

Il codice sopra mostrerà il seguente output:

8. Styling delle celle della tabella

Esempio



HTML Table Tag Usage

table, th, td (
border: 1px solid red;
border-collapse: collapse;
)
th, td (
padding: 15px;
)
table#mytable tr:nth-child(even) (
background-color: #FAD7A0;
)
table#mytable tr:nth-child(odd) (
background-color: #E67E22;
)
table#mytable th (
color: white;
background-color: teal;
)



Nome	Nazione
Dhoni	India
David Miller	Sud Africa
Joe Root	Inghilterra

Esegui il codice sopra, avrai il seguente output:

8. Tabelle nidificate

È possibile utilizzare una tabella all'interno di un'altra tabella denominata tabella nidificata.

Consideriamo l'esempio seguente per la tabella nidificata:

Esempio



HTML Table Tag Usage



Nome Nazione Dhoni India David Miller Sud Africa Joe Root Inghilterra

Il codice sopra mostrerà il seguente output:

Attributi di The Table

• allinea: questo attributo fornisce l'allineamento del contenuto all'interno di un elemento.
• bgcolor: questo attributo specifica il colore di sfondo per la tabella.
• bordo: questo attributo specifica il bordo per le celle della tabella.
• cellpadding: questo attributo visualizza il riempimento tra celle della tabella e contenuto della tabella.
• spaziatura cellulare: questo attributo visualizza lo spazio tra le celle della tabella.
• frame: specifica quali parti dei bordi esterni sono visibili.
• regole: specifica quali parti dei bordi interni sono visibili.
• ordinabile: questo attributo informa che la tabella è ordinabile.
• riepilogo: fornisce il tipo di contenuto della tabella presente.
• larghezza: questo attributo indica la larghezza della tabella.
• altezza: questo attributo specifica l'altezza della tabella.

Conclusione

Finora abbiamo studiato i diversi tipi di tag di tabella in HTML. Gli esempi hanno mostrato l'uso dello stile della tabella, l'annidamento di una tabella all'interno di un'altra tabella, l'impostazione dell'altezza e della larghezza della tabella, l'aggiunta di spaziatura e riempimento per le celle della tabella, l'applicazione del colore di sfondo per la tabella e molti altri.

Articoli consigliati

Questa è una guida ai tag delle tabelle HTML. Qui discutiamo gli esempi di tag di tabella HTML con sintassi e attributi della tabella. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più -

1. Elementi del modulo HTML
2. Crea tabelle in HTML
3. Tag immagine HTML
4. Che cos'è l'HTML
5. Frame HTML
6. Blocchi HTML
7. Imposta un colore di sfondo in HTML con Esempio