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