Inhalt | Beschreibung | Links | ||||
Tabellen in der Tabelle
|
Texte in allen Farben, Formen und sogar Listen
|
Links
Der Beginn - Allgemeines
SELFHTML ![]() |
<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. |
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 |
<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 |
<table border> <colgroup width=150 span=3> </colgroup> <tr>...............usw.
Spalte 150 Pixel | 150 Pixel | auch |
<table border=8> <tr> <td bgcolor="cccccc"> </td> ...........u.s.w. |
Der Außenrahmen ist 8 Pixel breit |
frame=vsides | nur der linke und rechte Rand |
<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 |
rules=cols | nur senkrechte Linien |
2. Zeile - 1. Spalte | 2. Zeile - 2. Spalte |
<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. |
<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. |
<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. |
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>
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>
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 |
|
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 |
|
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 |
![]() |
Abends in einem italienischen Dorf |
Klicke auf das Bild und es wird größer |
<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:
Irgendetwas muss ich reinschreiben | Vielleicht was vom Lessing |
Kein Mensch muss müssen | Das gilt auch für HTML :-)) |
|
<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> |
|
<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> |
Text rechts | Text rechts |
Text links | Abstand zur Tabelle |
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. |
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 ;-)!!! |