Tabellen

Vorweggenommen - ich wollte die Tabellen etwas links liegen lassen. Wozu sollte ich Tabellen brauchen? Jedoch, dem war nicht so. Durch eine kurze Abhandlung über Tabellen wurde mir bewusst, dass man mit Tabellen schon alles Mögliche darstellen konnte. Nach einigem Herumspielen hatte ich dann eine Tabelle gemacht, die doch sehr gut in die Homepage-Seite passt.
Vermutlich kann man in jeder Tabellenzelle alle HTML-Befehle durchführen; sie stellt quasi eine eigene Seite im Kleinen dar.

Inhalt Beschreibung Links

Tabellen in der Tabelle

Zelle 1-1 Zelle 1-2
Zelle 2-1 Zelle 2-2
Texte in allen Farben, Formen und sogar Listen
  • Listenzeile 1
  • Listenzeile 2
Links
Der Beginn - Allgemeines
SELFHTML
Homepage

Insbesondere die Möglichkeit Tabellen in einer Tabellenzelle einzubinden erkärt, dass z.B. die Startseite von Yahoo ohne Frames auskommt.

Nun zur Theorie:

Eine Tabelle festlegen

Die Tabelle kann man nicht nur zur tabellarischen Darstellung verwenden, sondern auch um Schrift und Grafik am Bildschirm zu ordnen.
Um dem Browser mitzuteilen, dass eine Tabelle entstehen soll sind die Tags <table> und </table> notwendig. Zwischen diesen beiden wird dann die Tabelle (die Zeilen und Spalten) festgelegt.

Zuerst ein typisches Schema einer Tabelle und gleich unter Verwendung einer Tabelle (ganz schön unverfroren :-))): 

<table border>
   <tr>
      <th>Kopfzelle: 1. Zeile, 1. Spalte</th>
      <th>Kopfzelle: 1. Zeile, 2. Spalte</th>
   </tr>
   <tr>
      <td>Datenzelle: 2. Zeile, 1. Spalte</td>
      <td>Datenzelle: 2. Zeile, 2. Spalte</td>
   </tr>
   <tr>
      <td>Datenzelle: 3. Zeile, 1. Spalte</td>
      <td>Datenzelle: 3. Zeile, 2. Spalte</td>
   </tr>
</table>
<tr> leitet eine neue Tabellenzeile ein. Im Anschluß daran werden die Zellen (Spalten) der betreffenden Reihe mit <td> bzw. als Kopfzeile mit <th> definiert. Der Text in der Kopfzeile ist automatisch hervorgehoben und zentriert.
Die Anzahl der Spalten soll in jeder Zeile gleich sein. Festgelegt wird die Spaltenzahl durch die Anzahl in der 1. Zeile.
table = Tabelle, border = Rand,
tr = table row = Tabellenzeile,
th = table header = Tabellenkopf,
td = table data = Tabellendaten

Die abgestufte Darstellung wird durch den <pre>-Tag erzeugt.


Und so sieht die Tabelle aus

Kopfzelle: 1. Zeile, 1. Spalte Kopfzelle: 1. Zeile, 2. Spalte
Datenzelle: 2. Zeile, 1. Spalte Datenzelle: 2. Zeile, 2. Spalte
Datenzelle: 3. Zeile, 1. Spalte Datenzelle: 3. Zeile, 2. Spalte

In der ersten Zeile fixiert man die Spaltenzahl, die dann bei allen Zeilen gleich ist.
Um die Übersicht nicht zu verlieren, sollte man gleich bei der Erstellung der Tabelle Hinweiswörter einfügen, um dann die Stelle schneller zu finden. Sinnvoll ist auch die oben gezeigte eingerückte Schreibweise.
Leere Zellen sollte man mit <td> </td> (erzwungenes Leerzeichen) füllen, da sonst manchmal die Zelle als nicht vorhanden gedeutet wird.

Spalten vordefinieren

Der Browser muss bevor er die Tabelle darstellt die gesamte Tabelle lesen. Das erfordert Zeit in der nichts auf der Seite dargestellt wird. Das ist äußerst fad *:-))*! Dagegen gibt es aber was - einige Tags natürlich (wer hätte denn das gedacht, gilt aber nur für modernere Browser) und zwar den Befehl <colgroup>, der nach dem table-Tag eingefügt wird (colgroup = column group = Spaltengruppe).

Die erste Möglichkeit für verschieden große Spalten 
<table border>
     <colgroup>
        <col width=50>
        <col width=100>
        <col width=300>
     </colgroup>
    <tr>...............usw.
Diese Tabelle sieht dann so aus:

Spalte 50 Pixel breit Spalte 100 Pixel breit Spalte 300 Pixel breit


Für Tabellen mit gleicher Spaltenbreite geht man etwas anders vor (span = spannen). 
<table border>
     <colgroup width=150 span=3>
     </colgroup>
    <tr>...............usw.
Spalte 150 Pixel 150 Pixel auch

Anmerkung:Mit dem Tag width= kann man die Breite entweder als Pixel oder als Prozente angeben. Mit width=20% wird die Breite 20% des Browserfensters ausmachen. Eine dritte Möglichkeit ist eine verhältnismäßige Aufteilung; wozu man das aber brauchen kann entzieht sich meinen derzeitigen Wissen - *:-)*.

Etwas Wichtiges: der <col>-Tags hat keinen End-Tag, wogegen das </colgroup>-Endtag erlaubt ist.
Mit dem Attribut span= gibt man an, dass z.B. die Breite für mehrere Spalten gilt (Beispiel: <col span=12 width=13> = 12 Spalten mit 13 Pixel Breite werden dargestellt).
Man kann auch mehrere <colgroup>-Tags mit unterschiedlichen Angaben hintereinander stellen (Beispiel: <colgroup width=50 span=2> und <colgroup width=100 span=3> bedeutet, dass 5 Spalten dargestellt werden, wobei die ersten beiden 50 Pixel und die folgenden drei 100 Pixel breit sind).

Gitterdicke, Gitterlinien, Randabstand zum Gitter

a. Außenrahmen

Die Dicke des Außenrahmens kann mit dem Attribut border bestimmt werden. Das Attribut border ohne Angabe wird mit 1 Pixel interpretiert.

<table border=8>
  <tr>
      <td bgcolor="cccccc">
      </td>
...........u.s.w.
Der Außenrahmen ist 8 Pixel breit

Weiter gibt es noch eine Menge Regeln um den Außenrahmen teilweise oder an bestimmten Seiten darzustellen bzw. nicht darzustellen. Dazu wird das Attribut frame (Rahmen) verwendet. Dieses Attribut wird aber von älteren Browsern noch nicht interpretiert. Das frame - Attribut wird wie folgt verwendet:

<table border=2 frame=box>

Die Attribute Ein Beispiel:
frame=vsides nur der linke und rechte Rand

b. Gitternetzlinien

Ohne border gibt es keine Gitterlinien, d.h. border muss angegeben werden. Die Dicke der Gitterlinien der Gitterlinien erfolgt mit cellspacing=.. (Zellenaußmaße). 

<table border=8 cellspacing=8>
  <tr>
      <td bgcolor="cccccc">
      </td>
...........u.s.w.
Der Außenrahmen ist 8 Pixel breit
Die Breite des Gitters ist 8 Pixel


Einige zusätzliche Regeln, die sinnigerweise rules heißen gibt es auch hier.

Die Attribute Ein Beispiel:
rules=cols nur senkrechte Linien
2. Zeile - 1. Spalte 2. Zeile - 2. Spalte


Tabellenhöhe und -breite erzwingen

Man kann die Ausmaße einer Tabelle durch diverse Befehle festlegen, wobei dies nur soweit gilt als das Ausmaß des Textes oder der Grafik kleiner als die festgelegten Maße der Tabelle ist. Ist der Text oder die Grafik größer als die Tabelle wird die Zelle entsprechend ausgeweitet.

a. Ausmaß der ganzen Tabelle

<table border width=60% height=400>
   <!--hier folgt der Tabelleninhalt-->
