Wikipedia

Benutzer:NeonZero/internes/Tabellen

< Benutzer:NeonZero | internes
  Benutzer   Artikel   Bewertung   internes
Hilfeseiten - Umgang mit der Wikipedia und der MediaWiki-Software
  Text formatieren   Farben   Tabellen   Wiki-Regelwerk & Tipps   Links   Sonstiges  

Technische Grundlagen

Bearbeiten

→ Hauptseite: Hilfe:Tabellen

Grundlagen zum Aufbau einer Tabelle:

  1. Eröffnet wird eine Tabelle mit einem {| und geschlossen mit einem |}.
  2. Dazwischen liegen die Separatoren je Tabellen-Zeile (|-) mit den dazu gehörenden Spalten (|). Der erste Zeilenseparator kann weggelassen werden. Hier ein Beispielcode:
{|
| Inhalt von Zeile 1, Spalte 1
| Inhalt von Zeile 1, Spalte 2
|-
| Inhalt von Zeile 2, Spalte 1
| Inhalt von Zeile 2, Spalte 2
|-
| Inhalt von Zeile 3, Spalte 1 || Spalte 2 (Kurzschreibweise)
|}

Allgemeines zu den Formatierungs-Attributen:

Es lassen sich neben den Tabellen-Attributen (beispielswesie cellspacing für den Abstand der Zellen) auch HTML-Attribute angeben, sowohl für die Tabelle als Ganzes als auch für einzelne Zellen. Insbesondere kann das Universal-Attribut style verwendet werden, wodurch sich beliebige CSS-Formatierungen umsetzen lassen.

