Hilfe:Tabellen/Veraltet

Diese Hilfeseite stellt veraltete Tabellen-Syntax dar, die nicht mehr neu verwendet, sondern allmählich zurückgebaut werden soll, mit dem jeweiligen Ersatz. Seit 1998 ist das betreffende HTML veraltet und hätte niemals benutzt werden sollen.

align= für die gesamte Tabelle

Wenn align= im Kopf (Tabellenanfang) für die gesamte Tabelle deklariert wird, wird die Tabelle im Layout der Seite etwa am rechten Rand angeordnet. Sind dort bereits Infoboxen oder Bilder vorhanden, so kann das zu störenden Effekten führen, weil die Tabelle dann nicht am Seitenrand, sondern an diesem Element ausgerichtet wird. Eine Positionierung immer am entsprechenden Seitenrand ist nur über class="float:…" möglich. Ein zentrierendes float-Attribut existiert nicht.

• Siehe Layoutfluss
• und Hilfe:Tabellen/Beispiele #Ausrichtung der Tabelle

Veraltet

am rechten Seitenrand ausrichten

Kopfzelle zentriert	Kopfzelle
Inhaltszelle	Inhaltszelle linksbündig

{| align="right"
|+ am rechten Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}

am linken Seitenrand ausrichten

Kopfzelle zentriert	Kopfzelle
Inhaltszelle	Inhaltszelle linksbündig

{| align="left"
|+ am linken Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}

{| align="center"
|+ zentriert ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}

zentriert ausrichten

Kopfzelle zentriert	Kopfzelle
Inhaltszelle	Inhaltszelle linksbündig

---

 Info: Mit align=left/right konnten Tabellen auch direkt nebeneinander gesetzt werden. Beispielsweise so:

Tabelle 1 am linken Seitenrand

Kopfzelle	Kopfzelle
Inhaltszelle	Inhaltszelle

Tabelle 2 links an diese abschließend

Kopfzelle	Kopfzelle
Inhaltszelle	Inhaltszelle

{| align="left"
|+ Tabelle 1 am linken Seitenrand
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}
{| align="left"
|+ Tabelle 2 links an diese abschließend
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}

---

Neu mit class

rechts ausrichten

Kopfzelle zentriert	Kopfzelle
Inhaltszelle	Inhaltszelle linksbündig

{| class="wikitable float-right"
|+ rechts ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}

• class="float-right" setzt die Tabelle rechts an den Seitenrand.
• class="float-left" ermöglicht es Text rechts neben einer schmalen Tabelle anzuordnen. Dabei sollte stets darauf geachtet werden, dass eine Mindestbreite für diesen Text vorgegeben wird, damit dieser lesbar bleibt.

am linken Seitenrand ausrichten

Kopfzelle zentriert	Kopfzelle
Inhaltszelle	Inhaltszelle linksbündig

{| class="wikitable float-left"
|+ am linken Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}

{| class="wikitable centered"
|+ zentriert ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}

• class="centered" Stellt eine Tabelle horizontal in die Mitte des verfügbaren Bereichs, die Zelleninhalte bleiben linksbündig.

zentriert ausrichten

Kopfzelle zentriert	Kopfzelle
Inhaltszelle	Inhaltszelle linksbündig

{| class="wikitable center"
|+ alles zentriert ausrichten 100% breit
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle zentriert
|}

• class="center" verbreitert die Tabelle auf 100% des verfügbaren Bereichs, alle Zelleninhalte werden zentriert.

alles zentriert ausrichten 100% breit

Kopfzelle zentriert	Kopfzelle
Inhaltszelle	Inhaltszelle zentriert

Tabellen nebeneinander mit style

1. Tabelle rechts am Seitenrand ausrichten

Kopfzelle	Kopfzelle
Inhaltszelle	Inhaltszelle

2. Tabelle rechtsbündig anschließen

Kopfzelle	Kopfzelle
Inhaltszelle	Inhaltszelle

{| class="wikitable" style="float:right"
|+ 1. Tabelle rechts am Seitenrand ausrichten
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}
{| class="wikitable" style="float:right"
|+ 2. Tabelle rechtsbündig anschließen
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}

{| class="wikitable" style="float:left"
|+ 1. Tabelle links am Seitenrand ausrichten
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}
{| class="wikitable" style="float:left"
|+ 2. Tabelle linksbündig anschließen
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}

1. Tabelle links am Seitenrand ausrichten

Kopfzelle	Kopfzelle
Inhaltszelle	Inhaltszelle

2. Tabelle linksbündig anschließen

Kopfzelle	Kopfzelle
Inhaltszelle	Inhaltszelle

align= für eine einzelne Zeilen oder Zellen

Wenn align= im Kopf auf einzelne Elemente angewendet wird, wird deren Inhalt (etwa Text oder Daten) rechtsbündig, linksbündig oder zentriert ausgerichtet.

• Dies musste einzeln angewendet werden; eine Definition für die gesamte Tabelle wird, anders als mit style=, nicht auf die nachgeordneten Elemente vererbt.
• Eine gemeinsame Zuweisung für einzelne Zeilen |- war möglich. Auf die Kopfzeilen einer wikitable hat es jedoch keinen Einfluss.

Veraltet

{| class="wikitable"
|- align="right"
|   42
|   17
|-
|align="right"|    4
|align="right"| 4711
|}

42	17
4	4711

Neu

Komplett für alle Inhaltszellen der Tabelle

{| class="wikitable" style="text-align:right;"
|-
|   42
|   17
|-
|    4
| 4711
|}

42	17
4	4711

… je Zeile oder Zelle

{| class="wikitable"
|- style="text-align:right;"
|   42
|   17
|-
|style="text-align:right"|    4
|style="text-align:right"| 4711
|}

42	17
4	4711

bgcolor= Hintergrundfarbe

Einzelnen Zellen, ganzen Zeilen oder der gesamten Tabelle können Hintergrundfarben zugewiesen werden, dabei sollte immer auf die Einhaltung der Richtlinien zur Barrierefreiheit und zur generellen Farbnutzung geachtet werden. Farben sollten zudem auch mit dem Dunkelmodus kompatibel sein.

Veraltet

Es war nur bei einfachen Tabellen möglich der gesamten Tabelle am Tabellenanfang {| eine Farbe zuzuweisen, bei einer wikitable ist das, ebenso wie für Kopfzeilen |- gefolgt von ! oder reine Kopfzellen ! wirkungslos.

{| class="wikitable"
|-
!bgcolor="ABCDEF"| Organisation !! bgcolor ist wirkungslos
|-
|bgcolor="FF0000"| Feuerwehr || schwarz auf rot = schlecht gewählte Hintergrundfarbe
|-
|bgcolor="FFCCAA"| Feuerwehr || lesbarer Text
|}

Organisation	bgcolor ist wirkungslos
Feuerwehr	schwarz auf rot = schlecht gewählte Hintergrundfarbe
Feuerwehr	lesbarer Text

Zu beachten ist, dass bei bgcolor= das # vor Hex-Codes optional ist; in modernem CSS ist es jedoch Pflicht.

Neu

Die exakte Entsprechung wäre: style="background-color:..."

• Weil im Wikitext aber keine anderen Eigenschaften möglich wären, wird innerhalb von Artikeln für Datenzellen (Inhaltszellen) die Kurzfassung style="background:…" verwendet.
• Nur bei Kopfzellen sortierbarer Tabellen kommt es zu einem Konflikt; dort ist style="background-color:…" zu benutzen.

Wo Hintergrundfarben eingesetzt werden, sollte möglichst die standardisierten Farbklassen zurückgegriffen werden; siehe: Hilfe:Farbe #Hintergrundfarben, da diesen bereits Textfarben für wikitable zugeordnet sind, die auch im Dunkelmodus zu einer lesbaren Ausgabe führen. Bei der eigene Farbwahl sollte immer eine passende Textfarbe mit angegeben werden.

{| class="wikitable"
|- class="hintergrundfarbe8"
! Organisation !! Per class gefärbte Kopfzeile
|- style="background:#E00000; color:#EFEFEF;"
| Feuerwehr || Per style gefärbte Datenzeile
|-
|style="background:#00309A; color:#EFEFEF;"| Technisches Hilfswerk ||rowspan="2"| Per style gefärbte Datenzelle
|-
|style="background:#FFCC11; color:#000000;"| Deutsche Post
|}

Organisation	Per class gefärbte Kopfzeile
Feuerwehr	Per style gefärbte Datenzeile
Technisches Hilfswerk	Per style gefärbte Datenzelle
Deutsche Post

border= Rahmenbreite

Ohne irgendwelche Zuweisungen von Rahmen-Eigenschaften werden Tabellen heutzutage grundsätzlich ohne Rahmen und Zellenränder dargestellt.

• Es ist deshalb unnötig und redundant, mit border="0" einen Rahmen zu unterdrücken.

Während früher nur die Rahmenbreite in Pixeln anzugeben war, sind mit style="border: …" viele Gestaltungen möglich.

Veraltet

{| border="0"
|+ Ohne Rahmen
|-
| Dänemark
| DK
|-
| Norwegen
| N
|}

Ohne Rahmen

Dänemark	DK
Norwegen	N

{| border="1"
|-
|   42
|   17
|-
|    4
| 4711
|}

42	17
4	4711

Dieses Design ist nicht mehr zeitgemäß.

Neu

{|
|+ Ohne Rahmen
|-
| Dänemark
| DK
|-
| Norwegen
| N
|}

Ohne Rahmen

Dänemark	DK
Norwegen	N

Um eine Tabelle mit getrenntem Rahmen (wie mit dem veralteten border="1") herzustellen, kann man folgende Syntax border-collapse: separate verwenden.

{| class="wikitable hintergrundfarbe-basis" style="border-collapse: separate;"
|-
|   42
|   17
|-
|    4
| 4711
|}

42	17
4	4711

Zahlreiche Beispiele für die Gestaltung von Tabellenrahmen und Rändern sind unter Hilfe:Tabellen/Beispiele #Einfache Tabellen angegeben. Sie sollten jedoch nicht in Artikeln verwendet werden. Soll bei einfachen Tabellen vermieden werden, dass sich Zellenränder überlagern, kann dies durch border-collapse: collapse verhindert werden – dann werden diese Ränder zu einem Rand vereinigt, wie es bei wikitable Standard ist.

cellpadding= innerer Zellenabstand

Veraltet

{| cellpadding="3" style="border: solid 1px;"
|-
|style="border: solid 1px;"| 42
|style="border: solid 1px;"| 17
|-
|style="border: solid 1px;"| 4
|style="border: solid 1px;"| 4711
|}

42	17
4	4711

Neu

Das Ersetzen von cellpadding= ist nur über eine Zuweisung für jede einzelne Tabellenzelle möglich, der ein entsprechendes padding:… mitgegeben werden muss. Bei einer wikitable ist es zudem unnötig, da diese bereits über einen Innenabstand vom Zellenrand verfügt.

{| style="border: solid 1px;"
|-
|style="border: solid 1px; padding:3px;"| 42
|style="border: solid 1px; padding:3px;"| 17
|-
|style="border: solid 1px; padding:3px;"| 4
|style="border: solid 1px; padding:3px;"| 4711
|}

42	17
4	4711

cellspacing= Abstand zwischen benachbarten Zellen

Veraltet

{| cellspacing="5" style="border: solid 1px;"
|-
|style="border: solid 1px;"| 42
|style="border: solid 1px;"| 17
|-
|style="border: solid 1px;"| 4
|style="border: solid 1px;"| 4711
|}

42	17
4	4711

Neu

{| style="border-spacing:5px; border: solid 1px;"
|-
|style="border: solid 1px;"| 42
|style="border: solid 1px;"| 17
|-
|style="border: solid 1px;"| 4
|style="border: solid 1px;"| 4711
|}

42	17
4	4711

Das border-spacing: funktioniert nicht mit der normalen class="wikitable", da es zwingend ein border-collapse: separate; erwartet. Der Tabelle muss dies explizit mitgegeben werden. Es lassen sich auch unterschiedliche Abstände definieren.

{| class="wikitable hintergrundfarbe-basis" style="border-spacing:5px 10px; border-collapse: separate;"
|-
| 42
| 17
|-
| 4
| 4711
|}

42	17
4	4711

color= Schriftfarbe

Das Attribut für Schriftfarbe wird von der Wikisyntax nicht mehr unterstützt; wo es dennoch vorkommt, bitte entfernen.

Veraltet

color="C00000"

Zu beachten ist, dass bei color= das # vor Hex-Codes optional ist; in modernem CSS ist es jedoch Pflicht.

Neu

style="color:#C00000"

float= Ausrichtung im Layout

Dieses Attribut wird in Wikisyntax nicht mehr unterstützt; bitte entfernen, falls es noch vorkommt.

• Wenn im Tabellenkopf deklariert, wurde die gesamte Tabelle im Layout der Seite etwa am rechten Rand angeordnet.
• Die Werte entsprechen align=

Veraltet

{| float="right"
{| float="left"
{| float="center"

height= Höhe einer Zeile

Die Höhe einer Zeile wird gemäß dem höchsten Inhalt einer Zelle dieser Zeile zuzüglich Abstände (padding) bestimmt.

• Eine Zuweisung height= war deshalb schon immer funktionslos und sollte eliminiert werden.

Der Browser sollte gemäß der Verteilung der Inhalte auf die Zellen anhand des verfügbaren Platzes im aktuellen Endgerät die erforderlichen Breiten und Höhen selbst berechnen und nicht durch willkürliche Vorgaben gestört werden.

valign= vertikale Ausrichtung

Veraltet

{| class="wikitable"
|-
!valign="top"| Kopfzelle (top)
! 2. Spalte ohne (middle)
!valign="bottom"| 3. Spalte (bottom)
! 4. Spalte<br /> drei-<br /> zeilig
|-
|valign="bottom"| Datenzelle (bottom) 
|valign="top"| 2. Spalte (top)
|valign="middle"| 3. Spalte (middle)
| 4. Spalte<br /> drei-<br /> zeilig
|}

Kopfzelle (top)	2. Spalte ohne (middle)	3. Spalte (bottom)	4. Spalte drei- zeilig
Datenzelle (bottom)	2. Spalte (top)	3. Spalte (middle)	4. Spalte drei- zeilig

Neu

{| class="wikitable"
|+ vertical-align:
|-
!style="vertical-align:top"| Kopfzelle (top)
!style="vertical-align:bottom"| 2. Spalte (bottom)
! 3. Spalte<br /> drei-<br /> zeilig
! 4. Spalte ohne
|-
| Datenzelle<br /> zweizeilig
|style="vertical-align:bottom"| 2. Spalte (bottom)
|style="vertical-align:top"| 3. Spalte (top)
| 4. Spalte ohne
|}

vertical-align:

Kopfzelle (top)	2. Spalte (bottom)	3. Spalte drei- zeilig	4. Spalte ohne
Datenzelle zweizeilig	2. Spalte (bottom)	3. Spalte (top)	4. Spalte ohne

{| class="wikitable toptextcells"
|+ toptextcells
|-
| Datenzelle
| 2. Spalte
| 3. Spalte<br /> drei-<br /> zeilig
|-
| Datenzelle<br /> zweizeilig
| 2. Spalte
| 3. Spalte
|}

toptextcells

Datenzelle	2. Spalte	3. Spalte drei- zeilig
Datenzelle zweizeilig	2. Spalte	3. Spalte

Beispiele für die Ausrichtung sind unter Hilfe:Tabellen/Beispiele#toptextcells und Hilfe:Tabellen/Beispiele#Vertikale Ausrichtung zu finden

width= Breite

Es ist möglich, für eine Tabelle oder einzelne Tabellenzellen feste Werte für die Breite vorzugeben. Dies sollte möglichst vermieden werden, um die Darstellung auf unterschiedlich breiten Endgeräten nicht negativ zu beeinflussen. Es ist nicht sinnvoll, jede Tabelle auf die maximal verfügbare Breite 100% zu erweitern. Zu breit vorgegebene Werte für Inhaltszellen führen auf schmalen Bildschirmen zum Überlaufen.

Veraltet

Zu beachten ist, dass bei width= eine Anzahl von Pixeln als einfache Zahl angegeben wird; in modernem CSS muss jedoch px oder eine der zahlreichen anderen Maßeinheiten dahinter vorhanden sein.

• Es ist in keinem Fall möglich den Zellen einer Tabellenspalte unterschiedliche Breiten zuzuweisen.
• Nicht umgebrochene Texte oder Bilder die breiter als die Vorgabe sind, erweitern die Tabellenzelle entsprechend, damit der Inhalt nicht aus der Zelle in die Nachbarzelle hineinragt.

{| class="wikitable" width="400"
|-
|width="70"| Mann
|width="70"| Frau
| Diverse Person
|-
| Junge
| Mädchen
| Kind
|}
{| class="wikitable" width="50%"
|-
|width="33%"| Mann
|width="33%"| Frau
|width="33%"| Diverse Person
|-
| Junge
| Mädchen
| Kind
|}

Mann	Frau	Diverse Person
Junge	Mädchen	Kind

Mann	Frau	Diverse Person
Junge	Mädchen	Kind

Neu

{| class="wikitable" style="width:400px;"
|-
|style="width:70px"| Mann
|style="width:70px"| Frau
| Diverse Person
|-
| Junge
| Mädchen
| Kind
|}
{| class="wikitable" style="width:50%;"
|-
|style="width:33%"| Mann
|style="width:33%"| Frau
|style="width:33%"| Diverse Person
|-
| Junge
| Mädchen
| Kind
|}

Mann	Frau	Diverse Person
Junge	Mädchen	Kind

Mann	Frau	Diverse Person
Junge	Mädchen	Kind

  in leerer Tabellenzelle

Anfang der 2000er gab es Browser, die Rahmenlinien weggelassen hatten, falls eine Tabellenzelle völlig leer war.

• Es wurde deshalb ein nicht-leerer Zelleninhalt simuliert.
• Zwischenzeitlich wurde standardisiert, dass die Rahmenlinien dann durchgängig und Vorgabe sein sollen, falls nicht unterdrückt.
• Es sind keine Browser mehr nutzbar, die sich nicht adäquat verhalten.

Zumeist wurde es dort eingesetzt, wo bisher sonst keine Inhalte in der Zeile oder Spalte vorhanden sind. Dies führt dazu, dass die Zeilenhöhe oder Spaltenbreite ohne Inhalt nur dem vorgegebenen padding entspricht, beispielsweise padding:0.2em 0.4em. Dies kann durch eine Höhen- oder Breitenzuweisung geändert werden.

Veraltet

{| class="wikitable"
|-
| a || A
|-
| b ||  
|-
| c || C
|}

a	A
b
c	C

Neu

Um Verwirrung zu vermeiden, sollen solche   bei Gelegenheit eliminiert werden, insbesondere dort, wo die Nachbarzellen (Zeile/Spalte) einen sichtbaren Inhalt haben.

{| class="wikitable"
|-
| a || A
|-
| b ||
|-
| c || C
|}

a	A
b
c	C

{| class="wikitable"
|-
| A
|-
|
|-
| C
|}
{| class="wikitable"
|-
| A
| <!-- leer = paddingbreit 2×0.4em -->
| C
| X
|style="width:10px"| <!-- leere Zelle = paddingbreit 2×0.4em + 10px -->
| Z
|}

A

C

A

C

X

Z

Möglicherweise ist die komplette Zeile oder Spalte überflüssig; sie soll beispielsweise nur der reinen Dekoration dienen, Inhalte sind nicht vorgesehen. Dann sollte sie zugunsten der Barrierefreiheit komplett entfernt werden.

A

C

A

C

X

Z

Weitere Informationen

• prettytable – veralteter Tabellenstil
• mw-datatable – veraltete Klasse
• Hilfe:CSS #Veraltete Anweisungen