Tabellen mit HTML

DruckversionPDF version

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 HTML-Formatierungen

 

Achtung: Nach HTML strict Standard werden Tabellen-Attribute (d.h. Tabellen-Formatierung/Layout)  durch CSS ersetzt. Der einzige Grund mit diesen Angaben zu arbeiten sind HTML Newsletter, die in E-Mail-Browsern korrekt angezeigt werden sollen.


<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 wurden ursprünglich auch benützt, um grafische 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. Diese Technik wird heute nicht mehr verwendet.

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.

 

Sie finden eine Beschreibung der Positionierung und des Layout von Tabellen mit CSS hier:

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

 

 

Alles wirklich alles zu Tabellenhintergründen, Gitternetzlinien, Spaltenbreiten, Zellenverbindung und Zellengrößen innerhalb des HTML Codes finden Sie hier

http://de.selfhtml.org/html/tabellen/gestaltung.htm

rhein-main-experten.de wird überprüft von der Initiative-S