Hilfe:Tabellen/Veraltet

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

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

[Bearbeiten | Quelltext bearbeiten]

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.

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
|}

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

[Bearbeiten | Quelltext bearbeiten]
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

[Bearbeiten | Quelltext bearbeiten]

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.
{| class="wikitable"
|- align="right"
|   42
|   17
|-
|align="right"|    4
|align="right"| 4711
|}
42 17
4 4711

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

[Bearbeiten | Quelltext bearbeiten]

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.

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.

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

[Bearbeiten | Quelltext bearbeiten]

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.

{| 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äß.

{|
|+ 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

[Bearbeiten | Quelltext bearbeiten]
{| 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

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

[Bearbeiten | Quelltext bearbeiten]
{| 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
{| 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

[Bearbeiten | Quelltext bearbeiten]

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

color="C00000"

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

style="color:#C00000"

float= Ausrichtung im Layout

[Bearbeiten | Quelltext bearbeiten]

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=
{| float="right"
{| float="left"
{| float="center"

height= Höhe einer Zeile

[Bearbeiten | Quelltext bearbeiten]

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

[Bearbeiten | Quelltext bearbeiten]
{| 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
{| 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

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.

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
{| 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

&nbsp; in leerer Tabellenzelle

[Bearbeiten | Quelltext bearbeiten]

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.

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

Um Verwirrung zu vermeiden, sollen solche &nbsp; 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

[Bearbeiten | Quelltext bearbeiten]