Etichetta della tabella HTML viene utilizzato per visualizzare i dati in forma tabellare (riga * colonna). Possono esserci molte colonne di seguito.

Possiamo creare una tabella per visualizzare i dati in forma tabellare, utilizzando

In Ogni tabella, la riga della tabella è definita datag, l'intestazione della tabella è definita dae i dati della tabella sono definiti datag.

Le tabelle HTML vengono utilizzate per gestire il layout della pagina, ad es. sezione di intestazione, barra di navigazione, contenuto del corpo, sezione piè di pagina ecc. Ma si consiglia di utilizzare il tag div sulla tabella per gestire il layout della pagina.

Tag della tabella HTML

Esempio di tabella HTML

Vediamo l'esempio del tag della tabella HTML. L'output è mostrato sopra.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Produzione:

tutorial di javascript

Nella tabella HTML sopra ci sono 5 righe e 3 colonne = 5 * 3 = 15 valori.

Tabella HTML con bordo

Esistono due modi per specificare il bordo per le tabelle HTML.

1. Per attributo border della tabella in HTML
2. Per proprietà di confine nei CSS

1) Attributo Bordo HTML

È possibile utilizzare l'attributo border del tag table in HTML per specificare il bordo. Ma non è consigliabile ora.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Produzione:

2) Proprietà confine CSS

Ora si consiglia di utilizzare la proprietà border dei CSS per specificare il bordo nella tabella.

 table, th, td { border: 1px solid black; } 

Puoi comprimere tutti i bordi in un bordo tramite la proprietà di collasso dei bordi. Farà crollare il confine in uno solo.

pseudocodice java

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

Produzione:

Tabella HTML con riempimento delle celle

Puoi specificare il riempimento per l'intestazione e i dati della tabella in due modi:

1. Tramite l'attributo cellpadding della tabella in HTML
2. Riempiendo la proprietà nei CSS

L'attributo cellpadding del tag della tabella HTML è ora obsoleto. Si consiglia di utilizzare i CSS. Vediamo quindi il codice dei CSS.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

Produzione:

Larghezza della tabella HTML:

Possiamo specificare la larghezza della tabella HTML utilizzando il file Larghezza CSS proprietà. Può essere specificato in pixel o percentuale.

Possiamo regolare la larghezza del nostro tavolo secondo le nostre esigenze. Di seguito è riportato l'esempio per visualizzare la tabella con larghezza.

 table{ width: 100%; } 

Esempio:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

Produzione:

Tabella HTML con colspan

Se vuoi che una cella si estenda su più di una colonna, puoi utilizzare l'attributo colspan.

Dividerà una cella/riga in più colonne e il numero di colonne dipenderà dal valore dell'attributo colspan.

Vediamo l'esempio che si estende su due colonne.

Codice CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

Codice HTML:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

Produzione:

Tabella HTML con estensione di righe

Se vuoi che una cella si estenda su più di una riga, puoi utilizzare l'attributo rowspan.

csma e cd csma

Dividerà una cella in più righe. Il numero di righe divise dipenderà dai valori di rowspan.

Vediamo l'esempio che si estende su due righe.

Codice CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

Codice HTML:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

Produzione:

Tabella HTML con didascalia

La didascalia HTML viene visualizzata sopra la tabella. Deve essere utilizzato solo dopo il tag della tabella.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

Styling delle celle pari e dispari della tabella HTML

Codice CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

Produzione:

NOTA: puoi anche creare vari tipi di tabelle utilizzando diverse proprietà CSS nella tabella.

Browser di supporto

Elemento	Cromo	CIOÈ	Firefox	musica lirica	Safari
	SÌ	SÌ	SÌ	SÌ	SÌ