Aus Wikibooks
Allgemein: Kommentieren - Korrigieren
Persönliches Menü: Benutzerseite - Diskussionsseite - Diskussionsseiten benutzen - Einstellungen - Beobachtungsliste - Eigene Beiträge - Anmelden - Privatsphäre - weitere Menüs
Gestalten: Wiki-Markup - Schrift - Überschriften - Hervorhebung - Farben - Gliederung - Rahmen
Tabellen: Tabellen - Kopf - Positionierung auf der Seite - Verschachtelte Tabellen
Innere Gestaltung von Tabellen: Ausrichtung - Zellen verbinden - Farbe - Schrift - Maße
Die Zellen einer Tabelle müssen nicht ausschließlich mit Text gefüllt sein. Auch Bilder und andere Tabellen können eine Tabelle füllen. Solche verschachtelten Tabellen sind vielseitig verwendbar.
- Tabellen belegen mitunter nur einen Teil der Seitenbreite, so dass die Breite des Fensters bzw. des Papiers schlecht ausgenutzt wird.
- Mitunter soll eine Tabelle oder ein Bild zur Illustration eines Textes dienen. Tabelle oder Bild neben dem Text zu platzieren dient der Übersicht.
- Es ist mitunter schwierig, Komponenten wie Tabellen, Bilder oder Textabschnitte auf eine gewünschte Weise auf der Seite anzuordnen. Je nach Breite des Browserfensters verrutschen die Komponenten auf eine kaum vorhersagbare Weise. Will man die Seite ausdrucken, kommen die Seitenumbrüche als unberechenbarer Faktor hinzu. Insbesonders Bilder werden oft vom dazugehörigen Text getrennt. Die Einbettung in eine Tabelle kann das Problem lösen.
| A |
{|{{prettytable}} |
Umfassende Tabelle |
| B |
| |
| 11 |
{| |
Beginn der ersten Tabelle |
| 12 |
|Z1S1||Z1S2 |
| 13 |
|- |
| 14 |
|Z2S1||Z2S2 |
| 15 |
|- |
| 16 |
|Z3S1||Z3S2 |
| 17 |
|} |
Ende der ersten Tabelle |
| C |
| |
| 21 |
{| border="2" |
Beginn der zweiten Tabelle |
| 22 |
|Z1S1||Z1S2 |
| 23 |
|- |
| 24 |
|Z2S1||Z2S2 |
| 25 |
|} |
Ende der zweiten Tabelle |
| D |
| |
| 31 |
{| border="1" |
Beginn des Feldes mit Bild |
| 32 |
|width="150px" |[[bild:Gimp-icon.png|40px]] |
Kästchen für das Bild 150px breit |
| 33 |
|} |
Ende des dritten Feldes |
| E |
| |
| 41 |
{| {{prettytable}} |
Beginn der Tabelle im vierten Feld |
| 42 |
|Z1S1||align="right" width="80px" |Z1S2 |
Z1S2 breiter und rechtsbündig |
| 43 |
|- |
| 44 |
|Z2S1||Z2S2 |
| 45 |
|} |
Ende des vierten Feldes |
| F |
| |
| 51 |
=== Text === |
| 52 |
Natürlich kann auch Text ... |
| G |
|} |
Hier endet die umfassende Tabelle |
So sieht es aus:
| Z1S1 |
Z1S2 |
| Z2S1 |
Z2S2 |
| Z3S1 |
Z3S2 |
|
|
|
Datei:Gimp-icon.png |
|
Natürlich kann auch Text in einem der Kästchen stehen. Verändern Sie mal die Breite des Fensters und sehen Sie, was passiert!
|
- Die mit den Buchstaben A bis G bezeichneten Zeilen gehören zur übergeordneten Tabelle, gewissermaßen zur "Infrastruktur".
- {{prettytable}} in der Zeile A betrifft den äußeren Rahmen und die Linien zwischen den fünf Feldern. Den Inhalt der Kästchen betrifft das nicht. Darum wurde in den Zeilen 21, 31 und 41 das Darstellung innerhalb der Felder festgelegt.
- In Zeile 32 wurde die Breite der Zelle festgelegt, damit neben dem Bild mehr Platz ist. Mit align="left" oder align="center" oder align="right" könnte die Position des Bildes festgelegt werden.
- In Zeile 42 sorgt das width="80px" dafür, dass die zweite Spalte breiter wird. align="right" verschiebt Z1S2 in dem breiten Kästchen nach rechts.
