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
[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.
Veraltet
[Bearbeiten | Quelltext bearbeiten]Kopfzelle zentriert | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle linksbündig |
{| align="right"
|+ am rechten Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
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
|}
Kopfzelle zentriert | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle linksbündig |
Info: Mit align=left/right
konnten Tabellen auch direkt nebeneinander gesetzt werden. Beispielsweise so:
Kopfzelle | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle |
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
[Bearbeiten | Quelltext bearbeiten]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.
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.
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.
Kopfzelle zentriert | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle zentriert |
Tabellen nebeneinander mit style
[Bearbeiten | Quelltext bearbeiten]Kopfzelle | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle |
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
|}
Kopfzelle | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle |
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.
Veraltet
[Bearbeiten | Quelltext bearbeiten]{| class="wikitable"
|- align="right"
| 42
| 17
|-
|align="right"| 4
|align="right"| 4711
|}
42 | 17 |
4 | 4711 |
Neu
[Bearbeiten | Quelltext bearbeiten]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.
Veraltet
[Bearbeiten | Quelltext bearbeiten]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
[Bearbeiten | Quelltext bearbeiten]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.
Veraltet
[Bearbeiten | Quelltext bearbeiten]{| border="0"
|+ Ohne Rahmen
|-
| Dänemark
| DK
|-
| Norwegen
| N
|}
Dänemark | DK |
Norwegen | N |
{| border="1"
|-
| 42
| 17
|-
| 4
| 4711
|}
42 | 17 |
4 | 4711 |
Dieses Design ist nicht mehr zeitgemäß.
Neu
[Bearbeiten | Quelltext bearbeiten]{|
|+ Ohne Rahmen
|-
| Dänemark
| DK
|-
| Norwegen
| N
|}
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]Veraltet
[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 |
Neu
[Bearbeiten | Quelltext bearbeiten]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]Veraltet
[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 |
Neu
[Bearbeiten | Quelltext bearbeiten]{| 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.
Veraltet
[Bearbeiten | Quelltext bearbeiten]color="C00000"
Zu beachten ist, dass bei color=
das #
vor Hex-Codes optional ist; in modernem CSS ist es jedoch Pflicht.
Neu
[Bearbeiten | Quelltext bearbeiten]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=
Veraltet
[Bearbeiten | Quelltext bearbeiten]{| 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]Veraltet
[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 |
Neu
[Bearbeiten | Quelltext bearbeiten]{| 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
|}
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
|}
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
[Bearbeiten | Quelltext bearbeiten]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
[Bearbeiten | Quelltext bearbeiten]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
[Bearbeiten | Quelltext bearbeiten]{| 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
[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.
Veraltet
[Bearbeiten | Quelltext bearbeiten]{| class="wikitable"
|-
| a || A
|-
| b ||
|-
| c || C
|}
a | A |
b | |
c | C |
Neu
[Bearbeiten | Quelltext bearbeiten]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
[Bearbeiten | Quelltext bearbeiten]- prettytable – veralteter Tabellenstil
- mw-datatable – veraltete Klasse
- Hilfe:CSS #Veraltete Anweisungen