Seitenanfang
_Tabellen_



Einfache Tabelle
Tabellenrahmen und Rahmenfarbe
Tabellengröße
Textausrichtung
Tabellenhintergrundfarbe
Hintergrundbild
Tabellenzellen verbinden
Tabellen verschachteln



Einfache Tabelle


Für eine Tabelle benötigt man 3 Tagpaare. Das Tagpaar <table>...</table> beinhaltet die gesamte Tabelle, das Tagpaar <tr>...</tr> umschließt eine Zellenreihe und das Tagpaar <td>...</td> die einzelne Zelle.

Für eine Tabelle mit 2 Reihen mit jeweils drei Zellen sieht das so aus:

TagBeispielführt zuErgebnis
<table>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<table>
<table>
<tr>
<td>Zelle A 1</td>
<td>Zelle A 2</td>
<td>Zelle A 3</td>
</tr>
<tr>
<td>Zelle B 1</td>
<td>Zelle B 2</td>
<td>Zelle B 3</td>
</tr>
<table>
--------->
Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3

Schreibt man die Tags untereinander, wie oben gezeigt, ist das zwar schön übersichtlich, führt bei Tellico jedoch dazu, dass je nach Anzahl der Zellen und Zellenreihen, mehr oder weniger große Leerräume entstehen, da Tellico jeden Zeilenumbruch übernimmt und erst ganz zum Schluss die gesamte Tabelle anzeigt.
Um die Leerräume zu vermeiden, müssen die Tags hintereinander geschrieben werden.

Seitenanfang


Tabellenrahmen und Rahmenfarbe

Will man einen Rahmen um die Tabelle ziehen und die Zellen sichtbar machen, fügt man in den einleitenden Tabellentag border="Rahmendicke" und für die Farbe bordercolor="Farbwert".

Für einen Rahmen mit der Dicke von 5 Pixel und der Farbe Schwarz sieht das so aus:

<table border="5" bordercolor="#000000">

Auf die oben gezeigte Beispieltabelle wirkt sich das so aus:

Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3

Um einen Abstand des Tabellen-(Zellen-)inhaltes zur Tabellen-(Zellen)wand zu erreichen, erweitert man den einleitenden Tabellentag um cellpadding="Pixelwert"

Für einen Abstand von 8 Pixel sieht das so aus:

<table border="5" bordercolor="#000000" cellpadding="8"> Damit verändert sich die Beispieltabelle so:

Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3

Seitenanfang


Tabellengröße

Gibt man keine Werte für die Größe der Tabelle an, so ist die Tabelle immer genauso groß, wie es für den Zelleninhalt gerade notwendig ist.

Um die Breite der Tabelle zu verändern erweitert man einleitenden Tabellentag mit width="Pixelwert" für eine feste Breite oder mit width="Wert%" für eine Breite in % zum Fenster.
Um die Höhe zu verändern erweitert man einleitenden Tabellentag mit height="Pixelwert"

Für einen Breite von 500 Pixel und einer Höhe von 200 Pixel sieht das so aus:

<table width="500" height="200" border="5" bordercolor="#000000" cellpadding="8"> Damit verändert sich die Beispieltabelle so:

Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3

Seitenanfang


Textausrichtung

Für die Ausrichtung in der Horizontalen erweitert man den einleitenden Zellentag
  • <td align="left"> ---> links
  • <td align="center"> ---> mitte
  • <td align="right"> ---> rechts
Für die Ausrichtung in der Vertikalen erweitert man den einleitenden Zellentag
  • <td valign="top"> ---> oben
  • <td valign="middle"> ---> mittig
  • <td valign="bottom"> ---> unten
Soll der Text in der Beispieltabelle in der ersten Zelle rechts oben stehen, so sieht der einleitende Zellentag der ersten Zelle so aus:

<td align="right" valign="top"> und sieht dann so aus:

Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3

soll es für die ganze Zellenreihe gelten, erweitert man entsprechend den einleitenden Tabellenreihentag <tr...>

Seitenanfang


Tabellenhintergrundfarbe

Um die Hintergrundfarbe der Tabelle zu verändern erweitert man einleitenden Tabellentag mit bgcolor="#Farbwert" also <table bgcolor="#Farbwert">

Um die Hintergrundfarbe der Zellenreihe zu verändern erweitert man einleitenden Zellenreihentag mit bgcolor="#Farbwert" also <tr bgcolor="#Farbwert">

Um die Hintergrundfarbe der Zelle zu verändern erweitert man einleitenden Zellentag mit bgcolor="#Farbwert" also <td bgcolor="#Farbwert">

Hier nun ein Beispiel aus den gemischten Möglichkeiten:

<table bgcolor="#FFFF66" width="500" height="200" border="5" bordercolor="#000000">
<tr>
<td>Zelle A 1</td>
<td>Zelle A 2</td>
<td>Zelle A 3</td>
</tr>
<tr bgcolor="#33FF33">
<td>Zelle B 1</td>
<td>Zelle B 2</td>
<td bgcolor="#FF33DD">Zelle B 3</td>
</tr>
</table>


ergibt folgende Tabelle

Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3

Seitenanfang


Hintergrundbild

Möchte man ein Bild als Hintergrund benutzen, fügt man background="Pfadangabe" dem einleitenden Tag der Tabelle, der Tabellenreihe oder der Zelle hinzu. Hierzu nimmt man am Besten ein kleines Bildchen. Das Bildchen wird dann automatisch so oft nebeneinander und untereinander gelegt, bis der gesamte Hintergrund gefüllt ist.

Nimmt man z.B. das Bildchen smile.png, das bei KDE in /opt/kde3/share/emoticons/Default/ zu finden ist und will damit den Hintergrund der Zelle B2 in der Beispieltabelle füllen, so sieht der entsprechende einleitende Zellentag so aus:
<td background="/opt/kde3/share/emoticons/Default/smile.png">

Die Tabelle sieht dann so aus:

Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3

Voraussetzung dafür, dass auch tatsächlich jetz in der Zelle B2 Smileys als Hintergrund zu sehen sind, ist natürlich, dass KDE auf dem Computer installiert ist und dass der Verzeichnispfad auch übereinstimmt und das Bildchen auch vorhanden ist.

Seitenanfang


Tabellenzellen verbinden

Um Zellen einer Tabelle innerhalb einer Zellenreihe zu verbinden, erweitert man den einleitenden Zellentag der Zelle, die mehrere andere Zellen überspannen soll, mit colspan="Zellenanzahl" also z.B. für drei Zellen <td colspan="3">

In diesem Beispiel sieht das dann so aus:

<table bgcolor="#FFFF66" width="500" height ="200" border="5" bordercolor="#000000">
<tr>
<td colspan="3">Zelle A 1</td>
</tr>
<tr bgcolor="#33FF33">
<td>Zelle B 1</td>
<td>Zelle B 2</td>
<td bgcolor="#FF33DD">Zelle B 3</td>
</tr>
</table>


Das Ergebnis:

Zelle A 1
Zelle B 1Zelle B 2Zelle B 3

das gleiche geht natürlich auch vertikal, dann aber mit rowspan="Zellenanzahl" also z.B. für zwei Zellen <td rowspan="2">

In diesem Beispiel sieht das dann so aus:

Zelle A 1 + B 1Zelle A 2Zelle A 3
Zelle B 2Zelle B 3

Seitenanfang


Tabellen verschachteln

Natürlich kann man auch Tabellen in Tabellenzellen erstellen in dem man die Tabelle innerhalb des Zellen-Tagpaares platziert, also ...<td><table>...</table></td>...

Hier ein Beispiel mit der Beispieltabelle in drei Zellen:

Zelle A 1
Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3
Zelle A 3
Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3
Zelle B 2
Zelle A 1Zelle A 2Zelle A 3
Zelle B 1Zelle B 2Zelle B 3

Seitenanfang


zurück
Inhaltsverzeichnis
Tellico Bedienungsanleitung

weiter
Erstellt von: Gerhard Czech Linux kleine Helfer© Copyright siehe: Copyright
Zur StartseiteHowto/AnleitungenTellico Downloadseite