html tutorial - html Tabellen - html5 tutorial

Tabellen werden verwendet um “Tabellendaten” anzuzeigen, also Informationen, welche logisch – in Zeilen und Spalten angeordnet – präsentiert werden können.

Learn html - html tutorial - html table - html examples - html programs

Tabellen in HTML zu bauen mag am Anfang schwierig aussehen. Aber wenn Sie cool bleiben und Schritt für Schritt vorgehen, ist es eigentlich ganz logisch. So wie alles andere bei HTML auch.

 <table>
	  <tr>
		<td>Zelle 1</td>
		<td>Zelle 2</td>
	  </tr>
	  <tr>
		<td>Zelle 3</td>
		<td>Zelle 4</td>
	  </tr>
</table>
	

sieht im Browser wie folgt aus:

Werfen Sie einen nochmal einen kurzen Blick auf das obige Beispiel, dies ist wohl das bisher schwerste. Lassen Sie uns kurz den Code auseinandernehmen und die Tags erklären:

Drei verschiedene Elemente werden benötigt, um Tabellen zu erzeugen:

Hier eine kurze Erklärung des Beispiels 1: Die Tabelle startet mit einem <table> und wird gefolgt von einem , welches der Beginn einer neuen Zeile ist. Zwei Tabellenzellen werden in diese Zeile eingefügt: Zelle 1 and Zelle 2. Danach wird die Zeile mit geschlossen und gleich beginnt eine neue Zeile mit . Auch diese enthält zwei Zellen. Die Zeile wird mit und die Tabelle am Schluß mit </table> geschlossen.

Noch ein Hinweis zum weiteren Verständnis: Zeilen werden die horizontalen Tabellenzellen genannt und von Spalten spricht man bei den vertikalen Tabellenzellen.

Zelle 1 und Zelle 2 bilden eine Zeile. Zelle 1 und Zelle 3 bilden eine Spalte. Im gerade gezeigen Beispiel hat die Tabelle zwei Zeilen und zwei Spalten. Eine Tabelle kann aber eine unbegrenzte Anzahl an Zeilen und Spalten haben.

 <table>
	  <tr>
		<td>Zelle 1</td>
		<td>Zelle 2</td>
		<td>Zelle 3</td>
		<td>Zelle 4</td>
	  </tr>
	  <tr>
		<td>Zelle 5</td>
		<td>Zelle 6</td>
		<td>Zelle 7</td>
		<td>Zelle 8</td>
	  </tr>
	  <tr>
		<td>Zelle 9</td>
		<td>Zelle 10</td>
		<td>Zelle 11</td>
		<td>Zelle 12</td>
	  </tr>
</table>

sieht im Browser wie folgt aus:

Natürlich! Z.B. gibt es das Attribut border (engl. für Grenze, Begrenzung). Dieses wird verwendet um die Dicke der Rahmen (Begrenzungslinien) der Tabelle anzugeben:

 <table border="1">
	  <tr>
		<td>Zelle 1</td>
		<td>Zelle 2</td>
	  </tr>
	  <tr>
		<td>Zelle 3</td>
		<td>Zelle 4</td>
	  </tr>
</table>

sieht im Browser wie folgt aus:

Genau wie bei Bildern können Sie auch die Breite von Tabellen in Pixeln angeben. Alternativ dazu ist auch eine Prozentangabe möglich.

 <table border="1" width="30%">
	

Dieses Beispiel wird im Browser als Tabelle angezeigt, deren Breite 30% des Bildschirmes beträgt.

Es gibt viele Attribute für Tabellen. Hier sind noch zwei weitere:

 <td align="right" valign="top">Zelle 1</td>