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: