brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Tabellen in HTML

von Thomas Salvador.

Tabellen sind ein ausgesprochen mächtiges und gern benutztes Mittel zur Gestaltung, die weit über die reine Nutzung zur tabellarischen Anzeige irgendwelcher Werte hinausgeht.

Dementsprechend sind etliche Erweiterungen zum Standard im Umlauf, die in der Tat auch von vielen Browser unterstützt werden. Diese erweiterten Möglichkeiten gehen wiederum weit über das hinaus, was der Standard (bislang) zulässt.

Wir betrachten in diesem Abschnitt, was der Standard zum Thema Tabellen sagt, und in den folgenden, welche gängigen Erweiterungen existieren. Beachten Sie bitte, dass diese Erweiterungen visueller Natur sind, die Verwendung bei Lesern mit diese Erweiterung nicht unterstützenden Browsern also lediglich eine weniger hübsche Darstellung, nicht jedoch Datenverlust bedeuten.

Tabellen sind immer eigene Absätze, gehören damit zu den blockorientierten Gestaltungselementen.

Grundlagen

Die gesamte Tabelle wird in HTML durch den table-Tag gekapselt, der eine Menge von Tabellenzeilen enthält. Diese Zeilen werden jeweils durch tr (table row) umschlossen, und bestehen ihrerseits aus einer Menge von Zellen. Die einzelne Zelle wird mit td umschlossen. Die allgemeine Form ist damit

<table>
  <tr>
    <td> Zeile 1 - Spalte 1 </td>
    <td> Zeile 1 - Spalte 2 </td>
    ...
    <td> Zeile 1 - Spalte n </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td>
    <td> Zeile 2 - Spalte 2 </td>
    ...
    <td> Zeile 2 - Spalte n </td>
  </tr>
  ...
  <tr>
    <td> Zeile m - Spalte 1 </td>
    <td> Zeile m - Spalte 2 </td>
    ...
    <td> Zeile m - Spalte n </td>
  </tr>
</table>

Verwenden Sie den th-Tag anstelle von td, um Überschriften zu setzen.

Jede Zelle kann beliebige HTML-Elemente enthalten, insbesondere also wiederum Tabellen.

Rahmen und Gitternetz

Mit Hilfe des border Attributes kann ein Rahmen erzeugt werden. Nachteilig bei Rahmen ist die Tatsache, dass sie mit einem 3D-Effekt dargestellt werden, der sich nicht abschalten lässt, wie es etwa bei den horizontalen Trennlinien möglich ist. Dies führt bei gewissen Hintergrundfarben, wie etwa Weiß, oder gewissen Hintergrundmustern zur sehr unschönen Ergebnissen. (Für den beschriebenen Effekt bei Hintergrundmustern müssen Sie noch wissen, dass Browser i.a. nur die raising und die falling line zeichnen (etwa in weiß und schwarz), um den 3D-Effekt zu erzeugen. Das Mittelfeld wird freigelassen, wo dann das Muster sichtbar ist.)

Bei den Erweiterungen zum Rahmen und Gitternetz werden wir eine Möglichkeit kennenlernen, mit der sich dieser Effekt vermeiden lässt.

Beispiel: "Eine einfache Tabelle mit Rahmen"

<table border="1">
  <tr>
    <td> Zeile 1 - Spalte 1 </td>
    <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td>
    <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Ausgabe auf Ihrem Browser
Zeile 1 - Spalte 1 Zeile 1 - Spalte 2
Zeile 2 - Spalte 1 Zeile 2 - Spalte 2

Blind Table

Lassen wir im Beispiel border weg, so erhalten wir eine sog. blind table oder hidden table (weil man nicht notwendig sieht, dass es sich um eine Tabelle handelt).

Ausgabe auf Ihrem Browser
Zeile 1 - Spalte 1 Zeile 1 - Spalte 2
Zeile 2 - Spalte 1 Zeile 2 - Spalte 2

Ausdehnung

Die Breite der Tabelle passt sich automatisch dem Inhalt an, wobei meist so kompakt wie möglich dargestellt wird. Mit dem width Attribut kann die Breite prozentual zur zur Verfügung stehenden Breite angegeben werden.

Beispiel:

  <table border="2" width="100%">
  ... (wie oben)
  </table>

liefert

Ausgabe auf Ihrem Browser
Zeile 1 - Spalte 1 Zeile 1 - Spalte 2
Zeile 2 - Spalte 1 Zeile 2 - Spalte 2

Die Tabelle erstreckt sich also über die gesamte Breite (100%). Geben wir nun einmal weniger Platz:

Beispiel:

<table border="2" width="50%">
... (wie oben)
</table>

liefert

Ausgabe auf Ihrem Browser
Zeile 1 - Spalte 1 Zeile 1 - Spalte 2
Zeile 2 - Spalte 1 Zeile 2 - Spalte 2

und noch weniger

Beispiel:

  <table border="2" width="25%">
  ... (wie oben)
  </table>

liefert

Ausgabe auf Ihrem Browser
Zeile 1 - Spalte 1 Zeile 1 - Spalte 2
Zeile 2 - Spalte 1 Zeile 2 - Spalte 2

Wir sehen, dass der Browser unsere Wünsche so gut es eben geht erfüllt, Zelleninhalte werden entsprechend umgebrochen (an Leerzeichen, manchmal auch an Bindestrichen) Die natürliche Grenze liegt bei der Breite des längsten Wortes, welche damit die Mindestbreite der Spalte bestimmt. (Dies ist auch günstiger, als wenn der Browser mit dem Wort umbrechen würde.)

Beispiel:

<table border="2" width="1%">
... (wie oben)
</table>

liefert

Ausgabe auf Ihrem Browser
Zeile 1 - Spalte 1 Zeile 1 - Spalte 2
Zeile 2 - Spalte 1 Zeile 2 - Spalte 2

Teil 2 weiter


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 9. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/42.html .