HTML - Tabellen

Mit den HTML-Tabellen können Webautoren Daten wie Text, Bilder, Links, andere Tabellen usw. in Zeilen und Spalten von Zellen anordnen.

Die HTML-Tabellen werden mit dem erstellt <table> Tag, in dem die <tr> Tag wird verwendet, um Tabellenzeilen und zu erstellen <td>Tag wird zum Erstellen von Datenzellen verwendet. Die Elemente unter <td> sind regulär und standardmäßig linksbündig ausgerichtet

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

Hier das borderist ein Attribut des <table> -Tags und wird verwendet, um alle Zellen mit einem Rahmen zu versehen. Wenn Sie keinen Rahmen benötigen, können Sie border = "0" verwenden.

Tabellenüberschrift

Die Tabellenüberschrift kann mit definiert werden <th>Etikett. Dieses Tag ersetzt das <td> -Tag, das zur Darstellung der tatsächlichen Datenzelle verwendet wird. Normalerweise setzen Sie Ihre oberste Zeile wie unten gezeigt als Tabellenüberschrift ein, andernfalls können Sie das <th> -Element in jeder Zeile verwenden. Überschriften, die im <th> -Tag definiert sind, sind standardmäßig zentriert und fett gedruckt.

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

Cellpadding- und Cellspacing-Attribute

Es gibt zwei Attribute, Cellpadding und Cellspacing, mit denen Sie den Leerraum in Ihren Tabellenzellen anpassen. Das Zellenabstandsattribut definiert den Abstand zwischen Tabellenzellen, während das Auffüllen von Zellen den Abstand zwischen den Zellenrändern und dem Inhalt innerhalb einer Zelle darstellt.

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

Colspan- und Rowspan-Attribute

Du wirst benutzen colspanAttribut, wenn Sie zwei oder mehr Spalten zu einer einzigen Spalte zusammenführen möchten. Ähnliche Art und Weise werden Sie verwendenrowspan Wenn Sie zwei oder mehr Zeilen zusammenführen möchten.

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

Tabellen Hintergründe

Sie können den Tabellenhintergrund auf eine der folgenden zwei Arten festlegen:

bgcolor Attribut - Sie können die Hintergrundfarbe für die gesamte Tabelle oder nur für eine Zelle festlegen.
background Attribut - Sie können das Hintergrundbild für die gesamte Tabelle oder nur für eine Zelle festlegen.

Sie können die Rahmenfarbe auch mit festlegen bordercolor Attribut.

Note- Die Attribute bgcolor , background und bordercolor sind in HTML5 veraltet. Verwenden Sie diese Attribute nicht.

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

Hier ist ein Beispiel für die Verwendung backgroundAttribut. Hier verwenden wir ein Bild, das im Verzeichnis / images verfügbar ist.

<!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>

Dies führt zu folgendem Ergebnis. Hier galt das Hintergrundbild nicht für den Header der Tabelle.

Tischhöhe und -breite

Sie können eine Tabellenbreite und -höhe mit festlegen width und heightAttribute. Sie können die Tabellenbreite oder -höhe in Pixel oder in Prozent der verfügbaren Bildschirmfläche angeben.

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

Tabellenüberschrift

Das captionDas Tag dient als Titel oder Erklärung für die Tabelle und wird oben in der Tabelle angezeigt. Dieses Tag ist in einer neueren Version von HTML / XHTML veraltet.

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

Tabellenkopf, Körper und Fußzeile

Tabellen können in drei Teile unterteilt werden - eine Kopfzeile, einen Körper und einen Fuß. Kopf und Fuß ähneln Kopf- und Fußzeilen in einem Textdokument, die für jede Seite gleich bleiben, während der Hauptteil der Hauptinhalt der Tabelle ist.

Die drei Elemente zum Trennen von Kopf, Körper und Fuß eines Tisches sind:

<thead> - um einen separaten Tabellenkopf zu erstellen.
<tbody> - um den Hauptteil der Tabelle anzugeben.
<tfoot> - um eine separate Tabellenfußzeile zu erstellen.

Eine Tabelle kann mehrere <tbody> -Elemente enthalten, um verschiedene Seiten oder Datengruppen anzuzeigen . Es ist jedoch bemerkenswert, dass die Tags <thead> und <tfoot> vor <tbody> erscheinen sollten

Beispiel

<!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>

Dies führt zu folgendem Ergebnis:

Verschachtelte Tabellen

Sie können eine Tabelle in einer anderen Tabelle verwenden. Nicht nur Tabellen, Sie können fast alle Tags im Tabellendaten-Tag <td> verwenden.

Beispiel

Das folgende Beispiel zeigt die Verwendung einer anderen Tabelle und anderer Tags in einer Tabellenzelle.

<!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>

Dies führt zu folgendem Ergebnis: