Start HTML
 
 
 

Sprache

Lexika
 
HTML - Tabellen PDF Drucken E-Mail

Tabellen werden in Zeilen und Spalten definiert. Breite und Höhe kann relativ in px oder absolut in % angegeben werden. Vergleich zu Excel: Spaltenkennzeichnung A,B,C... Zeilenkennzeichnung 1,2,3, Sie sagen dem Browser  Zeile1, Spalte A,B,C...., Zeile2,Spalte A,B, C...Zeile 3, Spalte A,B,C...

Das folgende Beispiel kreiert eine 2zeilige und 2spaltige Tabelle:
<TABLE>
<TBODY>
<!-- Beginn der Tabelle-->
<TR>
<!-- Beginn der Zeile 1-->
<TD>
<!-- Erste Spalte der Zeile =Zelle A1-->
<p>Hier steht der Inhalt der ersten Spalte der ersten Zeile A1</p>
</TD>
<!-- Ende der erste Spalte der Zeile =Zelle A1-->
<TD>
<!-- Zweite Spalte der Zeile =Zelle B1-->
<p>Hier steht der Inhalt der zweiten Spalte der ersten Zeile B1</p>
</TD>
<!-- Ende der zweiten Spalte der ersten Zeile =Zelle B1-->
</TR>
<!-- Ende der Zeile 1-->
<TR>
<!-- Beginn der Zeile 2-->
<TD>
<!-- Erste Spalte der zweiten Zeile =Zelle A2-->
<p>Hier steht der Inhalt der ersten Spalte der zweiten Zeile A2</p>
</TD>
<!-- Ende der erste Spalte der zweiten Zeile =Zelle A2-->
<TD>
<!-- Zweite Spalte der zweiten Zeile =Zelle B2-->
<p>Hier steht der Inhalt der zweiten Spalte der zweiten Zeile B2</p>
</TD>
<!-- Ende der zweiten Spalte der zweiten Zeile =Zelle B2-->
</TR>
<!-- Ende der Zeile 2-->
</TBODY>
</Table>

Ergebnis:

Hier steht der Inhalt der ersten Spalte der ersten Zeile A1

Hier steht der Inhalt der zweiten Spalte der ersten Zeile B1

Hier steht der Inhalt der ersten Spalte der zweiten Zeile A2

Hier steht der Inhalt der zweiten Spalte der zweiten Zeile B2

Beispiel mit Formatierungen
<TABLE width="100%" border="1" cellpadding="10" cellspacing="20">
<TBODY>
<!-- Beginn der Tabelle-->
<!-- cellpadding und cellspacing formatiert die Zellenabstände-->
<TR>
<!-- Beginn der Zeile 1-->
<TD width="200px">
<!-- Erste Spalte der Zeile =Zelle A1-->
<p>Hier steht der Inhalt der ersten Spalte der ersten Zeile A1</p>
</TD>
<!-- Ende der erste Spalte der Zeile =Zelle A1-->
<TD width="300px">
<!-- Zweite Spalte der Zeile =Zelle B1-->
<p>Hier steht der Inhalt der zweiten Spalte der ersten Zeile B1</p>
</TD>
<!-- Ende der zweiten Spalte der ersten Zeile =Zelle B1-->
</TR>
<!-- Ende der Zeile 1-->
<TR>
<!-- Beginn der Zeile 2-->
<TD width="200px">
<!-- Erste Spalte der zweiten Zeile =Zelle A2-->
<p>Hier steht der Inhalt der ersten Spalte der zweiten Zeile A2</p>
</TD>
<!-- Ende der erste Spalte der zweiten Zeile =Zelle A2-->
<TD width="300px">
<!-- Zweite Spalte der zweiten Zeile =Zelle B2-->
<p>Hier steht der Inhalt der zweiten Spalte der zweiten Zeile B2</p>
</TD>
<!-- Ende der zweiten Spalte der zweiten Zeile =Zelle B2-->
</TR>
<!-- Ende der Zeile 2-->
</TBODY>
</Table>

So sieht es aus:

Hier steht der Inhalt der ersten Spalte der ersten Zeile A1

Hier steht der Inhalt der zweiten Spalte der ersten Zeile B1

Hier steht der Inhalt der ersten Spalte der zweiten Zeile A2

Hier steht der Inhalt der zweiten Spalte der zweiten Zeile B2

Wenn Sie die Zellinhalte grundsätzlich oben anfangen lassen wollen müssen sie <TD valign="top"> angeben:

Hier steht der Inhalt der ersten Spalte der ersten Zeile A1

Hier steht der Inhalt der zweiten Spalte der ersten Zeile B1

Hier steht der Inhalt der ersten Spalte der zweiten Zeile A2

Hier steht der Inhalt der zweiten Spalte der zweiten Zeile B2

 

Sie können in die Tabellenspalten Text und/oder Bilder einfügen - HTML-Angaben behalten auch innerhalb einer Tabelle Gültigkeit. Genaueres zu Tabellen in HTML finden Sie hier: http://de.selfhtml.org/html/tabellen/aufbau.htm 

Tabellen werden auch benützt, um graphische Elemente zu platzieren: Die Tabellen werden hierzu verschachtelt (Tabellen innerhalb von Spalten) und sogenannte spacer.gif  werden verwendet (leere Bilder in der Hintergrundfarbe, die durch Ihre Pixelgröße Elemente positionieren.

Tabellen haben Nachteile für Suchmaschinen und für die Barrierefreiheit, da für reine Textbrowser nicht klar ist, was oben (d.h. hauptsächlich den Inhalt beschreibt) und was unten ist. Wenn Sie Spacer Gifs verwenden, sollten Sie Browsern mit ALT="" signalisieren, dass es sich um ausschließlich grafische Elemente handelt.

Bei E-mail Newslettern müssen Sie mit Tabellen arbeiten, da die meisten E-mail Browser CSS nicht berücksichtigen.

Die neuere Entwicklung geht dahin, Elemente grundsätzlich mit CSS und nicht mit Tabellen anzuordnen. Sinnvoll ist dies erst seit Internet Explorer Version 5 und Netscape Version 6. 

Sie finden eine Beschreibung der Positionierung mit CSS hier:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm