SUCHE MIT Google
Web virtualuniversity.ch
HOME DIDAKTIK ECDL ELEKTRONIK GUIDES HR MANAGEMENT MATHEMATIK SOFTWARE TELEKOM
DIENSTE
Anmeldung
Newsletter abonnieren
Sag's einem Freund!
VirtualUniversity als Startseite
Zu den Favoriten hinzufügen
Feedback Formular
e-Learning für Lehrer
Spenden
Autoren login
KURSE SUCHEN
Kurse veröffentlichen

Suche nach Datum:

Suche mit Schlüsselwort:

Suche nach Land:

Suche nach Kategorie:
PARTNER
ausbildung24.ch - Ausbildungsportal, Seminare, Kursen... 

 
HTMLopen.de - Alles was ein Webmaster braucht

 
PCopen.de - PC LAN Netze und Netzwerke - alles was ein IT Profi und Systemtechnicker braucht

GUIDES UND TUTORIAL

Tabellen

Tabellen sind recht einfach strukturiert. Sie werden vom <TABLE>-Tageingeleitet und durch </TABLE> abgeschlossen. Mit <CAPTION>und </CAPTION> wird die Überschrift der Tabelle definiert. Dabei legt der Parameter ALIGN fest, ob die Überschrift über der Tabelle (ALIGN=TOP) oder unter der Tabelle (ALIGN=BOTTOM) steht.
Danach folgen die einzelnen Zeilen der Tabelle, die zwischen <TR> und</TR> stehen. Die einzelnen Felder (Spalten) der Tabelle werden in<TD> und </TD> eingeschlossen. Der Browser berechnetautomatisch die Maße der Tabellenfelder. Wird anstelle von TD der Tag TH verwendet, erscheint die Schrift im Feld fett.
Durch die Option BORDER=nn kann der Tabellenrand festgelegt werden; BORDER=1 versieht die Tabelle mit einem schmalen Rahmen, BORDER=0 zeichnet die Tabelle ohne Rand. Die beiden folgenden Tabelle werden eingegeben als:

                                        <TABLE BORDER=0>
                                        <CAPTION>Eine einfache Tabelle ohne Rahmen</CAPTION>
                                        <TR><TH></TH><TH>Spalte 1</TH><TH>Spalte 2</TH><TH>Spalte 3</TH></TR>
                                        <TR><TH>Zeile 1</TH><TD>Feld 1,1</TD><TD>Feld 2,1</TD><TD>Feld 3,1</TD></TR>
                                        <TR><TH>Zeile 2</TH><TD>Feld 1,2</TD><TD>Feld 2,2</TD><TD>Feld 3,2</TD></TR>
                                        </TABLE>
                                        <P>
                                        
                                        <TABLE BORDER=1>
                                        <CAPTION>Eine einfache Tabelle mit Rahmen</CAPTION>
                                        <TR><TH></TH><TH>Spalte 1</TH><TH>Spalte 2</TH><TH>Spalte 3</TH></TR>
                                        <TR><TH>Zeile 1</TH><TD>Feld 1,1</TD><TD>Feld 2,1</TD><TD>Feld 3,1</TD></TR>
                                        <TR><TH>Zeile 2</TH><TD>Feld 1,2</TD><TD>Feld 2,2</TD><TD>Feld 3,2</TD></TR>
                                        </TABLE>
                                        

Das sieht dann so aus:

Eine einfache Tabelle ohne Rahmen
Spalte 1Spalte 2Spalte 3
Zeile 1Feld 1,1Feld 2,1Feld 3,1
Zeile 2Feld 1,2Feld 2,2Feld 3,2

Eine einfache Tabelle mit Rahmen
Spalte 1Spalte 2Spalte 3
Zeile 1Feld 1,1Feld 2,1Feld 3,1
Zeile 2Feld 1,2Feld 2,2Feld 3,2

Man kann Spalten auch über mehrere Zeilen ziehen oder eine Zeile über mehrere Spalten. Der Quelltext:

                                        <TABLE BORDER=1>
                                        <CAPTION>Tabelle mit gedehnten Zellen</CAPTION>
                                        <TR><TH></TH><TH COLSPAN=2>Spalte 1/2</TH><TH>Spalte 3</TH></TR>
                                        <TR><TH>Zeile 1</TH><TD>Feld 1,1</TD><TD ROWSPAN=2>Feld 2</TD><TD>Feld 3,1</TD></TR>
                                        <TR><TH>Zeile 2</TH><TD>Feld 1,2</TD><TD>Feld 3,2</TD></TR>
                                        </TABLE>
                                        

sieht dann folgendermaßen aus:

