- HTML Tutorial
- HTML - Zuhause
- HTML - Überblick
- HTML - Grund Schlagwörter
- HTML - Elemente
- HTML - Attribute
- HTML - Formatierung
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Kommentare
- HTML - Bilder
- HTML - Tabellen
- HTML - Listen
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Hintergründe
- HTML - Farben
- HTML - Schriften
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML Referenzen
- HTML - Tags Referenzen
- HTML - Attributes Referenzen
- HTML - Events Referenzen
- HTML - Fonts Referenzen
- HTML - ASCII Codes
- HTML - ASCII Table Lookup
- HTML - Farbe Names
- HTML - Entitäten
- HTML - MIME Media Typen
- HTML - URL Encoding
- HTML - Sprache ISO Codes
- HTML -Charakter Encodings
- HTML -Veraltet Tags
- HTML Nützlich Ressourcen
- HTML - FarbcodeBuilder
- HTML - Online Editor
HTML Tabelle
Die HTML-Tabellen ermöglicht Web-Autoren, um Daten wie Texte, Bilder, Links, andere Tabellen, etc. in Zeilen und Spalten von Zellen zu arrangieren.
Die HTML-Tabellen erstellt unter Verwendung der <table> Tag, in dem die <tr> Tag wird verwendet, um Tabellenzeilen zu erstellen und <td> Tag wird verwendet, um Datenzellen zu erstellen
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 wird produzieren folgendes Ergebnis:
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
Hier border ist ein Attribut von <table> Tag und es wird verwendet um legte einen grenze über für alle Zellen . Wenn Sie tun nicht einen grenze brauchen, dann können Sie die verwendet border = "0"..
Tisch Überschrift
Tisch Überschrift kann unter Verwendung definiert werden <th> tag. Dieses Tag wird legte werden, um lt ersetzen<td> tag die verwendet werden, um tatsächliche Datenzelle repräsentieren wird. Normalerweise werden Sie Ihre Top-reihe als Tisch Überschrift legen, wie unten dargestellt, sonst können Sie verwenden <th> Element in jeder Zeile.
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 wird produzieren folgendes Ergebnis:
Name | Salary |
---|---|
Ramesh Raman | 5000 |
Shabbir Hussein | 7000 |
cellpadding und cellspacing Attribute
Es gibt zwei attribiutes genannt cellpadding und cellspacing die Sie verwenden, um den Leerraum in der Tabelle Zellen anpassen. Die cellspacing Attribut definiert die Breite des Rahmens, während cellpadding den Abstand zwischen Zellenrahmen und den Inhalt innerhalb einer Zelle.
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 wird produzieren folgendes Ergebnis:
Name | Salary |
---|---|
Ramesh Raman | 5000 |
Shabbir Hussein | 7000 |
Colspan und Rowspan Attribute
Sie wird Verwendung colspan Attribut, wenn Sie zwei oder mehr Spalten in einer einzigen Spalte zusammenführen möchten. Ähnlich wie Sie verwenden rowspan Wenn Sie zwei oder mehr Reihen 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 wird produzieren folgendes Ergebnis::
Column 1 | Column 2 | Column 3 |
---|---|---|
Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
Row 2 Cell 2 | Row 2 Cell 3 | |
Row 3 Cell 1 |
Tabellen Hintergrund
Sie können Tabellen Hintergrund mit einer der folgenden zwei Möglichkeiten:
bgcolor attribute - You can set background color for whole table or just for one cell.
background attribute - You can set background image for whole table or just for one cell.
Sie können auch Rahmenfarbe auch mit border -Attribut
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 wird produzieren folgendes Ergebnis:
Column 1 | Column 2 | Column 3 |
---|---|---|
Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
Row 2 Cell 2 | Row 2 Cell 3 | |
Row 3 Cell 1 |
Hier ist ein Beispiel für die Verwendung Hintergrund -Attribut. Hier werden wir ein Bild in / images-Verzeichnis verwenden.
<!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>
Das wird folgende Ergebnis. Hier Hintergrundbild nicht zu Tisch Kopfball an. P>
Column 1 | Column 2 | Column 3 |
---|---|---|
Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
Row 2 Cell 2 | Row 2 Cell 3 | |
Row 3 Cell 1 |
Tisch Höhe und Breite
Sie können eine Tabelle Breite und Höhe mit Breite und Höhe attrubutes eingestellt. Sie können die Tabellen Breite oder Höhe in Bezug auf Pixel oder in Prozent des verfügbaren Bildschirmbereich 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 wird produzieren folgendes Ergebnis:
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
Tisch Bildunterschrift
Das Beschriftung -Tag wird als Titel oder Erklärung für die Tabelle zu dienen und es zeigt sich an der Spitze der Tabelle. Dieser Tag wird in neueren Version von HTML / XHTML unerwün- schte.
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 wird produzieren folgendes Ergebnis:
row 1, column 1 | row 1, columnn 2 |
row 2, column 1 | row 2, columnn 2 |
Tisch Header, Body und Footer
eine Kopfzeile, einen Körper und einen Fuß:
Tabellen können in drei Abschnitte unterteilt werden. Der Kopf und Fuß sind ziemlich ähnlich Kopf-und Fußzeilen in einem Textverarbeitungsdokument , das für jede Seite gleich bleiben, während der Körper ist der Hauptinhalt Inhaber der Tabelle.
Die drei Elemente zur Trennung der Kopf, Körper und Fuß einer Tabelle sind:
- <thead> - to create a separate table header.
- <tbody> - to indicate the main body of the table.
- <tfoot> - to create a separate table footer.
Eine Tabelle kann mehrere & lt enthalten; tbody & gt; Elemente, um verschiedene Seiten oder Gruppen von Daten anzuzeigen. Aber es ist bemerkenswert, dass & lt; thead & gt; und & lt; tfoot & gt; Tags sollten vor & lt erscheinen; tbody & gt;
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 wird produzieren folgendes Ergebnis:
This is the head of the table | |||
This is the foot of the table | |||
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
geschachtelten Tabellen
Sie können eine Tabelle innerhalb einer anderen Tabelle zu verwenden. Nicht nur Tabellen können Sie fast alle Tags innerhalb von Tabellendaten-Tag & lt zu verwenden; <td>.
Beispiel
Nach ist das Beispiel mit einem anderen Tisch und andere 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 wird produzieren folgendes Ergebnis:
|