In questo articolo, ti mostrerò come creare una tabella in HTML, attraverso la quale conoscerai le proprietà della tabella come: colspan , rowspan , cellpadding e cellspacing .

La tabella HTML viene utilizzata per visualizzare i dati in forma tabellare. Ogni tabella sarà divisa in due componenti, che sono colonne e righe . Sono costituiti dai tag table , tr , td , tbody , thead , tfoot .

Nelle applicazioni Web, le tabelle vengono utilizzate raramente, spesso vengono utilizzate solo le applicazioni di gestione dei dati. Il motivo potrebbe essere che la struttura della tabella sembra molto pesante, è difficile combinare con CSS per creare modelli di interfaccia complessi. Tuttavia, con la visualizzazione dei dati della tabella, la tabella è ancora la priorità numero 1.

Qual è il tag della tabella in HTML?

Il tag tabella in HTML è un tag speciale, utilizzato per visualizzare i dati tabulari nel browser. Ogni tabella avrà un numero definito di righe e colonne. Puoi anche unire due celle adiacenti in una cella proprio come in Word. Guarda l'immagine qui sotto per saperne di più su questa carta.

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td>Hàng 1 cột 1</td> <td>Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

in cui :

• La proprietà border="1" serve a dichiarare il bordo della tabella
• L' cellspacing="0" dichiara la distanza tra i bordi superiore e inferiore del bordo
• L' cellpadding="5" dichiara la distanza tra il contenuto nella cella e il bordo
• Se vuoi aggiungere una colonna, aggiungi semplicemente un td
• Se vuoi aggiungere una riga, aggiungi un'altra tr

Si prega di modificare manualmente il numero di tag tr e td da osservare, questo ti aiuterà a capire meglio la tabella.

Colspan in HTML

Colspan html è un attributo del tag della tabella, viene utilizzato per unire le celle insieme sulla stessa riga. Ad esempio, se vuoi unire 2 celle insieme, dichiara il valore come 2, unisci 3 celle, dichiara 3.

Quando si dichiara colspan , il numero di tag td della riga corrente verrà ridotto rispetto alle altre righe.

Come nell'esempio seguente, il primo tag tr ha solo due tag td e il secondo tag tr ha fino a 3 tag td . Il motivo è che nel primo tag tr c'è un tag td con colspan = 2 .

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td colspan="2">Hàng 1 cột 1 và Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Intervallo di righe in HTML

Simile a colspan, rowspan viene utilizzato per unire due celle insieme. Tuttavia, verrà aggregato per colonna, non per riga. Quante celle vuoi unire, inserisci il numero per esso.

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td rowspan="2">Hàng 1 cột 1</td> <td>Hàng 1 cột 3</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Gruppo di tag thead – tbody – tfoot

Nell'articolo per sapere cos'è l'HTML, ho fornito una breve introduzione al layout del sito Web, inclusi componenti come header , content , footer , la tabella è simile. Le persone divideranno la tabella in tre componenti principali, rispettivamente header , body e footer con tag thead , tbody e tfoot .

 <table border="1" cellspacing="0" cellpadding="5"> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tbody> <tr> <td> mitrun </td> <td> mitrun1001@gmail.com </td> </tr> <tr> <td> web888 </td> <td> web888.vn@gmail.com </td> </tr> </tbody> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

Eseguilo, il risultato è che l'interfaccia è sempre la stessa del solito. Tuttavia, se ora cambiamo la posizione del gruppo tbody e thead vediamo cosa succede.

Esempio : cambia la posizione dei tag thead, tbody e tfoot

 <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <td> TheHalfheart </td> <td> TheHalfHeart@gmail.com </td> </tr> <tr> <td> Freetuts </td> <td> Freetuts.net@gmail.com </td> </tr> </tbody> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

L'esecuzione dell'interfaccia è ancora normale. Secondo le regole di compilazione, il tbody dovrebbe essere in alto perché è in alto, ma è proprio nel mezzo. Ciò significa che se utilizziamo questi gruppi, indipendentemente da dove sono posizionati, il display seguirà comunque la regola "ad – tbody – tfoot" .

Gli attributi delle tabelle HTML più comunemente usati

Qui, vorrei riassumere i 4 attributi del tag tabella in HTML, salvarli per un uso successivo.

• bordo : utilizzato per dichiarare la dimensione del bordo della tabella.
• spaziatura celle : dichiara la larghezza del bordo.
• cellpadding : dichiara la distanza tra il bordo e i dati nella cella.
• width : dichiara la larghezza delle colonne ( nel tag tr ).

Domande frequenti sulle tabelle HTML

Come creare una tabella senza bordo in HTML?

Per creare una tabella senza bordi, imposteremo la proprietà border="0" .

 <table border="0"> </table>

Come creare spazio tra le lettere e il bordo delle celle nella tabella

Usiamo la proprietà cellpadding per creare spazio tra i dati e il bordo della tabella. Le unità di input sono in pixel.

 1 2 3 <table celpadding="10"> </table>

Come impostare la lunghezza delle colonne nella tabella

Impostiamo la proprietà width nei tag tr per impostare la lunghezza delle colonne.

 <table celpadding="10"> <tr width="20%"> </tr> <tr width="80%"> </tr> </table>

Quindi in questo articolo ho introdotto i tag HTML relativi alla tabella. La prima cosa da notare in questo articolo è come combinare più celle con due tag colspan e rowspan . Il secondo è capire i gruppi di tag thead , tbody e tfoot per assemblare la posizione corretta per esso. Questo articolo mi fermerò qui, grazie per aver seguito questa serie.