Grundlagen zur Formatierung einer Tabelle:

  2. Die globale Formatierung wird im Tabellenkopf vorgenommen. Was dort festgelegt wird, gilt für alle Zellen, die keine separate Formatierung erhalten.
{| <Formatierung>
  2. Einzelne Zeilen einer Tabelle lassen sich bei Bedarf im Zeilenkopf separat formatieren.
|- <Formatierung>
  2. Die separate Formatierung einzelner Spalten ist etwas weniger intuitiv. So lassen sich in der Kurzschreibweise zwar mehrere Spalten ohne Verwendung eines Zeilenumbruchs hintereinander weg füllen, jedoch läßt sich darüber nur die jeweils erste Spalte formatieren:
| <Formatierung> | Inhalt von Spalte 1 || Inhalt von Spalte 2 || Inhalt von Spalte 3
Sollen beispielsweise Spalte 1 und 3 eine spezielle Formatierung erhalten, so muss die Kurzschreibweise dafür unterbrochen werden:
| <Formatierung> | Inhalt von Spalte 1 || Inhalt von Spalte 2 (die Formatierung der Spalte 2 bleibt dabei unberührt)
| <Formatierung> | Inhalt von Spalte 3

Beispiele

Bearbeiten
So wird die Tabelle auf dem Bildschirm dargestellt: Das muss dafür eingegeben werden:
Zelle 1 Zelle 2 
{|
| Zelle 1
| Zelle 2
|}
Überschrift Überschrift Überschrift
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{|
|-
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel 1 || Beispiel 2 || Beispiel 3
|-
| Beispiel 4 || Beispiel 5 || Beispiel 6
|}
Überschrift Überschrift Überschrift
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{|
|- style="background: #AABBFF;"
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel 1 || Beispiel 2 || Beispiel 3
|-
| Beispiel 4 || Beispiel 5 || Beispiel 6
|}
Hinweis: #AABBFF ist ein Farbwert
Tabellen mit Rahmen:
Überschrift Überschrift Überschrift
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{| border="1" cellspacing="0"
|- style="background: #AABBFF;"
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel 1 || Beispiel 2 || Beispiel 3
|-
| Beispiel 4 || Beispiel 5 || Beispiel 6
|}
Überschrift Überschrift Überschrift
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{| border="1" cellspacing="0" cellpadding="5"
|- style="background: #AABBFF;"
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel 1 || Beispiel 2 || Beispiel 3
|-
| Beispiel 4 || Beispiel 5 || Beispiel 6
|}
Überschrift Überschrift Überschrift
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6
Beispiel 7 Beispiel 8 Beispiel 9 
{| border="1" cellspacing="0" cellpadding="5"
|- style="background: #AABBFF;"
! Überschrift !! Überschrift !! Überschrift
|- align="right"
| width="10%" | Beispiel 1
| width="30%" | Beispiel 2
| width="60%" | Beispiel 3
|- align="center"
| Beispiel 4 || Beispiel 5 || Beispiel 6
|- align="left"
| Beispiel 7 || Beispiel 8 || Beispiel 9
|}
Überschrift Überschrift Überschrift
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{| border="1" cellspacing="0" cellpadding="5"
|- style="background: #AABBFF;"
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel 1 || Beispiel 2 || Beispiel 3
|-
| Beispiel 4 
| style="background: #ABCDEF;" | Beispiel 5 || Beispiel 6
|}
Überschrift Überschrift Überschrift
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{| style="border: 1px #CCCCCC solid" cellspacing="0" cellpadding="5"
|- style="background: #AABBFF;"
! Überschrift !! Überschrift !! Überschrift
|-
| style="border: solid #CCCCCC; border-width: 0px 1px 1px 0px" | Beispiel 1
| style="border: solid #CCCCCC; border-width: 0px 1px 1px 0px" | Beispiel 2
| style="border: solid #CCCCCC; border-width: 0px 0px 1px 0px" | Beispiel 3
|-
| style="border: solid #CCCCCC; border-width: 0px 1px 0px 0px" | Beispiel 4
| style="border: solid #CCCCCC; border-width: 0px 1px 0px 0px" | Beispiel 5
| Beispiel 6
|}
Überschrift Überschrift Überschrift
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{| border="1" cellspacing="0" cellpadding="5"
|- style="background: #AABBFF;"
! style="border-right: medium solid; border-bottom: medium solid;" | Überschrift 
! style="border-bottom: medium solid" | Überschrift 
! style="border-bottom: medium solid" | Überschrift
|-
| style="border-right: medium solid" | Beispiel 1 || Beispiel 2 || Beispiel 3
|-
| style="border-right: medium solid" | Beispiel 4 || Beispiel 5 || Beispiel 6
|}
Überschrift Überschrift Überschrift
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{| style="border: 1px solid #000000;"
|- style="background: #AABBFF;"
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel 1 || Beispiel 2 || Beispiel 3
|-
| Beispiel 4 || Beispiel 5 || Beispiel 6
|}
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{| cellspacing="0" cellpadding="5"
| style="border-right: solid 1px #000000;" | Beispiel 1 
| style="border-right: solid 1px #000000;" | Beispiel 2 || Beispiel 3
|-
| style="border-top: solid 1px #000000; border-right: solid 1px #000000;" | Beispiel 4
| style="border-top: solid 1px #000000; border-right: solid 1px #000000;" | Beispiel 5
| style="border-top: solid 1px #000000;" | Beispiel 6
|}
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{| cellspacing="0" cellpadding="5" style="border: 1px solid #000000;"
| style="border-right: solid 1px #000000;" | Beispiel 1 
| style="border-right: solid 1px #000000;" | Beispiel 2 || Beispiel 3
|-
| style="border-top: solid 1px #000000; border-right: solid 1px #000000;" | Beispiel 4
| style="border-top: solid 1px #000000; border-right: solid 1px #000000;" | Beispiel 5
| style="border-top: solid 1px #000000;" | Beispiel 6
|}
Beispiel 1 Beispiel 2 Beispiel 3
Beispiel 4 Beispiel 5 Beispiel 6 
{| cellspacing="0" cellpadding="5" style="border: 1px solid #000000; border-radius: 6px;"
| style="border-right: solid 1px #000000;" | Beispiel 1 
| style="border-right: solid 1px #000000;" | Beispiel 2 || Beispiel 3
|-
| style="border-top: solid 1px #000000; border-right: solid 1px #000000;" | Beispiel 4
| style="border-top: solid 1px #000000; border-right: solid 1px #000000;" | Beispiel 5
| style="border-top: solid 1px #000000;" | Beispiel 6
|}
37 ───► 12 1
0
0
1
0
0
1 		↕ 1
1
1
↑↑
  X   		73   X  
↓↓ 		►
7*3 ───► 21 ◄ 
{| cellspacing="0" cellpadding="5"
|- align="center"
| style="border: solid 1px #000000; border-radius: 6px;" | 37
| style="padding: 0px;" | <small>[[Primzahl|───►]]</small>
| style="border: solid 1px #000000; border-radius: 6px;" | 12
|
| rowspan="3" style="border: solid 1px #000000; border-radius: 6px; line-height: 0.9;" | [[Dualsystem|1<br>0<br>0<br>1<br>0<br>0<br>1]]
| rowspan="3" | <big><big>[[Palindrom|↕]]</big></big>
| rowspan="3" style="border: solid 1px #000000; border-radius: 6px; line-height: 0.9;" | [[Oktalsystem|1<br>1<br>1]]
|- align="center" style="line-height: 0.9;"
| style="padding: 0px;" | [[Spiegelzahl|<big><big>↑↑</big></big><br><big><big>&nbsp;&nbsp;X&nbsp;&nbsp;</big></big>]]
| style="padding: 10px; border: solid 1px #000000; border-radius: 23px; background: #FFCC00;" | <big>'''[[Dreiundsiebzig|73]]'''</big>
| style="padding: 2px;" | <big><big><u>&nbsp;&nbsp;[[Spiegelzahl|X]]&nbsp;&nbsp;</u></big></big><br><big><big>[[Spiegelzahl|↓↓]]</big></big>
| style="padding: 0px;" | <small>►</small>
|- align="center"
| style="border: solid 1px #000000; border-radius: 6px;" | 7*3
| style="padding: 0px;" | <small>[[Produkt (Mathematik)|───►]]</small>
| style="border: solid 1px #000000; border-radius: 6px;" | 21 
| style="padding: 0px;" | <small>[[Primzahl|◄]]</small>
|}
Tabellen mit übergreifenden Zeilen oder Spalten:
Überschrift Überschrift Überschrift
erste übergreifende Spalte
Beispiel 1 Beispiel 2 Beispiel 3
zweite übergreifende Spalte
Beispiel 4 Beispiel 5 Beispiel 6 
{| border="1" cellspacing="0" cellpadding="5"
|- style="background: #AABBFF;"
! Überschrift !! Überschrift !! Überschrift
|-
|- style="background: #E8E8E8;"
| colspan="3" |''erste übergreifende Spalte''
|-
| Beispiel 1 || Beispiel 2 || Beispiel 3
|- style="background: #E8E8E8;"
| colspan="3" |''zweite übergreifende Spalte''
|-
| Beispiel 4 || Beispiel 5 || Beispiel 6
|}

Hinweis: colspan="3" geht über drei Spalten;
         colspan="0" würde automatisch über alle Spalten gehen
führende Spalte A
B
C 
{| border="1" cellspacing="0" cellpadding="5"
| rowspan="3" style="background: #AABBFF;" | führende Spalte
| A
|-
| B
|-
| C
|}
A abschließende Spalte
B
C 
{| border="1" cellspacing="0" cellpadding="5"
| A
| rowspan="3" style="background: #AABBFF;" | abschließende Spalte
|-
| B
|-
| C
|}
Das Standardverhalten der Text-Ausrichtung beeinflussen:
A Text oben Text zentriert (Standard) Text unten
B
C 
{| border="1" cellspacing="0" cellpadding="5"
| A
| rowspan="3" style="background: #AABBFF;" valign="top"    | Text oben
| rowspan="3" style="background: #AABBFF;"                 | Text zentriert (Standard)
| rowspan="3" style="background: #AABBFF;" valign="bottom" | Text unten
|-
| B
|-
| C
|}
Mehrere Tabellen neben-, in- und übereinander:
links
Titel 1 Titel 2
Feld 1 Feld 2
rechts
Titel 1 Titel 2
Feld 1 Feld 2 
<div style="float: left; margin-right: 1em;">
{| border="1" cellspacing="0" cellpadding="5"
|+ style="background: #AABBFF;" | links
! Titel 1 || Titel 2
|-
| Feld 1 || Feld 2
|}
</div>

<div style="float: left;">
{| border="1" cellspacing="0" cellpadding="5"
|+ style="background: #AABBFF;" | rechts
! Titel 1 || Titel 2
|-
| Feld 1 || Feld 2
|}
</div>
erste Tabelle
Überschrift A1 Überschrift A2
Feld A1
zweite Tabelle im Feld A2
Überschrift B1 Überschrift B2
Feld B1 Feld B2 
{| border="1" cellspacing="0" cellpadding="5"
|+ style="background: #AABBFF;" | erste Tabelle
! Überschrift A1 || Überschrift A2
|-
| Feld A1
| <!-- in Feld A2 die zweite Tabelle einfügen: -->
{| border="1" cellspacing="0" cellpadding="5"
|+ style="background: #AABBFF;" | zweite Tabelle im Feld A2
! Überschrift B1 || Überschrift B2
|-
| Feld B1 || Feld B2
|} <!-- die zweite Tabelle schließen -->
|} <!-- die erste Tabelle schließen -->
erste Tabelle
Überschrift A1 Überschrift A2
Feld A1
zweite Tabelle nahtlos eingebettet
Überschrift B1 Überschrift B2
Feld B1 Feld B2 
{| border="1" cellspacing="0" cellpadding="5"
|+ style="background: #AABBFF;" | erste Tabelle
! Überschrift A1 || Überschrift A2
|-
| Feld A1
| style="padding: 0px;" | <!-- in Feld A2 die zweite Tabelle einfügen: -->
{| border="0" cellspacing="0" cellpadding="5" width="100%"
|+ style="background: #AABBFF;" | zweite Tabelle nahtlos eingebettet
! style="border-top: solid 1px #000000; border-right: solid 1px #000000;" | Überschrift B1
! style="border-top: solid 1px #000000;" | Überschrift B2
|-
| style="border-top: solid 1px #000000; border-right: solid 1px #000000;" | Feld B1
| style="border-top: solid 1px #000000;" | Feld B2
|} <!-- die zweite Tabelle schließen -->
|} <!-- die erste Tabelle schließen -->
erste Tabelle
Überschrift A1 Überschrift A2
Feld A1 Feld A2
zweite Tabelle unter Feld A2
Ein Beispiel mit abgerundeten Feldern:
X → Text Text Text
Y → Text Text Text 
{| border="1" cellspacing="0" cellpadding="5"
|+ style="background: #AABBFF;" | erste Tabelle
! Überschrift A1 || Überschrift A2
|-
| rowspan="2" | Feld A1
| Feld A2
|-
| style="padding: 0px;" | <!-- die zweite Tabelle nahtlos unter dem Feld A2 einfügen: -->
{| border="0" cellspacing="0" cellpadding="5" width="100%" style="background: #E8E8E8;"
|+ style="background: #AABBFF;" | zweite Tabelle unter Feld A2
| colspan="3" style="border-top: solid 1px #000000;" | Ein Beispiel mit abgerundeten Feldern:
|-
| align="center" style="background: #FFFFFF; border-top: solid 1px #000000; border-right: solid 1px #000000; border-bottom: solid 1px #000000; border-radius: 0px 6px 6px 0px;" | X 
| width="1" style="padding: 0px;" | →
| style="background: #FFFFFF; border-top: solid 1px #000000; border-left: solid 1px #000000; border-bottom: solid 1px #000000; border-radius: 6px 0px 0px 6px;" | Text Text Text
|-
|
|-
| align="center" style="background: #FFFFFF; border-top: solid 1px #000000; border-right: solid 1px #000000; border-bottom: solid 1px #000000; border-radius: 0px 6px 6px 0px;" | Y 
| width="1" style="padding: 0px;" | →
| style="background: #FFFFFF; border-top: solid 1px #000000; border-left: solid 1px #000000; border-bottom: solid 1px #000000; border-radius: 6px 0px 0px 6px;" | Text Text Text
|-
|
|} <!-- die zweite Tabelle schließen -->
|} <!-- die erste Tabelle schließen -->
a: 5em b: 10em c: 7em

zwei Tabellen mit gleichbreiten Spalten

a: 5em b: 10em c: 7em 
{| border="1" cellspacing="0" cellpadding="5"
|-
|style="width: 5em"| a: 5em
|style="width:10em"| b: 10em
|style="width: 7em"| c: 7em
|}

zwei Tabellen mit gleichbreiten Spalten

{| border="1" cellspacing="0" cellpadding="5"
|-
|style="width: 5em"| a: 5em
|style="width:10em"| b: 10em
|style="width: 7em"| c: 7em
|}
Tabellen mit Sortierfeldern (JavaScript erforderlich):
Spalte 1 Spalte 2 Spalte 3
12345 € 234,44 fghij
67890 € 77,55 abcde 
{| class="sortable"
! Spalte 1 !! Spalte 2 !! Spalte 3
|-
| 12345 || € 234,44 || fghij
|-
| 67890 || € 77,55  || abcde
|}

Hinweis: Ein Klick auf eine Spalte und die Tabelle wird danach sortiert.
Spalte 1 Spalte 2 Spalte 3
12345 € 234,44 fghij
67890 € 77,55 abcde 
{| class="sortable"
! Spalte 1 !! class="unsortable" | Spalte 2 !! Spalte 3  
|-
| 12345 || € 234,44 || fghij
|-
| 67890 || € 77,55  || abcde
|}

Hinweis: Die Sortiermöglichkeit wurde auf die Spalten 1 und 3 beschränkt.

Bugs

Bearbeiten

Darstellungsproblem: Width in Kombination mit Margin

Bearbeiten
ohne Margin Margin mit positiven Werten Margin mit negativen Werten 
{| border="1" cellspacing="0" cellpadding="5" style="background: #FFFFFF;" 
| Feld1 || Feld2: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
|}
Feld1 Feld2: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
{| border="1" cellspacing="0" cellpadding="5" style="background: #FFFFFF; margin: 0em 3em 0em 3em;" 
| Feld1 || Feld2: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
|}
Feld1 Feld2: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
{| border="1" cellspacing="0" cellpadding="5" style="background: #FFFFFF; margin: 0em -1em 0em -1em;" 
| Feld1 || Feld2: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
|}
Feld1 Feld2: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Die ersten drei Beispiele verdeutlichen die Funktion des CSS Style-Attributs Margin, das den Abstand zur Umgebung der Tabelle festlegt (im Uhrzeigersinn: oben, rechts, unten, links). Das rechte Beispiel zeigt, dass Margin auch negative Werte akzeptiert und die Tabelle damit in eine Überlänge gezogen werden kann (hier bis zum Rand des Feldes - es ginge aber auch darüber hinaus). Diese Beispiele funktionieren fehlerfrei. Die nun folgenden Beispiele sollen den Bug von Width in Kombination mit Margin veranschaulichen:

ohne ausreichend Text entsteht ein rechter Rand der Width-Bug 
{| border="1" cellspacing="0" cellpadding="5" style="background: #FFFFFF; margin: 0em -1em 0em -1em;" 
| Feld1 || Feld2: Text
|}
Feld1 Feld2: Text 
{| border="1" cellspacing="0" cellpadding="5" style="background: #FFFFFF; margin: 0em -1em 0em -1em;" width="100%"
| Feld1 || Feld2: Text
|}
Feld1 Feld2: Text

Hier ist zu sehen, dass die Darstellung der in die Überlänge gezogenen Tabelle auf der rechten Seite nur funktioniert, solange der Text lang genug ist, um die Tabelle über die komplette Breite zu ziehen. Der übliche Ansatz, um das unabhängig vom Inhalt zu erreichen, ist der Tabellenattribut Width mit dem Wert "100%". Dabei werden jedoch die per Margin angegebenen Werte nicht berücksichtigt, wodurch der rechte Rand nicht dem per Magin festgelegten äußeren Abstand entspricht. Die zweite Darstellung („der Width-Bug“) zeigt das Problem. Daran ändert sich auch dann nichts, wenn man stattdessen das CSS-Style-Attribut style="width: 100%" verwendet. 

<div style="padding: 0px; border: dashed 1px #000000;">
 {| border="1" cellspacing="0" cellpadding="5" style="background: #FFFFFF;" width="100%"
 | Feld1 || Feld2: Text
 |}
</div>
Feld1 Feld2: Text

Lösung: Wenn man Einfluss auf das umgebende Feld nehmen kann, in das die Tabelle gezeichnet wird, so läßt sich mit dem CSS-Style-Attribut padding: 0px festlegen, dass dieses Feld keinen Rand zur inneren Umgebung haben soll. Dann benötigt man kein Margin mehr, um die Tabelle nahtlos bis zum Rand zu zeichnen, und kann Width ungehindert nutzten. Beispielsweise innerhalb eines div-Bereichs (<div style="padding: 0px;">{| width="100%" ...) oder innerhalb einer Tabelle, die die andere Tabelle umgibt (Spalten-Definition per | style="padding: 0px;" | {| width="100%" ...). Hat man keinen Einfluss auf das umgebende Feld, so bleibt als Lösung nur, Margin zu verwenden, dann aber auf Width zu verzichten und stattdessen über einen Textblock die volle Breite zu nutzen (wie in den ersten drei Margin-Beispielen gezeigt).

Quellen

Bearbeiten


Hilfeseiten - Umgang mit der Wikipedia und der MediaWiki-Software
  Text formatieren   Farben   Tabellen   Wiki-Regelwerk & Tipps   Links   Sonstiges  
  Benutzer   Artikel   Bewertung   internes
Links zur Wartung des Registerkartenmenüs: äußeres Menü, inneres Menü, TabMenü-Hilfe
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Benutzer:NeonZero/internes/Tabellen&oldid=226154446“