</table>
Das Attribut width= im einleitenden Tag bewirkt, dass die Tabelle so breit anzeigt wie angegeben (width = Breite). Die Angabe kann, wie schon mehrmals festgehalten, als Zahl (Pixelanzahl) oder in Prozenten (der Gesamtbreite des Anzeigefensters)erfolgen.
Das Attribut height= bewirkt an und für sich das Gleiche wie bei der Breite, jedoch mit einem großen Unterschied. Mit einer entsprechend großen Zahl, z.B. 2000, erreicht man ein Tabellenhöhe die über das Anzeigefenster hinausgeht.

Anmerkung:Das Attribut height= ist im Gegensatz zu width= nicht HTML-Standard. Tabellenfähige Browser zeigen es aber richtig an.

b. Spaltenbreite festlegen

Vorweggenommen ist zu bemerken, dass die klarere und eindeutiger Vorgangsweise, die Tabellenbreite festzulegen, die Vordefinierung der Spalten mit dem Attribut <colgroup> und <col width=80>. Die nachfolgende Möglichkeit wird jedoch auch von alten Browsern dargestellt. 

<table border>
     <tr>
      <td width=300 >1. Zeile, 1.
      Spalte</td> <td>1. Zeile, 2.
    Spalte</td>
    </tr>
      <tr><td>2 Zeile, 1. Spalte</td>
      <td>2 Zeile, 2. Spalte</td>
     </tr>
</table>
Das Attribut width= im einleitenden Tag einer Datenzeile bewirkt, dass die Tabelle so breit anzeigt wie angegeben (Pixelzahl oder Prozente).
Die Angabe gilt über die gesamte Spalte und muss daher nur einmal angegeben werden.
In Kongurenz der hier beschriebenen Breitenangabe zur Angabe eine Gesamtbreite der Tabelle gewinnt Letztere.


b. Spaltenhöhe festlegen


<table border>
    <tr>
      <td height=100> 1. Zeile, 1. Spalte</td>
      <td>1. Zeile, 2. Spalte</td>
    </tr>
    <tr>
      <td height=50>2. Zeile, 1. Spalte</td>
      <td>2. Zeile, 2. Spalte</td>
    </tr>
</table>
Das Attribut height= im einleitenden Tag einer Datenzeile bewirkt, dass die Tabelle so hoch anzeigt wie angegeben (Pixelzahl oder Prozente).
Zum Unterschied der Breitenangaben muss für jede Zeile angegeben werden, wobei aber verschiedene Höhen möglich sind.

Anmerkung: Die beiden Attribute sind kombinierbar.

c. Zeilenumbruch verhindern

Den Zeilenumbruch in einer Zelle zuverhindern ist manchmal notwendig, wie z.B. wenn eine URL-Adresse komplett dargestellt werden soll. Diese Spalte wird dann entsprechend weit ausgelegt.

Hier ein Beispiel das über die Seitenbreite geht Mit dem Attribut nowrap wird bewirkt, dass keine Zeilenumbruch erfolgt. Die erste Spalte wird verkürzt. 

So sieht dann der Quelltext aus:

<table border>
    <tr>
      <th>Kopfzelle</th>
      <td nowrap>Datenzelle: Kein Textumbruch</td>
    </tr>
</table>
Anmerkung: Bein Testen stellte sich heraus, dass die erste Spalte bis zur Breite des längsten Wortes verkleinert wird. Ab da wird dann die zweite Spalte, bei entsprechender Länge des Textes, über den Fensterrand hinaus verlängert. Man muss mittels Schieber das Fenster verschieben.

Zelleninhalte plazieren

Da einige Attribute von vorherein festgelegt sind muss man, sofern gewünscht, die Attribute festlegen. So wird z.B. der Text ein Kopfzeile mittiggeschrieben; links- bzw rechtsbündig muss man extra eingeben

a. Waagrechte Ausrichtung

Kopfzeile: links Kopfzeile: normal Kopfzeile: rechts
Text links Text mittig Text rechts 

Und so wird das etwa gemacht (align = Ausrichtung):

<table border>
    <tr>
      <th align=left>Kopfzelle: weil mittig vorgegeben</th>
      <th>Kopfzelle: sowieso mittig</th>
      <th align=right>Kopfzelle: rechts</th>
    </tr>
    <tr>
      <td>Datenzelle: sowieso links</td>
      <td align=center>mittig</td>
      <td align=right>rechts</td>
    </tr>
</table>

b. Senkrechte Ausrichtung

Die Höhe einer Tabellenzeile richtet sich nach der Zelle mit dem meisten Text (der Text wird vollständig in der Zelle untergebracht). In den anderen Zellen wird der Text höhenmäßig zentriert. Da das nicht besonders ausschaut ist klar. Somit ist es möglich den Text oben- bzw, untenbündig festzulegen.

Datenzelle: Da kommt einmal viel sinnvoller Text hinein um den Text in die Länge zu ziehen :-)! Wenn es nicht genug ist dann machen wir noch was dazu. Text ohne Attribut Text mit valigne=top Text mit valign=botton


Das Schema erspar ich mir mal. Ich glaube wenn sie so weit mit meiner Homepage gekommen sind können sie das auch alleine. In jede Zeile setzen sie halt die Attribute valign=top oder valign=botton.
valign = vertical align = vertikale Ausrichtung, top = oben, bottom = unten, middle = mittig

Anmerkung: Das HTML 4.0 erlaubt einen neuen Befehl valign=baseline. Damit beginnen innerhalb einer Zeile die Texte jeder Zelle auf der gleichen Höhe.
Alle Zellen einer Zeile zusammen auszurichten erledigt man damit, dass man das Attribut valign=top gleich im <tr>-Tag unterbringt (<tr valign=top>).

c. Ausrichten nach einem Dezimalpunkt

Mit dem Attribut align=char und der Angabe des Dezimal-Zeichens mit char="," sollten sich die Zahlen an einem an gleicher Stelle stehenden Dezimalpunktes ausrichten (z. B. <col width=50 align=char char=",">).
Leider, trotz mehrmaliger Versuche macht es das nicht. Möglicherweise kann das der der MS Internet Explorer nicht darstellen.

Verbundene Zellen

Eine sehr interessandte Möglichkeit ist die Verbindung aneinanderliegenden Zellen. Die Trennungslinie wird entfernt und somit aus zwei oder mehreren Zellen wird eine einzige. Das kann man z. B. für eine gemeinsame Überschrift verwenden. Möglich ist das waagrecht oder senkrecht sowie auch in beide Richtungen.

Schachfelder sind
schwarz weiß
Die waagrechte Verbindung wird mit dem Attribut colspan=(Anzahl der Spalten) erreicht. Dieses Attribut wird im <td oder th>-Tag eingefügt.
colspan = column span = Spalten spannen


Schachfelder
sind		 weiß
schwarz
Die senkrechte Verbindung wird mit dem Attribut rowspan=(Anzahl der Spalten) erreicht. Dieses Attribut wird im <td oder th>-Tag eingefügt.
rowspan = Zeilen spannen


Ich probiere jetzt folgendes:
Ich will ein Bild darstellen, welches sich vergrößern läßt. Daneben soll der Titel des Bildes stehen und kleingedruckt die Anweisung "klicke aufs Bild". Weiters soll kein Rahmen sichtbar sein (blinde Tabelle).

Stadt Abends in einem italienischen Dorf
Klicke auf das Bild und es wird größer

Man Sieht es hat geklappt - und so wurde es gebastelt: 

<table>
   <tr>
      <td rowspan=2>
       <a href="Pix/italy-klein.jpg" target=_blank>
       <img SRC="Pix/italy-klein.jpg" height=181 width=250 border="1" alt="Stadt"></a>
      </td>
      <td>
       <font size="+1">Abends in einem italienischen Dorf</font>
      </td>
   </tr>
   <tr>
      <td valign="bottom">
       <font size="-1">Klicke auf das Bild und es wird größer</font>
      </td>
   </tr>
</table>
Also ich hab das nicht gleich durchschaut und damit es nicht noch irgendwen in der weiten Welt gibt dem es so geht wie mir versuche ich es noch mal zu erklären:
Also, Ausgangspunkt war eine Tabelle mit zwei Zeilen und zwei Spalten. Die beiden Zeilen erkennt man an den zwei <tr> Gruppen. Jede Zeile soll zwei Spalten haben - <td> Gruppen. In der ersten Zeile sind noch zwei Spalten vorhanden. Jedoch durch das Attribut rowspan=2 in der ersten Zeile, wurde die erste Spalte der zweiten Zeile beschlagnahmt, sodass für die zweite Zeile nur mehr die eine an der rechten Seite liegenden Spalte frei ist (nur mehr eine <td> Gruppe).
Anmerkung:Es ist nicht möglich Zellen so zu verbinden, dass z.B. eine L-förmige Fläche entsteht. Die verbundene Zelle muss immer ein Rechteck ergeben. .

Da mir Tabellen offensichtlich mehr Spass machen, als ich angenommen habe und sie für die Seitengestaltung viel bringen hab ich mich entschlossen diese ganze Zellenverbinderei in einer eigenen Seite zu erarbeiten.

Zur Zellenverbinderei

Farben

Über die Verwendung von Farben für Tabellen hab ich ja einiges in den vorigen Kapiteln vorweggenommen. Zwangsläufig, da ich diese Darstellung für die Erarbeitung der verbundenen Zellen ganz gut fand. Zusammenfassend werden jedoch die einzelnen Themen behandelt.

a. Hintergrundfarbe über die gesamte Tabelle

Das ist ganz einfach - im Einleitungs-Tag der Tabelle wird mit dem Attribut bgcolor die Farbe eingegeben.

<table border bgcolor=#CCFFCC>
bgcolor = background color = Hintergrundfarbe
Anmerkung: Aufpassen auf den ausreichenden Kontrast der Schriftfarbe. Bemerkenswet ist noch, dass bei Farbänderung in jeder Zelle die Farbe eigens angegeben werden muss. wieder so ein Beispiel, dass eine Zelle fast wie eine eigene Seite anzusehen ist.

b. Farbe für die Zelle und Zeile

Für alle Zellen einer Zeile wird das Attribut bgcolor in den einleitenden Tag der Zeile (<tr>) eingetragen.

<tr bgcolor=#AAAAAA> oder <tr bgcolor="AAAAAA">

Wenn man bgcolor= im einleitenden Tag irgendeiner Datenzelle (<td>) angeben, gilt nur die Hintergrundfarbe für diese eine Zelle.

<td bgcolor=#CCCCCC>

c. Hintergrundbilder

Nun, die funktionieren in gleicher Weise wie die Farben, nur dass das Attribut background="bild.gif" zum Einfügen eines Bildes verwendet wird.

c. Farben für den Rand und die Linien

Die Farben für den Rand und die Linien ist kein offizieller HTML-Befehl und funktionieren nur beim MS-Explorer.

Irgendetwas muss ich reinschreiben Vielleicht was vom Lessing
Kein Mensch muss müssen Das gilt auch für HTML :-))

<table border=2 bgcolor="#CCFFFF" bordercolor="#AA0000"></table>
Das Attribut bordercolor bewirkt, dass der Tabellenrand und die Gitterlinien eine Farbe haben. Der Rand kann verstärkt werden durch die Definition der "border"-Breite (border=2).

Eine Schattierung des Randes ist auch möglich.

Mir fällt nichts mehr ein Vielleicht später
...also lass ichs die Farben sind nett 

<table border=4 bgcolor=#CCAACC
           bordercolordark=#006600 bordercolorlight=#00CCCC>
    <tr>
      <td>Mir fällt nichts mehr ein</td>
      <td>Vielleicht später</td>
    </tr>
    <tr>
      <td>...also lass ichs</td>
      <td>die Farben sind nett</td>
    </tr>
</table>

bordercolor = Randfarbe
bordercolordark = dunkle Randfarbe
bordercolorlight = helle Randfarbe

Anmerkung:Also mit der Farbkennzeichnung bin ich mir nicht sicher. Mein HTML-Editor wirft das Attribut so aus: bgcolor="AAAAAA", auf der SELFHTML-Homepage sieht das anders aus: bgcolor=#AAAAAA und auf diese Art: bgcolor="#88AAEE" geht es auch. Da alle drei Arten funktionieren - solls mir auch recht sein. Falls jemand die richtigste Art weiß dann bitte ich um eine Nachricht.


Text und Tabelle

Hier geht es um den Text außerhalb der Tabelle. Einiges ist ident mit den Attributen, die man auch bei der Grafikeinbindung verwendet hat.

a. Über- bzw Unterschriften

Überschrift Unterschrift
Tabelleninhalt detto 

     <table border>
      <caption align=top>Überschrift</caption>
      <caption align=bottom><b>Unterschrift<</b>;/caption>
       <tr>
        <td>T-Inhalt</td>
        <td>T-Inhalt</td>
       </tr>
     </table>

(caption = Überschrift, align = Ausrichtung, top = oben, bottom = unten, left = links, right = rechts)
Mit <caption align=top> definiert man eine Tabellenüberschrift, mit <caption align=bottom> eine Tabellenunterschrift und mit <caption align=left oder right> eine seitliche Schrift. Wie man am Beispiel sieht, kann man den Befehl auch kombiniert eingeben; am Besten gleich nach dem table-Tag.
Eines noch! Falls diese Überschrift hervorgehoben sein soll muss dies eigens angegeben werden, also nicht wie üblicherweise bei Textüberschriften (siehe im Beispiel bei der Unterschrift).

b. Textfluss

Text rechts Text rechts
Um, wie bei Text und Grafik, den Text rechts oder links von der Tabelle vorbeifließen zu lassen muss man im table-Tag das Attribut aligne=right oder left einfügen. Mit dem Attribut aligne=center wird die Tabelle in der Mitte dargestellt, jedoch der Text fließt nich um die Tabelle sondern kommt erst nachfolgend.

Text links Abstand zur Tabelle
Zusätzlich zu dem aligne-Attribut kann man mit dem Attribut hspace=Pixel und vspace=Pixel den horizontalen und vertikalen Abstand festlegen. Dieses kennen wir auch von der Grafik her. Zu bemerken ist noch, dass obiges nicht HTML-Standard ist und vom IE 6,0 nicht dargestellt wird.
Den Textfluss unter der Tabelle erzwingen erreicht man mit dem bekannten Tag <br clear=all>, den man an der gewünschten Stelle des Textes einfügt.

Blinde Tabellen

Blinde Tabellen wurden bereits mehrmals dargestellt. Eigentlich ist es ja nichts anderes als dass keine Gittelinien sichbar sind. Das wird erreicht indem man das Attribut border im table-Tag weglässt.
Den Umstand, dass die Darstellung der Tabelle erst nach vollständigem Laden erfolgt, kann man durch Verdefinition der Spalten umgehen.
zum Absatz "Vordefinition"

Sie wollen einen dreispaltigen Text darstellen. NBa nichts leichter als das. Wer Gedichte veröffentlicht, wirft ein Rosenblatt in den Grand Canyon und wartet auf das Echo.
Donald Marquis (1878 - 1937) 		Dazu sollte man vorerst die Spaltenbreite auf jeweils 33% festlegen (<td width=33%>
Mit valign=top wird der Textbegin an der obersten Stelle erzwungen.
Mit <table cellpadding=5> erzwingt man den Abstand zwischen den Zellen bzw. den Texten.

Will man mehrspaltigen Text mit verschiedenen Absätzen und Überschriften muss man halt Tabellen mit mehreren Tabellenteilen einrichten. Gemeinsame Überschrifte über alle Textspalten macht man mit einer Tabellenzeile und dem Befehl colspan=3 (Anzahl der Spalten).
Grafike dürfen nicht breiter als die Spaltenbreite sein - sonst gibt es Aktion, da die Grafik den vorgegebenen Rahmen sprengt.

Mit einer Tabell die nur aus einer Zeile und einer Spalte besteht kann man, bei entsprechender Größe, einen Seitenrand erstellen. Damit die unsichtbare Tabelle unsichtbar bleibt, verzichtet man auf das Attribut border im table-Tag. Zentriert wird das ganze mit <div align=center>...</div> und die Weite der Tabelle mit ------ das sag ich jetzt aber nimmer ;-)!!!



Homepage