Tabelle mit gedehnten Zellen
Spalte 1/2Spalte 3
Zeile 1Feld 1,1Feld 2Feld 3,1
Zeile 2Feld 1,2Feld 3,2

Weitere Möglichkeiten bieten geschachtelte Tabellen.

Geschachtelte Tabelle mit gedehnten Zellen

Feld 1 steht auf der linken Seite und enthält einen Text der links an den danebenstehenden Tabellen vorbeifliesst. Mit dem Parameter WIDTH und einer Prozentangabe kann man festlegen, wie breit die Tabellenteile sein sollen. WIDTH erlaubt auch eine Angabe in Pixeln, aber dabei sollte man vorsichtig sein. Mit ALIGN=CENTER kann man erreichen, daß die Tabelleneinträge mittig liegen. Mit CELLPADDING=10 wird der Abstand zwischen Zelleninhalt und Zellenrahmen auf 10 Pixel festgelegt.
Eine einfache Tabelle (1) mit Rahmen
Spalte 1Spalte 2Spalte 3
Zeile 1Feld 1,1Feld 2,1Feld 3,1
Zeile 2Feld 1,2Feld 2,2Feld 3,2
Eine einfache Tabelle (2) mit Rahmen
Spalte 1Spalte 2Spalte 3
Zeile 1Feld 1,1Feld 2,1Feld 3,1
Zeile 2Feld 1,2Feld 2,2Feld 3,2
Eine einfache Tabelle (3) mit Rahmen
Spalte 1Spalte 2Spalte 3
Zeile 1Feld 1,1Feld 2,1Feld 3,1
Zeile 2Feld 1,2Feld 2,2Feld 3,2

Der TABLE-Tag kann noch weitere Parameter haben, die wichtigsten sollen hier aufgezählt werden:

  • Mit dem Parameter WIDTH und einer Prozentangabe kann man festlegen, wie breit die Tabelle sein soll. Die Angabe WIDTH="90%" würde beispielsweise dafür sorgen, daß die Tabelle nicht die volle Breite des Browserfensters einnimmt.
  • Mit ALIGN=CENTER kann man erreichen, daß die Tabelle mittig (bzw. links- oder rechtsbündig) liegt. Die Kombination von ALIGN=CENTER und WIDTH="90" würde dafür sorgen, daß links und rechts der Tabelle etwas Rand bleibt - was meist besser aussieht.
  • Die Optionen ALIGN=LEFT oder ALIGN=RIGHT ermöglichen es, den Text links oder rechts neben der Tabelle weiterlaufen zu lassen. Mit dem Tag <BR CLEAR=ALL> wird das Weiterlaufen des Textes unterhalb der Tabelle erzwungen.
  • Mit CELLPADDING wird der Abstand zwischen Zelleninhalt und Zellenrahmen in Pixel festgelegt. Man kann so dafür sorgen, daß der Text in der Tabelle nicht zu stark links und rechts am Rand "klebt".
  • Mit CELLSPACING verändern Sie den Abstand der Tabellenfelder zueinander. Es wird also der Abstand zweier benachbarter Felder (horizontal und Vertikal) festgelegt.
  • Mit BGCOLOR="#rrggbb" kann die Hintergrundfarbe der Tabelle festgelegt werden.

Besonders wichtig beim Gestalten von Tabellen sind die Parameter CELLPADDING und CELLSPACING im <TABLE>-Tag. Als Beispiel soll die folgende Tabelle verändert werden.

Eine einfache Tabelle ohne Rahmen
Spalte 1Spalte 2Spalte 3
Zeile 1Feld 1,1Feld 2,1Feld 3,1
Zeile 2Feld 1,2Feld 2,2Feld 3,2

  • CELLPADDING wird der Abstand zwischen Zelleninhalt und Zellenrahmen in Pixel festgelegt. Man kann so dafür sorgen, daß der Text in der Tabelle nicht zu stark links und rechts am Rand "klebt". Dazu die obige Tabelle mit CELLPADDING=10.

    Eine einfache Tabelle ohne Rahmen
    Spalte 1Spalte 2Spalte 3
    Zeile 1Feld 1,1Feld 2,1Feld 3,1
    Zeile 2Feld 1,2Feld 2,2Feld 3,2

  • CELLSPACING legt fest, wieviele Pixel die Zellenlinien breit sind. Es wird also der Abstand zweier benachbarter Felder (horizontal und Vertikal) festgelegt. Auch dazu die obige Tabelle mit CELLSPACING=10.

    Eine einfache Tabelle ohne Rahmen
    Spalte 1Spalte 2Spalte 3
    Zeile 1Feld 1,1Feld 2,1Feld 3,1
    Zeile 2Feld 1,2Feld 2,2Feld 3,2

