Startseite ⇒ HTML Tabelle ⇒ Aufbau
1197 Aufrufe

Eine HTML Tabelle erstellen


Leitet man eine Tabelle in HTML ein wird der normale Fluss von Texten und Bildern unterbrochen und die Tabelle wird in der nächsten Zeile eingefügt. Dort wird sie dann Zeile für Zeile aufgebaut. Innerhalb der Zeilen befinden sich die Tabellenzellen und innerhalb dieser der gewünschte Inhalt. Wenn das Ende der Tabelle erreicht ist, wird der Fluss der Texte und Bilder in der nächsten Zeile weitergeführt.


Die Basis-Elemente table, tr und td

Das HTML Element table:

table = Tabelle


Mit dem HTML Start-Tag <table> leitet man eine HTML Tabelle ein und mit dem entsprechenden End-Tag </table> beendet man die Tabelle.


Quelltext:

<table> ... </table>

Das HTML Element tr:

tr = table row = Tabellenreihe / Tabellenzeile


Da eine HTML Tabelle zeilenweise aufgebaut wird, muß nach dem die Tabelle eingeleitet worden ist, mindestens eine (oder beliebig viele) Zeile / Reihe folgen. Der Anfang einer Zeile wird mit dem HTML Start-Tag <tr> und das Ende der Zeile mit dem End-Tag </tr> definiert.


Quelltext:

<table>
  <tr> ... </tr>
  <tr> ... </tr>
</table>

Das HTML Element <td>:

td = table data = Tabellendaten


Um nun Inhalte einer Tabellenreihe zuzuordnen, muß eine Tabellen-Zelle definiert werden, in welcher der Inhalt kommt. Diese Datenzellen werden mit <td> eingeleitet und mit </td> beendet. Jede Tabellen-Reihe kann theoretisch beliebig viele Tabellen-Zellen enthalten. Optisch betrachtet ist eine Tabellen-Reihe eine Zeile und eine Tabellen-Zelle eine Spalte.


Quelltext: 

<table>
  <tr>
    <td> Inhalt </td>
  </tr>
</table>

Ausgabe:

Inhalt

Tabellen mit mehreren Reihen und Spalten:


Wenn Sie nun Daten tabellarisch in mehreren Reihen und Spalten darstellen wollen, gehen Sie reihen- bzw. zeilenweise vor. Erst eine Tabellen-Reihe (-Zeile) einleiten (mit <tr>), dann mit der gewünschten Zahl an Spalten mit Datenzellen füllen (<td> und </td>) und die Tabellenreihe mit beenden (mit </tr>). Um eine oder mehrere weitere Reihen hinzuzufügen wiederholen Sie diesen Prozess.


Quelltext: 

Adressen:
<table>
  <tr>
    <td>Name:</td>
    <td>Vorname:</td>
    <td>Strasse:</td>
    <td>Haus-Nr.:</td>
  </tr>
  <tr>
    <td>Meyer</td>
    <td>Sabine</td>
    <td>Breitestr.</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Pfennig</td>
    <td>Julia</td>
    <td>Fuchspfad</td>
    <td>27</td>
  </tr>
</table>

Ausgabe:

Adressen:
Name: Vorname: Strasse: Haus-Nr.:
Meyer Sabine Breitestr. 4
Pfennig Julia Fuchspfad 27

Rahmen zeichnen: Das <table> Attribut "border"

border = Rahmen


Um einen Rahmen um eine Tabelle zu zeichnen, und diese optisch vom Text hervorzuheben, können Sie im einleitenden <table> Element das Attribut border="Wert" benutzen. Dabei entspricht der "Wert" der Rahmendicke in Pixel


Quelltext: 

Adressen:
<table border="1">
  <tr>
    <td>Name:</td>
    <td>Vorname:</td>
    <td>Strasse:</td>
    <td>Haus-Nr.:</td>
  </tr>
  <tr>
    <td>Meyer</td>
    <td>Sabine</td>
    <td>Breitestr.</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Pfennig</td>
    <td>Julia</td>
    <td>Fuchspfad</td>
    <td>27</td>
  </tr>
</table>

Ausgabe:

Adressen:
Name: Vorname: Strasse: Haus-Nr.:
Meyer Sabine Breitestr. 4
Pfennig Julia Fuchspfad 27


Weiterführende Informationen:


Weblinks: