Hilfe:Tabellen: Unterschied zwischen den Versionen
K |
|||
(2 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
Zeile 177: | Zeile 177: | ||
<code><nowiki>|}</nowiki></code><br> | <code><nowiki>|}</nowiki></code><br> | ||
|} | |} | ||
− | ==Leere Zellen in Tabellen== | + | ===Leere Zellen in Tabellen=== |
Leere Zellen werden in einer Tabelle nicht umrahmt. Um trotzdem einen Rahmen zu bekommen, kann man ein geschütztes HTML-Leerzeichen <code> </code> setzen. So sieht eine Tabelle mit geschützten Leerzellen aus. | Leere Zellen werden in einer Tabelle nicht umrahmt. Um trotzdem einen Rahmen zu bekommen, kann man ein geschütztes HTML-Leerzeichen <code> </code> setzen. So sieht eine Tabelle mit geschützten Leerzellen aus. | ||
{| border="2" cellspacing="0" cellpadding="4" width="100%" rules="all" style="margin:1em 1em 1em 0; border:solid 1px #AAAAAA; border-collapse:collapse; background-color:#F9F9F9; font-size:95%; empty-cells:show;" | {| border="2" cellspacing="0" cellpadding="4" width="100%" rules="all" style="margin:1em 1em 1em 0; border:solid 1px #AAAAAA; border-collapse:collapse; background-color:#F9F9F9; font-size:95%; empty-cells:show;" | ||
Zeile 208: | Zeile 208: | ||
<code><nowiki>|}</nowiki></code><br> | <code><nowiki>|}</nowiki></code><br> | ||
|} | |} | ||
− | ==Verschachtelte Tabellen== | + | ===Verschachtelte Tabellen=== |
Das Verschachteln ist mit der neuen Wiki-Syntax denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf! Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus. | Das Verschachteln ist mit der neuen Wiki-Syntax denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf! Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus. | ||
{| border="2" cellspacing="0" cellpadding="4" width="100%" rules="all" style="margin:1em 1em 1em 0; border:solid 1px #AAAAAA; border-collapse:collapse; background-color:#F9F9F9; font-size:95%; empty-cells:show;" | {| border="2" cellspacing="0" cellpadding="4" width="100%" rules="all" style="margin:1em 1em 1em 0; border:solid 1px #AAAAAA; border-collapse:collapse; background-color:#F9F9F9; font-size:95%; empty-cells:show;" | ||
Zeile 262: | Zeile 262: | ||
<code><nowiki>|}</nowiki></code><br> | <code><nowiki>|}</nowiki></code><br> | ||
|} | |} | ||
+ | ==Formatierungen== | ||
+ | Farben, Ränder, Abstände und Spaltenbreiten können durch CSS-Styles vielfältig beeinflusst werden. Bevor man sich dazu entschließt, sollte man über die Notwendigkeit des Unterfangens nachgedacht haben. | ||
+ | ===Spaltenbreiten=== | ||
+ | Es gibt zwei Möglichkeiten, die Spaltenbreite in einer Tabelle anzugeben. Spaltenbreiten können relativ und absolut angegeben werden. Die Angabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll. | ||
+ | {| border="2" cellspacing="0" cellpadding="4" width="100%" rules="all" style="margin:1em 1em 1em 0; border:solid 1px #AAAAAA; border-collapse:collapse; background-color:#F9F9F9; font-size:95%; empty-cells:show;" | ||
+ | !width="40%"|So sieht es aus | ||
+ | !width="60%"|Das gibt man ein | ||
+ | |- | ||
+ | | style="background:#EEEEFF"| | ||
+ | {| border="1" | ||
+ | ! width="10%" | 10% | ||
+ | ! width="20%" | 20% | ||
+ | ! width="40%" | 40% | ||
+ | |- | ||
+ | |A | ||
+ | |B | ||
+ | |C | ||
+ | |} | ||
+ | | style="background:#EEEEEE"| | ||
+ | <code><nowiki>{| border="1"</nowiki></code><br> | ||
+ | <code><nowiki>! width="10%" | 10%</nowiki></code><br> | ||
+ | <code><nowiki>! width="20%" | 20%</nowiki></code><br> | ||
+ | <code><nowiki>! width="40%" | 40%</nowiki></code><br> | ||
+ | <code><nowiki>|-</nowiki></code><br> | ||
+ | <code><nowiki>|A</nowiki></code><br> | ||
+ | <code><nowiki>|B</nowiki></code><br> | ||
+ | <code><nowiki>|C</nowiki></code><br> | ||
+ | <code><nowiki>|}</nowiki></code><br> | ||
+ | |- | ||
+ | | style="background:#EEEEFF"| | ||
+ | {| border="1" | ||
+ | ! width="50" | 50 | ||
+ | ! width="100" | 100 | ||
+ | ! width="200" | 200 | ||
+ | |- | ||
+ | |A | ||
+ | |B | ||
+ | |C | ||
+ | |} | ||
+ | | style="background:#EEEEEE"| | ||
+ | <code><nowiki>{| border="1"</nowiki></code><br> | ||
+ | <code><nowiki>! width="50" | 50</nowiki></code><br> | ||
+ | <code><nowiki>! width="100" | 100</nowiki></code><br> | ||
+ | <code><nowiki>! width="200" | 200</nowiki></code><br> | ||
+ | <code><nowiki>|-</nowiki></code><br> | ||
+ | <code><nowiki>|A</nowiki></code><br> | ||
+ | <code><nowiki>|B</nowiki></code><br> | ||
+ | <code><nowiki>|C</nowiki></code><br> | ||
+ | <code><nowiki>|}</nowiki></code><br> | ||
+ | |- | ||
+ | |colspan="2"|Absolute Angaben in Pixeln sind eher bei Grafiken sinnvoll. | ||
+ | |} | ||
+ | ===Rahmen, ''cellspacing, cellpadding''=== | ||
+ | {| border="2" cellspacing="0" cellpadding="4" width="100%" rules="all" style="margin:1em 1em 1em 0; border:solid 1px #AAAAAA; border-collapse:collapse; background-color:#F9F9F9; font-size:95%; empty-cells:show;" | ||
+ | !width="40%"|So sieht es aus | ||
+ | !width="60%"|Das gibt man ein | ||
+ | |- | ||
+ | | style="background:#EEEEFF"| | ||
+ | {| | ||
+ | |Alpha || Beta || Gamma | ||
+ | |- | ||
+ | |Delta || Epsilon || Zeta | ||
+ | |} | ||
+ | | style="background:#EEEEEE"| | ||
+ | <code><nowiki>{|</nowiki></code><br> | ||
+ | <code><nowiki>|Alpha || Beta || Gamma</nowiki></code><br> | ||
+ | <code><nowiki>|-</nowiki></code><br> | ||
+ | <code><nowiki>|Delta || Epsilon || Zeta</nowiki></code><br> | ||
+ | <code><nowiki>|}</nowiki></code><br> | ||
+ | |- | ||
+ | | style="background:#EEEEFF"| | ||
+ | {| border="1" | ||
+ | |Alpha || Beta || Gamma | ||
+ | |- | ||
+ | |Delta || Epsilon || Zeta | ||
+ | |} | ||
+ | | style="background:#EEEEEE"| | ||
+ | <code><nowiki>{| border="1"</nowiki></code><br> | ||
+ | <code><nowiki>|Alpha || Beta || Gamma</nowiki></code><br> | ||
+ | <code><nowiki>|-</nowiki></code><br> | ||
+ | <code><nowiki>|Delta || Epsilon || Zeta</nowiki></code><br> | ||
+ | <code><nowiki>|}</nowiki></code><br> | ||
+ | |- | ||
+ | | style="background:#EEEEFF"| | ||
+ | {| border="1" cellspacing="5" cellpadding="0" | ||
+ | |Alpha || Beta || Gamma | ||
+ | |- | ||
+ | |Delta || Epsilon || Zeta | ||
+ | |} | ||
+ | | style="background:#EEEEEE"| | ||
+ | <code><nowiki>{| border="1" cellspacing="5" cellpadding="0"</nowiki></code><br> | ||
+ | <code><nowiki>|Alpha || Beta || Gamma</nowiki></code><br> | ||
+ | <code><nowiki>|-</nowiki></code><br> | ||
+ | <code><nowiki>|Delta || Epsilon || Zeta</nowiki></code><br> | ||
+ | <code><nowiki>|}</nowiki></code><br> | ||
+ | |- | ||
+ | | style="background:#EEEEFF"| | ||
+ | {| border="1" cellspacing="0" cellpadding="5" | ||
+ | |Alpha || Beta || Gamma | ||
+ | |- | ||
+ | |Delta || Epsilon || Zeta | ||
+ | |} | ||
+ | | style="background:#EEEEEE"| | ||
+ | <code><nowiki>{| border="1" cellspacing="0" cellpadding="5"</nowiki></code><br> | ||
+ | <code><nowiki>|Alpha || Beta || Gamma</nowiki></code><br> | ||
+ | <code><nowiki>|-</nowiki></code><br> | ||
+ | <code><nowiki>|Delta || Epsilon || Zeta</nowiki></code><br> | ||
+ | <code><nowiki>|}</nowiki></code><br> | ||
+ | |- | ||
+ | | style="background:#EEEEFF"| | ||
+ | {| border="1" cellspacing="5" cellpadding="5" | ||
+ | |Alpha || Beta || Gamma | ||
+ | |- | ||
+ | |Delta || Epsilon || Zeta | ||
+ | |} | ||
+ | | style="background:#EEEEEE"| | ||
+ | <code><nowiki>{| border="1" cellspacing="5" cellpadding="5"</nowiki></code><br> | ||
+ | <code><nowiki>|Alpha || Beta || Gamma</nowiki></code><br> | ||
+ | <code><nowiki>|-</nowiki></code><br> | ||
+ | <code><nowiki>|Delta || Epsilon || Zeta</nowiki></code><br> | ||
+ | <code><nowiki>|}</nowiki></code><br> | ||
+ | |- | ||
+ | | style="background:#EEEEFF"| | ||
+ | {| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" | ||
+ | |Alpha || Beta || Gamma | ||
+ | |- | ||
+ | |Delta || Epsilon || Zeta | ||
+ | |} | ||
+ | | style="background:#EEEEEE"| | ||
+ | <code><nowiki>{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;"</nowiki></code><br> | ||
+ | <code><nowiki>|Alpha || Beta || Gamma</nowiki></code><br> | ||
+ | <code><nowiki>|-</nowiki></code><br> | ||
+ | <code><nowiki>|Delta || Epsilon || Zeta</nowiki></code><br> | ||
+ | <code><nowiki>|}</nowiki></code><br> | ||
+ | |- | ||
+ | | colspan="2"|<code>cellspacing</code> beschreibt den Zwischenraum zwischen zwei Zellen. <code>cellpadding</code> beschreibt den Textabstand zum Rahmen der Zelle. Die Werte hinter den Atributen, können je nach Geschmack variiert werden. | ||
+ | |} | ||
+ | ===Ausrichtung=== | ||
+ | Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Das <code>valign</code> gilt jeweils für die ganze Zeile, das <code>align</code> nur für die jeweilige Zelle. | ||
+ | {| border="2" cellspacing="0" cellpadding="4" width="100%" rules="all" style="margin:1em 1em 1em 0; border:solid 1px #AAAAAA; border-collapse:collapse; background-color:#F9F9F9; font-size:95%; empty-cells:show;" | ||
+ | !width="40%"|So sieht es aus | ||
+ | !width="60%"|Das gibt man ein | ||
+ | |- | ||
+ | | style="background:#EEEEFF"| | ||
+ | {| border="1" cellspacing="0" | ||
+ | ! | ||
+ | ! align="left" | Links | ||
+ | ! align="center" | Zentriert | ||
+ | ! align="right" | Rechts | ||
+ | |- valign="top" | ||
+ | ! height="38" | Oben | ||
+ | | align="left" | x || align="center" | x || align="right" | x | ||
+ | |- valign="middle" | ||
+ | ! height="38" | Mitte | ||
+ | | align="left" | x || align="center" | x || align="right" | x | ||
+ | |- valign="bottom" | ||
+ | ! height="38" | Unten | ||
+ | | align="left" | x || align="center" | x || align="right" | x | ||
+ | |} | ||
+ | | style="background:#EEEEEE"| | ||
+ | <code><nowiki>{| border="1" cellspacing="0"</nowiki></code><br> | ||
+ | <code><nowiki>!</nowiki></code><br> | ||
+ | <code><nowiki>! align="left" | Links</nowiki></code><br> | ||
+ | <code><nowiki>! align="center" | Zentriert</nowiki></code><br> | ||
+ | <code><nowiki>! align="right" | Rechts</nowiki></code><br> | ||
+ | <code><nowiki>|- valign="top"</nowiki></code><br> | ||
+ | <code><nowiki>! height="38" | Oben</nowiki></code><br> | ||
+ | <code><nowiki>| align="left" | x || align="center" | x || align="right" | x</nowiki></code><br> | ||
+ | <code><nowiki>|- valign="middle"</nowiki></code><br> | ||
+ | <code><nowiki>! height="38" | Mitte</nowiki></code><br> | ||
+ | <code><nowiki>| align="left" | x || align="center" | x || align="right" | x</nowiki></code><br> | ||
+ | <code><nowiki>|- valign="bottom"</nowiki></code><br> | ||
+ | <code><nowiki>! height="38" | Unten</nowiki></code><br> | ||
+ | <code><nowiki>| align="left" | x || align="center" | x || align="right" | x</nowiki></code><br> | ||
+ | <code><nowiki>|}</nowiki></code><br> | ||
+ | |} | ||
+ | Es gibt natürlich noch viele andere Formatierungsmöglichkeiten für Tabellen. An dieser Stelle konnten jedoch nur die wichtigsten genannt werden.<br> | ||
+ | -- [[Benutzer:John Scott|Jonathan Michael Scott]] 12:35, 9. Feb 2006 (CET) | ||
+ | [[Kategorie:Hilfe]] |
Aktuelle Version vom 9. Februar 2006, 11:35 Uhr
Handbuch zur ÖSF Datenbank |
---|
|
Inhaltsverzeichnis
Einleitung
Tabellen sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten. Jedoch sollte man Tabellen nicht als grafisches Gestaltungsmittel einsetzen, sondern nur dann benutzen, wenn zwischen Tabellenzellen und ihren Zeilen und Spalten semantische Beziehungen bestehen. Sie dienen beispielsweise dann ihrem Zweck, wenn die Informationen in gewisser Weise sortiert werden können, nach Jahreszahlen oder mit alphabetischer Anordnung.
Jede Tabelle beginnt mit einer geschweiften Klammer {
gefolgt von einem senkrechten Strich |
und endet mit einem Strich |
gefolgt von einer geschweiften Klammer }
. Die öffnende Klammer muss als erstes Zeichen der Zeile stehen.
Eine neue Tabellenzeile wird mit |-
erzeugt. Innerhalb jeder Zeile können beliebig viele Zellen stehen. Eine Zelle wird mit einem senkrechten Strich am Zeilenanfang |
eingeleitet.
Mit zwei senkrechten Strichen ||
können mehrere Zellen in einer Textzeile zusammengeschrieben werden.
Einfache Tabellen
So sieht es aus | Das gibt man ein | ||
---|---|---|---|
|
| ||
{| |Einzelzelle |} funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil.
|
Tabellen mit mehreren Tabbellenzeilen
Natürlich benötigt man hauptsächlich Tabellen mit mehreren (Tabellen-)Zeilen. Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter dem senkrechten Strich einen waagrechten - setzt. Dies lässt sich beliebig oft wiederholen.
So sieht es aus | Das gibt man ein | ||||||
---|---|---|---|---|---|---|---|
|
| ||||||
Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit || trennen. Eine dreizeilige Tabelle würde dann so ausschauen.
| |||||||
|
| ||||||
Welche der beiden Möglichkeiten angewendet werden, bleibt letztlich dem Autor überlassen. Funktionieren tuen beide gleich gut und es mach im Ergebniss auch keinen Unterschied. |
Tabellen im Schreibmaschinenstil ohne Formatierungen
Die einfachste und schnellste WikiWiki-Art, eine Tabelle zu erstellen, ist der Schreibmaschinenstil. Dazu stellt man jeder Tabellenzeile ein Leerzeichen voran. Spalten und Layout werden visuell im Bearbeitungsmodus angepasst. Das Ergebnis entspricht anschließend genau der Ansicht im Bearbeitungsmodus. Dabei sollte bedacht werden, dass diese Formatierung auf PDAs etc. ärgerlich sein kann.
Beispiel und Ergebnis:
Klimatabelle Monat JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ ----------------------------------------------------------------------- Ø Tagestemperatur °C 21 21 22 23 24 25 27 29 28 26 24 22 Ø Nachttemperatur °C 15 15 15 16 17 18 20 21 20 19 18 16 Ø Sonnenstunden pro Tag 6 6 7 8 9 9 9 9 8 7 6 5 Ø Regentage/Monat 6 4 3 2 2 1 0 0 2 5 6 7 Ø Wassertemperatur °C 19 18 18 18 19 20 21 22 23 23 21 20
Komplexere Tabellen
Rahmen
Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile, direkt hinter dem {|
festgelegt. Momentan kann nur die Rahmenstärke festgelegt werden, mit dem Argument: border="1"
, wobei 1
die Stärke des Rahmens ist. Das Beispiel mit den drei Tabbellenzeilen sieht mit Rhamen wie folgt aus.
So sieht es aus | Das gibt man ein | ||||||
---|---|---|---|---|---|---|---|
|
|
Titelzeilen
Eine Tabelle mit Titelzeile erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit !
statt |
eingeleitet werden. Das würde dann so aussehen.
So sieht es aus | Das gibt man ein | ||||||||
---|---|---|---|---|---|---|---|---|---|
|
|
Rowspanning und Colspanning
Auch mit der neuen Wiki-Syntax ist es genauso wie bei HTML möglich eine Zelle über mehrere Zeilen oder Spalten reichen zu lassen, ein so genanntes rowspan bzw. colspan. Rowspan- und colspan-Angaben werden der Zelle als Attribute mitgegeben, und zwar nach dem Prinzip. | Attribute | Inhalt
So sieht es aus | Das gibt man ein | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
| |||||||||
|
|
Leere Zellen in Tabellen
Leere Zellen werden in einer Tabelle nicht umrahmt. Um trotzdem einen Rahmen zu bekommen, kann man ein geschütztes HTML-Leerzeichen
setzen. So sieht eine Tabelle mit geschützten Leerzellen aus.
So sieht es aus | Das gibt man ein | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
Verschachtelte Tabellen
Das Verschachteln ist mit der neuen Wiki-Syntax denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf! Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus.
So sieht es aus | Das gibt man ein | |||||
---|---|---|---|---|---|---|
|
|
Beschriftungen
Mit der neuen Wiki-Syntax ist es leicht möglich, eine Beschriftung über der Tabelle anzugeben. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischem Zeilenumbruch. Um eine Beschriftung einzubauen reicht es, nach dem senkrechten Strich und vor dem Text ein Plus +
zu setzen. Innerhalb der Beschriftung kann man ganz normal mit der Wiki-Syntax formatieren.
So sieht es aus | Das gibt man ein | ||||
---|---|---|---|---|---|
|
|
Formatierungen
Farben, Ränder, Abstände und Spaltenbreiten können durch CSS-Styles vielfältig beeinflusst werden. Bevor man sich dazu entschließt, sollte man über die Notwendigkeit des Unterfangens nachgedacht haben.
Spaltenbreiten
Es gibt zwei Möglichkeiten, die Spaltenbreite in einer Tabelle anzugeben. Spaltenbreiten können relativ und absolut angegeben werden. Die Angabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.
So sieht es aus | Das gibt man ein | ||||||
---|---|---|---|---|---|---|---|
|
| ||||||
|
| ||||||
Absolute Angaben in Pixeln sind eher bei Grafiken sinnvoll. |
Rahmen, cellspacing, cellpadding
So sieht es aus | Das gibt man ein | ||||||
---|---|---|---|---|---|---|---|
|
| ||||||
|
| ||||||
|
| ||||||
|
| ||||||
|
| ||||||
|
| ||||||
cellspacing beschreibt den Zwischenraum zwischen zwei Zellen. cellpadding beschreibt den Textabstand zum Rahmen der Zelle. Die Werte hinter den Atributen, können je nach Geschmack variiert werden.
|
Ausrichtung
Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Das valign
gilt jeweils für die ganze Zeile, das align
nur für die jeweilige Zelle.
So sieht es aus | Das gibt man ein | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
Es gibt natürlich noch viele andere Formatierungsmöglichkeiten für Tabellen. An dieser Stelle konnten jedoch nur die wichtigsten genannt werden.
-- Jonathan Michael Scott 12:35, 9. Feb 2006 (CET)