HTML Tabellen
HTML Tabellen
Wir werden in Erwägung ziehen, HTML-Tabellen auf unserer Website zu verwenden. Neben der Erstellung von
HTML tables to present data in rows and columns, we can also create HTML tables to organize
Informationen auf unserer Webseite. HTML-Tabellen in unsere Webseite zu kodieren ist ziemlich einfach, da wir
Muss nur ein paar grundlegende Tabellencodes verstehen.
Eine Tabelle ist eine Anordnung von Daten in Zeilen und Spalten oder möglicherweise in einer komplexeren Struktur.
Tabellen werden häufig in der Kommunikation, der Forschung und der Datenanalyse verwendet.
Tabellen sind nützlich für verschiedene Aufgaben wie die Präsentation von Textinformationen und numerischen Werten.
Daten.
Tabellen können verwendet werden, um zwei oder mehr Elemente in tabellarischer Form zu vergleichen.
Tabellen werden verwendet, um Datenbanken zu erstellen.
Wir können eine Tabelle erstellen, um Daten in tabellarischer Form anzuzeigen, indem wir das <table>-Element mit Hilfe von
<tr>, <td> und <th> Elemente.
In jeder Tabelle wird die Tabellenzeile durch das <tr>-Tag definiert, die Tabellenüberschrift wird durch <th> definiert, und die Tabellendaten sind
definiert durch <td> Tags.
HTML-Tabellen werden verwendet, um das Layout der Seite zu verwalten, z.B. den Kopfbereich, die Navigationsleiste, den Inhalt.
Inhalt, Fußzeile usw. Es wird jedoch empfohlen, das div-Tag anstelle von Tabellen zu verwenden, um das Layout zu verwalten.
der Seite.
HTML-Tabellen-Tags
Tag Description
<tabelle> Es definiert eine Tabelle.
<colgroup> Es gibt eine Gruppe von einer oder mehreren Spalten in einer Tabelle an für
Formatierung.
<col> Es wird mit dem <colgroup>-Element verwendet, um Spalteneigenschaften zu spezifizieren.
HTML-Tabellenbeispiel
Der Aufbau einer HTML-Tabelle besteht darin, die Tabelle zwischen dem Anfang der Tabelle zu beschreiben.
Tag, <TABLE> und den schließenden Tabellen-Tag, </TABLE>. Zwischen diesen Tags können wir
Jede Zeile und jede Zelle in der Zeile konstruieren. Um dies zu tun, beginnen wir zunächst die Zeile mit dem
beginnen Sie mit dem Zeilen-Tag <TR> und bauen Sie dann die Zeile, indem Sie jede Zelle mit der Anfangszelle erstellen
Tag, <TD>, die Daten für diese Zelle hinzufügen und dann die Zelle mit dem End-Tag </TD> schließen.
Wenn wir alle Zellen für eine Zeile abgeschlossen haben, würden wir die Zeile dann mit dem schließenden Zeilen-Tag beenden.
</TR>.Dann würde für jede neue Zeile der Prozess wiederholt, die Zeile zu beginnen und jede
Zelle in der Reihe und Abschluss der Reihe.
Syntax :
Lass uns das Beispiel des HTML-Tabellen-Tags ansehen. Die Ausgabe wird oben angezeigt.
<html>
<kopf>
<title></title>
</head>
<body>
<Tabelle>
<tr><th>Day Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
[{"I":"Ich"},{"Tamil":"Tamil"},{"English":"Englisch"},{"C":"C"},{"DP&CO":"DP&CO"},{"Games":"Spiele"}]
</tr>
<tr><td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Associatio
n</td></tr>
<tr><td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remedial
</td></tr>
<tr><td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</t
d></tr>
</table>
</body>
</html>
Output:
Tabellenüberschrift
Tabellenüberschriften können als <th>-Tag definiert werden. Überschriften, die im <th>-Tag definiert sind, sind
Standardmäßig zentriert und fett. Dieses Tag wird verwendet, um die Überschrift einer Zelle in der Tabelle zu definieren.
Syntax:
Beispiel
<html>
<kopf>
<title></title>
</Kopf>
<body>
<tabelle>
<tr><th>Day Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr><td>I</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
<tr><td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Associatio
n</td></tr>
<tr><td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remedial
</td></tr>
<tr><td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</t
d></tr>
</table>
</body>
</html>
Output:
HTML-Border-Attribut: Wir können das Border-Attribut des <table>-Tags in HTML verwenden, um anzugeben
Rand. Der Rand ist ein Attribut des <table>-Tags und wird verwendet, um einen Rand über alle Zellen zu ziehen.
The border attribute is used to specify the thickness of the table border in pixels. Its represented
in ganzzahligem Wert. Wenn Sie keinen Rand benötigen, können Sie border = "0" verwenden.
Syntax:
Beispiel :
<tableborder="3">
<tr><th>Day Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr><td>I</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Game
s</td></tr>
{"II":"II","Tamil":"Tamil","English":"Englisch","C":"C","DP&CO":"DP&CO","Libra":"Waage"}
ry</td></tr>
<tr><td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Ass
Association
<tr><td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Rem
edial</td></tr>
<tr><td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Libra
ry</td></tr>
<tr><td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Ga
mes</td></tr>
</table>
Output:
Ihr Tisch Polieren
Um unserem Tisch ein polished Aussehen zu verleihen, können wir Befehle einfügen, die anpassen werden
Größe unseres Tisches, Platz in der Zelle hinzufügen, Platz zwischen den Zeilen hinzufügen und die Daten in einer Zelle ausrichten.
Die Arbeit mit diesen Befehlen ist im Grunde ein Prozess des Ausprobierens und Fehlermachens, um die beste
ansprechende Präsentation unserer Informationen. Die Art der Tabelle, die wir erstellen, und das Gesamtdesign
Unsere Website wird Ihnen helfen, herauszufinden, was am besten für unseren Tisch funktioniert.
Einige der Befehle, die es Ihnen ermöglichen, Ihre Tabelle anzupassen, sind:
Der Befehl WIDTH=n% legt die Breite Ihrer Tabelle als Prozentsatz des Bildschirms fest.
Der Buchstabe n bezeichnet den Prozentsatz, den Sie diesem Befehl zuweisen. Zum Beispiel, wenn Sie
Wenn Sie möchten, dass die Breite Ihrer Tabelle die Hälfte der Breite des Bildschirms beträgt, würden Sie die
BREITE="50%" Befehl zu Beginn des Tabellenbefehls.
Beispiel
<html>
<kopf>
<title></title>
</Kopf>
<Körper>
<table border="1"width="400" height="150" >
<tr><th>Day Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
{"I":"Ich","Tamil":"Tamil","English":"Englisch","C":"C","DP&CO":"DP&CO","Games":"Spiele"}
</tr>
<tr><td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Associatio
n</td></tr>
<tr><td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remedial
</td></tr>
<tr><td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td
></tr>
<tr><td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</t
d></tr>
</tabelle>
</body>
</html>
Output:
Beachten Sie, dass der TABLE-Befehl jetzt den Befehl WIDTH="50%" enthält. Dieser Befehl
dehnt die Tabelle über die halbe Breite des Textes aus.
Ausrichtung der Daten:
Der Befehl ALIGN=(LINKS, RECHTS oder ZENTRIERT) richtet die Daten horizontal aus
eine Zelle. Zum Beispiel, wenn Sie die Daten in der Mitte jeder Zelle in einer Reihe platzieren möchten, würden Sie
Fügen Sie den Befehl ALIGN=CENTER innerhalb des Zeilenbefehls ein.
Der Befehl VALIGN=(TOP, MIDDLE oder BOTTOM) richtet die Daten vertikal aus
eine Zelle. Wenn Sie beispielsweise die Daten in jeder Zelle einer Reihe zentrieren möchten, würden Sie
Fügen Sie den Befehl ALIGN=MIDDLE innerhalb des Zeilenbefehls ein.
Zusätzlich zu den Codes, die in den vorherigen Abschnitten erklärt wurden, enthält die folgende Tabelle jetzt
beinhaltet einige dieser Befehle.
Example :
<html>
<head>
<title></title>
</Kopf>
<body>
<table border="1" width="400" height="150" >
<tralign="center"><th>Tag
Bestellung</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tralign="center">
<td>I</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
<tralign="center">
<td>II</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tralign="center">
<td>III</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Association</t
d>
</tr>
<tralign="center">
<td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remedial</td>
</tr>
<tralign="center">
<td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tralign="center">
["<td>VI</td>","<td>Tamil</td>","<td>Englisch</td>","<td>C</td>","<td>DP&CO</td>","<td>Spiele</td>"]
</tr>
</Tabelle>
</body>
</html>
Output:
Schließlich platziert der Befehl ALIGN="CENTER" alle Zellen in der obigen Tabelle.
CELLPADDING= cellpadding steht für den Abstand zwischen dem Inhalt der Zelle
und Kante der Zelle.n Befehl passt die vertikale Dimension der Zellen an. Der Buchstabe n
bezeichnet den numerischen Wert, den Sie diesem Befehl zuweisen.
Der CELLSPACING= Der cellspacing-Attribut definiert den Abstand zwischen Tabellenzellen, (d.h.)
Dieses Attribut wird verwendet, um den Abstand zwischen den einzelnen Zellen n zu spezifizieren, Befehl setzt den Abstand.
oder Rand um die Zellen. Der Buchstabe n bezeichnet den numerischen Wert, den Sie diesem zuweisen.
Befehl.
Beispiel
Live-Demo
<html>
<kopf>
<title></title>
</Kopf>
<body>
<table border="1" width="400" height="150" cellpadding = "10" cellspacing = "10" >
<tr align="center"><th>Day
Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th>
</tr>
<tr align="center">
{"I":"Ich","Tamil":"Tamil","English":"Englisch","C":"C","DP&CO":"DP&CO","Games":"Spiele"}
/td>
</tr>
<tr align="center">
["<td>II</td>","<td>Tamil</td>","<td>Englisch</td>","<td>C</td>","<td>DP&CO</td>","<td>Bibliothek</td>"]
</td>
</tr>
<tr align="center">
{"III":"III","Tamil":"Tamil","English":"Englisch","C":"C","DP&CO":"DP&CO","Associ":"Vereinigung"}
ation
</tr>
<tr align="center">
<td>IV</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Remed
ial
</tr>
<tr align="center">
<td>V</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Library
</td>
</tr>
<tr align="center">
<td>VI</td><td>Tamil</td><td>English</td><td>C</td><td>DP&CO</td><td>Games
</td>
</tr>
</tabelle>
</body>
</html>
Ausgabe :
Der Befehl CELLPADDING="10" erhöht die vertikale Dimension der Zellen, und die
CELLSPACING="10" Befehl erhöht den Rand um die Zellen.
TD Tag :
Dieses Tag wird verwendet, um die Daten jeder Zelle in der Tabelle zu definieren.
Syntax:
NOWRAP: Dieses Attribut wird verwendet, um den Inhalt der Zelle in einer Zeile anzuzeigen.
Colspan-Attribut: Wenn Sie zwei oder mehr Spalten zu einer einzigen Spalte zusammenführen möchten, benötigt es
einen ganzzahligen Wert. Ähnlich werden Sie
rowspan-Attribut: Wenn Sie zwei oder mehr Zeilen in einer einzelnen Zeile zusammenführen möchten. Es nimmt eine ganze Zahl an.
Wert.
Beispiel
<html>
<kopf>
<title></title>
</Kopf>
<body>
<tr align="center"><th>Tag
Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
</tr>
</tr>
</tr>
</tr>
</tr>
</table>
</body>
</html>
Output:
Tischhintergründe
Sie können den Hintergrund der Tabelle auf eine der folgenden beiden Arten festlegen −
bgcolorattribut − Sie können die Hintergrundfarbe für die gesamte Tabelle oder nur für eine Zelle festlegen.
Hintergrundattribut − Sie können ein Hintergrundbild für die gesamte Tabelle oder nur für eine festlegen
Zelle.
Sie können die Rahmenfarbe auch mit dem Attribut bordercolor festlegen.
Beispiel
<html>
<kopf>
<title></title>
</head>
<body>
<table border="1" bordercolor="rot" bgcolor="gelb" width="400" height="150">
<tr align="center"><td colspan="6"><b>[Link] I- CS Stundenplan</b></td>
<tr align="center"><th>Day Order </th> <th>I</th> <th>II</th> <th>III</th> <th>IV</th>
<th>V</th></tr>
<tr align="center"> <td>I</td><td rowspan = "6">Tamil</td><td rowspan="6">Englisch</td><td
colspan="3">C LAB</td>
</tr>
<tr align="center"> <td>II</td> <td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tr align="center"> <td>III</td><td>C</td><td>DP&CO</td><td>Vereinigung</td>
</tr>
<tr align="center"> <td>IV</td><td>C</td><td>DP&CO</td><td>Reparativ</td>
</tr>
<tr align="center"> <td>V</td><td colspan="2">C LAB</td><td>Bibliothek</td>
</tr>
<tr align="center"> <td>VI</td><td>C</td><td>DP&CO</td><td>Spiele</td>
</tr>
</Tabelle>
</body>
</html>
Output :
Hier ist ein Beispiel für die Verwendung von Hintergrundattributen. Hier werden wir ein verfügbares Bild verwenden.
/images Verzeichnis.
Beispiel
<html>
<kopf>
<title></title>
</Kopf>
<body>
<tr align="center"><th>Tag
<th>Bestellung</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr align="center"> <td>Ich</td><td rowspan = "6">Tamil</td><td rowspan="6">Englisch</td><td
colspan="3">C LAB</td>
</tr>
</tr>
</tr>
</tr>
</tr>
</tr>
</Tabelle>
</body>
</html>
Output :
Tabellenüberschrift
Das Caption-Tag dient als Titel oder Erklärung für die Tabelle und erscheint oben.
der Tabelle. Dieses Tag ist in neueren Versionen von HTML/XHTML veraltet.
<caption> Tag
Example :
<html>
<kopf>
<title></title>
</head>
<body>
<table border="1" width="400" height="150">
<caption><b>[Link] I- CS Time Table</b></caption>
<tr align="center"><th>Tag
Bestellung</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr align="center"> <td>Ich</td><td rowspan = "6">Tamil</td><td rowspan="6">Englisch</td><td
colspan="3">C LAB</td>
</tr>
<tr align="center"> <td>II</td> <td>C</td><td>DP&CO</td><td>Library</td>
</tr>
<tr align="center"> <td>III</td><td>C</td><td>DP&CO</td><td>Vereinigung</td>
</tr>
<tr align="center"> <td>IV</td><td>C</td><td>DP&CO</td><td>Remedial</td>
</tr>
<tr align="center"> <td>V</td><td colspan="2">C LAB</td><td>Bibliothek</td>
</tr>
<tr align="center"> <td>VI</td><td>C</td><td>DP&CO</td><td>Spiele</td>
</tr>
</table>
</body>
</html>
Output :
Example
<html>
<kopf>
<title></title>
</head>
<body>
<table border="1" bgcolor="cyan" width="400" height="150" >
<thead><tr><td colspan="6" align="center"> <b>Zeitplan</b></td></tr></thead>
<tfoot><tr><td colspan="6" align="right"><b>Computer Science</b></td></tr></tfoot>
<tr align="center"><th>Tag
Order</th><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th></tr>
<tr align="center"> <td>I</td><td rowspan = "6">Tamil</td><td rowspan="6">Englisch</td><td
colspan="3">C LAB</td>
</tr>
<tr align="center"> <td>II</td> <td>C</td><td>DP&CO</td><td>Bibliothek</td>
</tr>
<tr align="center"> <td>III</td><td>C</td><td>DP&CO</td><td>Vereinigung</td>
</tr>
<tr align="center"> <td>IV</td><td>C</td><td>DP&CO</td><td>Reparatur</td>
</tr>
<tr align="center"> <td>V</td><td colspan="2">C LAB</td><td>Library</td>
</tr>
<tr align="center"> <td>VI</td><td>C</td><td>DP&CO</td><td>Games</td>
</tr>
</tabelle>
</body>
</html>
Output:
Verschachtelte Tabellen
Sie können eine Tabelle in eine andere Tabelle einfügen. Nicht nur Tabellen, Sie können fast alles verwenden.
Tags innerhalb des Tabellen-Daten-Tags <td>.
Example
Im Folgenden finden Sie ein Beispiel für die Verwendung einer anderen Tabelle und anderer Tags innerhalb einer Tabellenzelle.
<html>
<kopf>
<title></title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td align="center" colspan="2"> <b>Fällige Informationen</b></td>
</tr>
<tr>
<td> </td>
<table border="1">
<tr>
<th>Name</th>
<th>Dues</th>
</tr>
<tr>
<td>Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir</td>
<td>70000</td>
</tr>
</table>
</td>
<td>
<ul>
<li>Möbel</li>
<li>Schmuck</li>
</ul>
</td>
</tr>
<tr>
<td align = "center"><b>Die Einzelheiten</b></td>
<td align = "center"><b>Purchased Things</b></td>
</tr>
</Tabelle></Körper>
</html>
Output:
Conclusion
Example 1:
Beispiel 3: