Benutzer:NeonZero/internes/Tabellen

Benutzer

Artikel

Bewertung

internes

Hilfeseiten - Umgang mit der Wikipedia und der MediaWiki-Software

Text formatieren

Farben

Tabellen

Wiki-Regelwerk & Tipps

Links

Sonstiges

Technische Grundlagen

→ Hauptseite: Hilfe:Tabellen

Grundlagen zum Aufbau einer Tabelle:

Eröffnet wird eine Tabelle mit einem {| und geschlossen mit einem |}.
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:

Die globale Formatierung wird im Tabellenkopf vorgenommen. Was dort festgelegt wird, gilt für alle Zellen, die keine separate Formatierung erhalten.

{| <Formatierung>

Einzelne Zeilen einer Tabelle lassen sich bei Bedarf im Zeilenkopf separat formatieren.

|- <Formatierung>

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

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

Darstellungsproblem: Width in Kombination mit Margin

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).