Übrigens: Das geschützte Leerzeichen (&nbsp;) in einer leeren Zelle vermeidet, daß dieses Feld der Tabelle erhaben erscheint. Viele Browserversionen unterscheiden nämlich zwischen einer leeren Zelle und einer Zelle mit Inhalt.

Versieht man eine Tabelle ohne Rand (BORDER=0) mit einer Hintergrundfarbe, die nur ein Feld enthält, kann man einen Text farbig hinterlegen. Damit es gut aussieht, sollte man mit CELLPADDING für etwas Rand um den Text sorgen.

Tabellen kann man aber auch anders verwenden. Die folgende Tabelle hat nur ein Feld. Der Rand wurde mit BORDER=10 und CELLPADDING=10 passend verbreitert.

Man nehmen eine Tabelle mit nur einem Feld
und strukturiere den Text mit dem <BR>-Tag
und schon hat man ein 'Hinweisschild'.

Wenn man nun noch den Hintergrund mit <TD BGCOLOR="#FF0000"> einfärbt, erhält man:

Man nehmen eine Tabelle mit nur einem Feld
und strukturiere den Text mit dem <BR>-Tag
- schon hat man ein 'Hinweisschild'.
Mit BORDERCOLOR läßt sich
auch der Rahmen einfärben (nur MS IE).

Man kann mit Tabellen noch mehr anstellen. Der folgende Screenshot beschreibt einen Datenblock, wie er bei der Datenfernübertragung oder in Netzwerken vorkommt. Auch dieses scheinbar grafische Element ist eine Tabelle.

Der Quellcode lautet:

                                        <TABLE BORDER=1 Width="90%">
                                        <TR>
                                          <TD width="15%" align=center bgcolor="#B0FFB0"> Synchro-<BR>nisation</TD>
                                          <TD width="55%" align=center bgcolor="#00FFFF"> Datenblock</TD>
                                          <TD width="15%" align=center bgcolor="#FFBB77"> Block-<BR>sicherung</TD>
                                          <TD width="15%" align=center bgcolor="#CCCCCC"> Block-<BR>ende</TD>
                                        </TR>
                                        </TABLE>
                                        

Noch ein Beispiel, das wie gemalt aussieht:

Die Verbindungslinien sind Underline-Zeichen, der Rest wieder Tabellenelemente. Auch hier ist der Quelltext recht kurz:

                                        <table border="0" cellpadding="5" cellspacing="0">
                                        <tr>
                                          <td bgcolor="#00FFFF">Computer</td>
                                          <td>___<BR>&nbsp;</td>
                                          <td bgcolor="#00FF00">Modem</td>
                                          <td>_____<BR>&nbsp;</td>
                                          <td bgcolor="#FFFF00">&Ouml;ffentliches Telefonnetz</td>
                                          <td>_____<BR>&nbsp;</td>
                                          <td bgcolor="#00FF00">Modem</td>
                                          <td>___<BR>&nbsp;</td>
                                          <td bgcolor="#00FFFF">Computer</td>
                                        </tr>
                                        </table>
                                        

Oder wollen Sie mal ein paar Buttons ohne Grafikprogrann basteln? Bitte sehr:

Nummer 1
Nummer 2
Nummer 3
Nummer 4

Womit wir schon bei Attributen für die einzelnen Tabellenfelder sind. Neben anderen sind im TD- oder TH-Tag wichtig:

  • WIDTH gibt die Breite des Feldes an. Hier kann entweder eine absolute Zahlenangabe in Pixel stehen oder eine prozentuale Angabe (% der Gesamtbreite).
  • HEIGHT gibt die Höhe des Feldes an (in Pixeln oder in % der Höhe des Anzeigefensters).
  • ALIGN legt fest, wie der Text des Zelleninhaltes ausgerichtet wird. Hier sind die Werte LEFT, RIGHT und CENTER möglich.
  • VALIGN legt die vertikale Ausrichtung fest. Hier sind die Werte TOP, BOTTOM oder MIDDLE möglich.
  • BGCOLOR erlaubt das Färben des Zellenhintergrundes (wie mit der Farbtabelle gezeigt wurde).

Um alle Zellen einer Zeile gleich auszurichten, werden die ALIGN- oder VALIGN-Angaben im TR-Tag untergebracht. Nun ein Beispiel für die verschiedenen Möglichkeiten.

Spalte 1, links Spalte 2, zentriert Spalte 3, rechts
Zeile 1, TOP Feld 1,1 Feld 2,1
...
...
Feld 3,1
Zeile 2, BOTTOM Feld 1,2 Feld 2,2
...
...
Feld 3,2
Zeile 3, MIDDLE Feld 1,3 Feld 2,3
...
...
Feld 3,3

Spalte 1Spalte 2
Feld 1,1Feld 2,1
Feld 1,2Feld 2,2
Feld 1,3Feld 2,3
WIDTH und HEIGHT können übrigens auch im TABLE-Tag verwendet werden. Die Optionen ALIGN=LEFT oder ALIGN=RIGHT ermöglichen es, den Text links oder rechts neben der Tabelle weiterlaufen zu lassen. Mit dem Tag <BR CLEAR=ALL> wird das Weiterlaufen des Textes unterhalb der Tabelle erzwungen (wie es hier mit ALIGN=LEFT gezeigt wird). Mit HSPACE=5 im Table-Tab wird etwas Abstand zum Text erzeugt.

Auch Bilder lassen sich in Tabellen sauber ausrichten, wobei man den Rand wegläßt:

Emotikon
freundlich, aber doof
Emotikon
zustimmend freundlich
Emotikon
abweisend unfreundlich

Eine weitere Möglichkeit, Tabellen zu verwenden ist die gezielte Anordnung von Elementen. Bilder lassen sich beispielsweise in Tabellen sauber ausrichten, wobei man den Rand wegläßt: Das folgende Beispiel ist nicht etwa ein einziges Bild, sondern es setzt sich aus zwei Bildern und einem Textteil zusammen.

Immer zündende Ideen
mit der tollen Webseite
von den famosen Designern
der Firma Dings & Bums GmbH

Wenn man BORDER=1 setzt zeigt sich die Anordnung in der Tabelle (unten).

Immer zündende Ideen
mit der tollen Webseite
von den famosen Designern
der Firma Dings & Bums GmbH

Der Quelltext der Tabelle ist schon verzwickter:

                                        <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
                                        <TR><TD ROWSPAN=2 VALIGN=BOTTOM><IMG SRC="images/Zuendh1.jpg"></TD>
                                             <TD VALIGN=MIDDLE>Immer zündende Ideen<BR>
                                                  mit der tollen Webseite<BR>
                                                  von den famosen Designern<BR>
                                                  der Firma <B>Dings & Bums GmbH</B></TD></TR>
                                        <TR><TD VALIGN=BOTTOM><IMG SRC="images/Zuendh2.jpg"></TD></TR>
                                        </TABLE>
                                        

Bei älteren Netscape-Browsern kann es vorkommen, daß die Leerzeichen oder Zeilenvorschübe zwischen den einzelnen TD-Tags zu einem 1 Pixel breiten Zwischenraum führen. Wer sicher gehen will, hängt nach dem Testen alle Tags in einer langen Zeile hintereinander. Man sollte auch immer daran denken, daß die Browser zwar versuchen, aus dem HTML-Code etwas Vernünftiges zu erzeugen, aber auch dort gibt es Grenzen. Wenn die Tabellenspalten zu schmal gewählt werden, kann es vorkommen, daß Wörter willkürlich getrennt werden. Viele Konvertierprogramme geben eine Tabellenbreite in Pixeln vor, wobei der Wert abhängig von der gewählten Druckerauflösung und vom Zeichensatz berechnet wird. Hier ist auf jeden Fall Nacharbeit erforderlich.

Wenn Ihre Tabelle im Browser nicht so dargestellt wird, wie Sie sich das vorgestellt haben oder wenn der Browser die Tabelle überhaupt nicht zeigt, dann gehen Sie den Quellcode durch. Meist wurde nur ein schließendes Tag vergessen oder ein öffnendes Tag zweimal hingeschrieben. Da man Tabellen ineinander schachteln darf, führt sowas den Browser in die Irre.

DIPLOMARBEITEN UND BÜCHER

Diplomarbeiten zum Runterladen:

Suche im Katalog:
Architektur / Raumplanung
Betriebswirtschaft - Funktional
Erziehungswissenschaften
Geowissenschaften
Geschichtswissenschaften
Informatik
Kulturwissenschaften
Medien- und Kommunikationswissenschaften
Medizin
Psychologie
Physik
Rechtswissenschaft
Soziale Arbeit
Sozialwissenschaften


JOBS
HOME | E-LEARNING | SITEMAP | LOGIN AUTOREN | SUPPORT | FAQ | KONTAKT | IMPRESSUM
Virtual University in: Italiano - Français - English - Español
VirtualUniversity, WEB-SET Interactive GmbH, www.web-set.com, 6301 Zug

Partner:   Seminare7.de - PCopen.de - HTMLopen.de - WEB-SET.com - YesMMS.com - Ausbildung24.ch - Manager24.ch - Job und Karriere