HTML-Tabellen-Tag wird verwendet, um Daten in tabellarischer Form (Zeile * Spalte) anzuzeigen. Es können viele Spalten in einer Zeile vorhanden sein.

Mit können wir eine Tabelle erstellen, um Daten in tabellarischer Form anzuzeigen

In jeder Tabelle wird eine Tabellenzeile definiert durchTag, Tabellenkopf wird definiert durch, und Tabellendaten werden definiert durchStichworte.

HTML-Tabellen werden verwendet, um das Layout der Seite zu verwalten, z. B. Kopfzeilenbereich, Navigationsleiste, Hauptinhalt, Fußzeilenbereich usw. Es wird jedoch empfohlen, das div-Tag über der Tabelle zu verwenden, um das Layout der Seite zu verwalten.

HTML-Tabellen-Tags

Beispiel für eine HTML-Tabelle

Sehen wir uns das Beispiel eines HTML-Tabellen-Tags an. Die Ausgabe ist oben dargestellt.

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

Ausgabe:

Javascript-Tutorial

In der obigen HTML-Tabelle gibt es 5 Zeilen und 3 Spalten = 5 * 3 = 15 Werte.

HTML-Tabelle mit Rand

Es gibt zwei Möglichkeiten, den Rahmen für HTML-Tabellen festzulegen.

1. Nach dem Randattribut der Tabelle in HTML
2. Durch die Border-Eigenschaft in CSS

1) HTML-Border-Attribut

Sie können das Attribut „border“ des Tabellen-Tags in HTML verwenden, um den Rahmen anzugeben. Aber es wird jetzt nicht empfohlen.

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

Ausgabe:

2) CSS-Border-Eigenschaft

Es wird jetzt empfohlen, die Border-Eigenschaft von CSS zu verwenden, um den Rahmen in der Tabelle anzugeben.

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

Mit der Eigenschaft border-collapse können Sie alle Rahmen in einem Rahmen reduzieren. Dadurch wird die Grenze zu einer einzigen zusammenfallen.

Javascript-Aufruffunktion aus HTML

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

Ausgabe:

HTML-Tabelle mit Zellenauffüllung

Sie können den Abstand für Tabellenköpfe und Tabellendaten auf zwei Arten festlegen:

1. Durch Cellpadding-Attribut der Tabelle in HTML
2. Durch Auffüllen der Eigenschaft in CSS

Das Cellpadding-Attribut des HTML-Tabellen-Tags ist jetzt veraltet. Es wird empfohlen, CSS zu verwenden. Sehen wir uns also den Code von CSS an.

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

Ausgabe:

Breite der HTML-Tabelle:

Wir können die Breite der HTML-Tabelle mit angeben CSS-Breite Eigentum. Die Angabe kann in Pixeln oder Prozent erfolgen.

Wir können unsere Tischbreite an unsere Anforderungen anpassen. Im Folgenden finden Sie ein Beispiel für die Anzeige einer Tabelle mit Breite.

 table{ width: 100%; } 

Beispiel:

 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> 

Ausgabe:

HTML-Tabelle mit Colspan

Wenn Sie möchten, dass sich eine Zelle über mehr als eine Spalte erstreckt, können Sie das colspan-Attribut verwenden.

Dadurch wird eine Zelle/Zeile in mehrere Spalten unterteilt, und die Anzahl der Spalten hängt vom Wert des colspan-Attributs ab.

Sehen wir uns das Beispiel an, das sich über zwei Spalten erstreckt.

CSS-Code:

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

HTML Quelltext:

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

Ausgabe:

HTML-Tabelle mit Rowspan

Wenn Sie möchten, dass sich eine Zelle über mehr als eine Zeile erstreckt, können Sie das Attribut rowspan verwenden.

Dadurch wird eine Zelle in mehrere Zeilen unterteilt. Die Anzahl der geteilten Zeilen hängt von den Rowspan-Werten ab.

Sehen wir uns das Beispiel an, das sich über zwei Zeilen erstreckt.

CSS-Code:

Blockieren Sie YouTube-Werbung auf Android

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

HTML Quelltext:

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

Ausgabe:

HTML-Tabelle mit Beschriftung

Die HTML-Beschriftung wird über der Tabelle angezeigt. Es darf nur nach dem Tabellen-Tag verwendet werden.

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

Gestalten gerader und ungerader Zellen in HTML-Tabellen

CSS-Code:

 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; } 

Ausgabe:

HINWEIS: Sie können auch verschiedene Tabellentypen erstellen, indem Sie unterschiedliche CSS-Eigenschaften in Ihrer Tabelle verwenden.

Unterstützende Browser

Element	Chrom	IE	Feuerfuchs	Oper	Safari
	Ja	Ja	Ja	Ja	Ja