HTML Tabelle

Advertisements

Previous Page
Next Page  

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 2Row 1 Cell 3
Row 2 Cell 2Row 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 2Row 1 Cell 3
Row 2 Cell 2Row 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 2Row 1 Cell 3
Row 2 Cell 2Row 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:

This is the caption
row 1, column 1row 1, columnn 2
row 2, column 1row 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:

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000
Advertisements