HTML - Tabelle
Le tabelle HTML consentono agli autori web di organizzare dati come testo, immagini, collegamenti, altre tabelle, ecc. In righe e colonne di celle.
Le tabelle HTML vengono create utilizzando il <table> tag in cui il <tr> tag viene utilizzato per creare righe di tabella e <td>tag viene utilizzato per creare celle di dati. Gli elementi sotto <td> sono regolari e allineati a sinistra per impostazione predefinita
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Qui, il borderè un attributo del tag <table> e viene utilizzato per mettere un bordo su tutte le celle. Se non hai bisogno di un bordo, puoi usare border = "0".
Intestazione tabella
L'intestazione della tabella può essere definita utilizzando <th>etichetta. Questo tag verrà inserito per sostituire il tag <td>, che viene utilizzato per rappresentare la cella di dati effettiva. Normalmente inserirai la riga superiore come intestazione della tabella come mostrato di seguito, altrimenti puoi utilizzare l'elemento <th> in qualsiasi riga. Le intestazioni, definite nel tag <th>, sono centrate e in grassetto per impostazione predefinita.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Attributi di cellpadding e cellspacing
Ci sono due attributi chiamati cellpadding e cellspacing che userete per regolare lo spazio bianco nelle celle della tabella. L'attributo cellspacing definisce lo spazio tra le celle della tabella, mentre il cellpadding rappresenta la distanza tra i bordi delle celle e il contenuto all'interno di una cella.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Attributi Colspan e Rowspan
Userai colspanattributo se vuoi unire due o più colonne in una singola colonna. In modo simile utilizzerairowspan se vuoi unire due o più righe.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Sfondi di tabelle
Puoi impostare lo sfondo della tabella utilizzando uno dei seguenti due modi:
bgcolor attributo: puoi impostare il colore di sfondo per l'intera tabella o solo per una cella.
background attributo: puoi impostare l'immagine di sfondo per l'intera tabella o solo per una cella.
Puoi anche impostare il colore del bordo usando bordercolor attributo.
Note- Gli attributi bgcolor , background e bordercolor sono obsoleti in HTML5. Non utilizzare questi attributi.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Ecco un esempio di utilizzo di backgroundattributo. Qui useremo un'immagine disponibile nella directory / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato. L'immagine di sfondo qui non si applicava all'intestazione della tabella.
Altezza e larghezza del tavolo
È possibile impostare una larghezza e un'altezza della tabella utilizzando width e heightattributi. È possibile specificare la larghezza o l'altezza della tabella in termini di pixel o in termini di percentuale dell'area disponibile dello schermo.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Didascalia
Il captionil tag servirà come titolo o spiegazione per la tabella e verrà visualizzato nella parte superiore della tabella. Questo tag è obsoleto nella versione più recente di HTML / XHTML.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Intestazione, corpo e piè di pagina della tabella
Le tabelle possono essere divise in tre parti: un'intestazione, un corpo e un piede. La testa e il piede sono piuttosto simili alle intestazioni e ai piè di pagina in un documento elaborato di testo che rimangono gli stessi per ogni pagina, mentre il corpo è il principale titolare del contenuto della tabella.
I tre elementi per separare la testa, il corpo e i piedi di un tavolo sono:
<thead> - per creare un'intestazione di tabella separata.
<tbody> - per indicare il corpo principale della tabella.
<tfoot> - per creare un piè di pagina separato per la tabella.
Una tabella può contenere diversi elementi <tbody> per indicare diverse pagine o gruppi di dati. Ma è da notare che i tag <thead> e <tfoot> dovrebbero apparire prima di <tbody>
Esempio
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Questo produrrà il seguente risultato:
Tabelle annidate
Puoi usare una tabella all'interno di un'altra tabella. Non solo le tabelle puoi usare quasi tutti i tag all'interno del tag di dati della tabella <td>.
Esempio
Di seguito è riportato l'esempio dell'utilizzo di un'altra tabella e altri tag all'interno di una cella di tabella.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Questo produrrà il seguente risultato: