Hilfe:Tabellen/Veraltet - Versionsgeschichte

Cowboy: Die Seite wurde neu angelegt: „{{Hilfe}} Diese Hilfeseite stellt '''veraltete Tabellen'''-Syntax dar, = Veraltete Tabellen-Syntax = Beschreibung veralteter Tabellen-Syntax, 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. == {{Anker|alignTable}}
2025-05-10T22:49:54Z

Die Seite wurde neu angelegt: „<noinclude>{{Hilfe}} Diese Hilfeseite stellt '''veraltete Tabellen'''-Syntax dar,</noinclude><includeonly> = Veraltete Tabellen-Syntax = Beschreibung veralteter Tabellen-Syntax,</includeonly> 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. == {{Anker|alignTable}} <co…“

Neue Seite
<noinclude>{{Hilfe}}
Diese Hilfeseite stellt '''veraltete [[Hilfe:Tabellen|Tabellen]]'''-Syntax dar,</noinclude><includeonly>
= Veraltete Tabellen-Syntax =
Beschreibung veralteter Tabellen-Syntax,</includeonly> die nicht mehr neu verwendet, sondern allmählich zurückgebaut werden soll, mit dem jeweiligen Ersatz. Seit 1998 ist das betreffende [[Hypertext Markup Language|HTML]] veraltet und hätte niemals benutzt werden sollen.

== {{Anker|alignTable}} <code>align=</code> für die gesamte Tabelle ==
Wenn <code>align=</code> im [[Hilfe:Tabellen/Wikisyntax#Elemente|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 [[#Neu mit class|<code>class="float:…"</code>]] möglich. Ein zentrierendes [[#float|<code>float</code>-Attribut]] existiert nicht.
* Siehe [[Hilfe:Textgestaltung/Layoutfluss|Layoutfluss]]
* und [[Hilfe:Tabellen/Beispiele #Ausrichtung der Tabelle]]

=== Veraltet ===
<div style="clear:both;"></div>
{| align="right"
|+ am rechten Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
<div style="float:left; margin-right:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| align="right"
|+ am rechten Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
</syntaxhighlight>
</div>
<div style="clear:both;"></div>
{| align="left"
|+ am linken Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| align="left"
|+ am linken Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
</syntaxhighlight>
</div>
<div style="clear:both;"></div>

<syntaxhighlight lang="wikitext" highlight="1">
{| align="center"
|+ zentriert ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
</syntaxhighlight>

{| align="center"
|+ zentriert ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
----
{{Info}} Mit <code>align=left/right</code> konnten Tabellen auch direkt nebeneinander gesetzt werden. Beispielsweise so:
{| align="left"
|+ Tabelle 1 am linken Seitenrand
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}
{| align="left"
|+ Tabelle 2 links an diese abschließend
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}

<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1,8">
{| align="left"
|+ Tabelle 1 am linken Seitenrand
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}
{| align="left"
|+ Tabelle 2 links an diese abschließend
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|}
</syntaxhighlight>
</div>
<div style="clear:both;"></div>
----

=== Neu mit <code>class</code> ===
{| class="wikitable float-right"
|+ rechts ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
<div style="float:left; margin-right:4em;">
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap" highlight="1">
{| class="wikitable float-right"
|+ rechts ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
</syntaxhighlight>
</div>
<div style="clear:both;"></div>
* <code>class="float-right"</code> setzt die Tabelle rechts an den Seitenrand.
* <code>class="float-left"</code> 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.
{| class="wikitable float-left"
|+ am linken Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}

<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap" highlight="1">
{| class="wikitable float-left"
|+ am linken Seitenrand ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
</syntaxhighlight>
</div>

<div style="clear:both;"></div>
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap" highlight="1">
{| class="wikitable centered"
|+ zentriert ausrichten
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle linksbündig
|}
</syntaxhighlight>

* <code>class="centered"</code> Stellt eine Tabelle horizontal in die Mitte des verfügbaren Bereichs, die Zelleninhalte bleiben linksbündig.

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

<syntaxhighlight lang="wikitext" style="white-space: pre nowrap" highlight="1">
{| class="wikitable center"
|+ alles zentriert ausrichten 100% breit
|-
! Kopfzelle zentriert !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle zentriert
|}
</syntaxhighlight>

* <code>class="center"</code> verbreitert die Tabelle auf 100% des verfügbaren Bereichs, alle Zelleninhalte werden zentriert.

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

=== Tabellen nebeneinander mit <code>style</code> ===
{| 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
|}
<div style="float:left; margin-right:4em;">
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap" highlight="1,8">
{| 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
|}
</syntaxhighlight>
</div>
<div style="clear:both;"></div>

<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap" highlight="1,8">
{| 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
|}
</syntaxhighlight>
</div>
{| 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
|}
<div style="clear:both;"></div>

== {{Anker|alignElement}} <code>align=</code> für eine einzelne Zeilen oder Zellen ==
Wenn <code>align=</code> im Kopf auf [[../Wikisyntax#Elemente|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 [[#alignTable|gesamte Tabelle]] wird, anders als mit <code>style=</code>, nicht auf die nachgeordneten Elemente vererbt.
* Eine gemeinsame Zuweisung für einzelne Zeilen <code>|-</code> war möglich. Auf die Kopfzeilen einer [[../wikitable|wikitable]] hat es jedoch keinen Einfluss.

=== Veraltet ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="2,6,7">
{| class="wikitable"
|- align="right"
| 42
| 17
|-
|align="right"| 4
|align="right"| 4711
|}
</syntaxhighlight>
</div>

{| class="wikitable"
|- align="right"
| 42
| 17
|-
|align="right"| 4
|align="right"| 4711
|}
<div style="clear:both;"></div>

=== Neu ===
Komplett für alle Inhaltszellen der Tabelle
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| class="wikitable" style="text-align:right;"
|-
| 42
| 17
|-
| 4
| 4711
|}
</syntaxhighlight>
</div>

{| class="wikitable" style="text-align:right;"
|-
| 42
| 17
|-
| 4
| 4711
|}
<div style="clear:both;"></div>
… je Zeile oder Zelle
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="2,6,7">
{| class="wikitable"
|- style="text-align:right;"
| 42
| 17
|-
|style="text-align:right"| 4
|style="text-align:right"| 4711
|}
</syntaxhighlight>
</div>

{| class="wikitable"
|- style="text-align:right;"
| 42
| 17
|-
|style="text-align:right"| 4
|style="text-align:right"| 4711
|}
<div style="clear:both;"></div>

== <code>bgcolor=</code> 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 [[CowboysWiki:Dark Mode|Dunkelmodus]] kompatibel sein.
{{Siehe auch|Hilfe:Textgestaltung/Barrierefreiheit|Hilfe:Farbe}}

=== Veraltet ===
Es war nur bei einfachen Tabellen möglich der gesamten Tabelle am Tabellenanfang <code><nowiki>{|</nowiki> </code> eine Farbe zuzuweisen, bei einer [[Hilfe:Tabellen/wikitable|wikitable]] ist das, ebenso wie für Kopfzeilen <code>|-</code> gefolgt von <code>!</code> oder reine Kopfzellen <code>!</code> wirkungslos.
<syntaxhighlight lang="wikitext" highlight="3,5,7">
{| class="wikitable"
|-
!bgcolor="ABCDEF"| Organisation !! bgcolor ist wirkungslos
|-
|bgcolor="FF0000"| Feuerwehr || schwarz auf rot = schlecht gewählte Hintergrundfarbe
|-
|bgcolor="FFCCAA"| Feuerwehr || lesbarer Text
|}
</syntaxhighlight>
{| class="wikitable"
|-
!bgcolor="ABCDEF"| Organisation !! bgcolor ist wirkungslos
|-
|bgcolor="FF0000"| Feuerwehr || schwarz auf rot = schlecht gewählte Hintergrundfarbe
|-
|bgcolor="FFCCAA"| Feuerwehr || lesbarer Text
|}

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

=== Neu ===
Die exakte Entsprechung wäre: <code>style="background-color:..."</code>
* Weil im Wikitext aber keine anderen Eigenschaften möglich wären, wird innerhalb von Artikeln für Datenzellen (Inhaltszellen) die Kurzfassung <code>style="background:…"</code> verwendet.
* Nur bei Kopfzellen sortierbarer Tabellen kommt es zu einem Konflikt; dort ist <code>style="background-color:…"</code> zu benutzen.
Wo Hintergrundfarben eingesetzt werden, sollte möglichst auf 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 eigenen expliziten Farbwahl sollte immer eine passende Textfarbe mit angegeben werden.
<syntaxhighlight lang="wikitext" highlight="2,4,7,9">
{| 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
|}
</syntaxhighlight>
{| 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
|}

== {{Anker|border}} <code>border=</code> 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 <code>border="0"</code> einen Rahmen zu unterdrücken.
Während früher nur die Rahmenbreite in Pixeln anzugeben war, sind mit <code>style="border: …"</code> viele Gestaltungen möglich.

=== Veraltet ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| border="0"
|+ Ohne Rahmen
|-
| Dänemark
| DK
|-
| Norwegen
| N
|}
</syntaxhighlight>
</div>

{| border="0"
|+ Ohne Rahmen
|-
| Dänemark
| DK
|-
| Norwegen
| N
|}
<div style="clear:both;"></div>

<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| border="1"
|-
| 42
| 17
|-
| 4
| 4711
|}
</syntaxhighlight>
</div>

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

Dieses Design ist nicht mehr zeitgemäß.
<div style="clear:both;"></div>

=== Neu ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{|
|+ Ohne Rahmen
|-
| Dänemark
| DK
|-
| Norwegen
| N
|}
</syntaxhighlight>
</div>

{|
|+ Ohne Rahmen
|-
| Dänemark
| DK
|-
| Norwegen
| N
|}
<div style="clear:both;"></div>

Um eine Tabelle mit getrenntem Rahmen (wie mit dem veralteten <code>border="1"</code>) herzustellen, kann man folgende Syntax <code>border-collapse: separate</code> verwenden.
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| class="wikitable hintergrundfarbe-basis" style="border-collapse: separate;"
|-
| 42
| 17
|-
| 4
| 4711
|}
</syntaxhighlight>
</div>
{| class="wikitable hintergrundfarbe-basis" style="border-collapse: separate;"
|-
| 42
| 17
|-
| 4
| 4711
|}
<div style="clear:both;"></div>

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 <code style="white-space:nowrap">border-collapse: collapse</code> verhindert werden – dann werden diese Ränder zu einem Rand vereinigt, wie es bei <code>[[Hilfe:Tabellen/wikitable|wikitable]]</code> Standard ist.

== {{Anker|cellpadding}} <code>cellpadding=</code> innerer Zellenabstand ==

=== Veraltet ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| 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
|}
</syntaxhighlight>
</div>

{| 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
|}
<div style="clear:both;"></div>

=== Neu ===
Das Ersetzen von <code>cellpadding=</code> ist nur über eine Zuweisung für jede einzelne Tabellenzelle möglich, der ein entsprechendes <code>padding:…</code> mitgegeben werden muss. Bei einer ''wikitable'' ist es zudem unnötig, da diese bereits über einen Innenabstand vom Zellenrand verfügt.
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1,3,4,6,7">
{| 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
|}
</syntaxhighlight>
</div>

{| 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
|}
<div style="clear:both;"></div>

== {{Anker|cellspacing}} <code>cellspacing=</code> Abstand zwischen benachbarten Zellen ==

=== Veraltet ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| 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
|}
</syntaxhighlight>
</div>

{| 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
|}
<div style="clear:both;"></div>

=== Neu ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| 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
|}
</syntaxhighlight>
</div>

{| 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
|}
<div style="clear:both;"></div>

Das <code>border-spacing:</code> funktioniert nicht mit der normalen <code>class="wikitable"</code>, da es zwingend ein <code>border-collapse: separate;</code> erwartet. Der Tabelle muss dies explizit mitgegeben werden. Es lassen sich auch unterschiedliche Abstände definieren.
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| class="wikitable hintergrundfarbe-basis" style="border-spacing:5px 10px; border-collapse: separate;"
|-
| 42
| 17
|-
| 4
| 4711
|}
</syntaxhighlight>
</div>
{| class="wikitable hintergrundfarbe-basis" style="border-spacing:5px 10px; border-collapse: separate;"
|-
| 42
| 17
|-
| 4
| 4711
|}
<div style="clear:both;"></div>

== {{Anker|color}} <code>color=</code> Schriftfarbe ==
Das Attribut für Schriftfarbe wird von der Wikisyntax nicht mehr unterstützt; wo es dennoch vorkommt, bitte entfernen.

=== Veraltet ===
<syntaxhighlight lang="wikitext">
color="C00000"
</syntaxhighlight>
Zu beachten ist, dass bei <code>color=</code> das <code>#</code> vor Hex-Codes optional ist; in modernem CSS ist es jedoch Pflicht.

=== Neu ===
<syntaxhighlight lang="wikitext">
style="color:#C00000"
</syntaxhighlight>

== {{Anker|float}} <code>float=</code> 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 <code>[[#alignTable|align=]]</code>

=== Veraltet ===
<syntaxhighlight lang="wikitext">
{| float="right"
{| float="left"
{| float="center"
</syntaxhighlight>

== {{Anker|frame}} <code>frame=</code> Rahmenlinien ==
Wie bei vielen HTML-Attributen soll eine Dekoration seit HTML.5 nur noch durch CSS realisiert werden. Maßgeblich ist hier die Familie <code>style="border:..."</code> mit vielen Möglichkeiten.

=== Veraltet ===
<syntaxhighlight lang="wikitext">
{| frame="void"
</syntaxhighlight>
Überflüssig, wenn einfach nur eine Tabelle ohne irgendwelche Rahmenlinien dargestellt werden soll.

<syntaxhighlight lang="wikitext">
{| frame="border"
{| frame="box"
</syntaxhighlight>
Rahmen außen um Tabelle – wird mit leichten Rahmenlinien bereits durch <code>class="[[Hilfe:Tabellen/wikitable|wikitable]]"</code> einheitlich erreicht.

<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| class="wikitable" style="border:2px #0000FF solid"
|-
| 4
| 4711
|-
| 42
| 17
|}
</syntaxhighlight>
</div>

{| class="wikitable" style="border:2px #0000FF solid"
|-
| 4
| 4711
|-
| 42
| 17
|}

In enzyklopädischen Artikeln in der Regel unerwünscht sind rein dekorative verstärkte oder farbige Umrahmungen. Wo tatsächlich sinnvoll, kann mit spezifischen Deklarationen im Umfeld <code>style="border:..."</code> eine besondere Rahmenlinie erreicht werden.
<syntaxhighlight lang="wikitext">
{| frame="above" 
{| frame="below" 
{| frame="hsides" 
{| frame="vsides" 
{| frame="lhs" 
{| frame="rhs" 
</syntaxhighlight>

== {{Anker|height}} <code>height=</code> 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 <code>height=</code> 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.

== {{Anker|rules}} <code>rules=</code> Trennlinien ==
Wie bei vielen HTML-Attribute soll eine Dekoration seit HTML.5 nur noch durch CSS realisiert werden. Maßgeblich ist hier die Familie <code>style="border:..."</code> mit vielen Möglichkeiten. Wir verwenden jedoch eine einfache einheitliche Tabellengestaltung, weshalb sich nur die Frage stellt, ob <code>class="[[Hilfe:Tabellen/wikitable|wikitable]]"</code> (<code>all</code>) oder ganz ohne (<code>none</code>). Der Schwerpunkt liegt bei uns auf den Inhalten; die optische Darstellung soll das Verständnis unterstützen, ist jedoch kein Selbstzweck.

=== Veraltet ===
<syntaxhighlight lang="wikitext">
{| rules="none"
{| rules="groups"
{| rules="rows"
{| rules="cols"
{| rules="all"
</syntaxhighlight>

== {{Anker|valign}} <code>valign=</code> vertikale Ausrichtung ==

=== Veraltet ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="3,5,8,9,10">
{| 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
|}
</syntaxhighlight>
</div>
{| 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
|}
<div style="clear:both;"></div>

=== Neu ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="4,5,9,10">
{| 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
|}
</syntaxhighlight>
</div>
{| 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
|}
<div style="clear:both;"></div>
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1">
{| class="wikitable toptextcells"
|+ toptextcells
|-
| Datenzelle
| 2. Spalte
| 3. Spalte<br /> drei-<br /> zeilig
|-
| Datenzelle<br /> zweizeilig
| 2. Spalte
| 3. Spalte
|}
</syntaxhighlight>
</div>
{| class="wikitable toptextcells"
|+ toptextcells
|-
| Datenzelle
| 2. Spalte
| 3. Spalte<br /> drei-<br /> zeilig
|-
| Datenzelle<br /> zweizeilig
| 2. Spalte
| 3. Spalte
|}

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

== {{Anker|width}} <code>width=</code> 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 <code>100%</code> zu erweitern. Zu breit vorgegebene Werte für Inhaltszellen führen auf schmalen Bildschirmen zum Überlaufen.

=== Veraltet ===
Zu beachten ist, dass bei <code>width=</code> eine Anzahl von Pixeln als einfache Zahl angegeben wird; in modernem CSS muss jedoch <code>px</code> 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.

<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1,3,4,11,13-15">
{| 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
|}
</syntaxhighlight>
</div>
{| 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
|}
<div style="clear:both;"></div>

=== Neu ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="1,3,4,11,13-15">
{| 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
|}
</syntaxhighlight>
</div>
{| 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
|}
<div style="clear:both;"></div>

== {{Anker|nbsp}} <code>&nbsp;</code> 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 <code>padding</code> entspricht, beispielsweise <code>padding:0.2em 0.4em</code>. Dies kann durch eine Höhen- oder [[#width|Breitenzuweisung]] geändert werden.

=== Veraltet ===
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="5">
{| class="wikitable"
|-
| a || A
|-
| b ||  
|-
| c || C
|}
</syntaxhighlight>
</div>
{| class="wikitable"
|-
| a || A
|-
| b ||  
|-
| c || C
|}
<div style="clear:both;"></div>

=== Neu ===
Um Verwirrung zu vermeiden, sollen solche <code>&nbsp;</code> bei Gelegenheit eliminiert werden, insbesondere dort, wo die Nachbarzellen (Zeile/Spalte) einen sichtbaren Inhalt haben.
<div style="float:right; margin-left:4em;">
<syntaxhighlight lang="wikitext" highlight="5">
{| class="wikitable"
|-
| a || A
|-
| b ||
|-
| c || C
|}
</syntaxhighlight>
</div>
{| class="wikitable"
|-
| a || A
|-
| b ||
|-
| c || C
|}
<div style="clear:both;"></div>
<syntaxhighlight lang="wikitext" highlight="5,12,15">
{| class="wikitable"
|-
| A
|-
|
|-
| C
|}
{| class="wikitable"
|-
| A
| 
| C
| X
|style="width:10px"| 
| Z
|}
</syntaxhighlight>
{| class="wikitable"
|-
| A
|-
|
|-
| C
|}
{| class="wikitable"
|-
| A
|
| C
| X
|style="width:10px"| 
| 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.
{| class="wikitable"
|-
| A
|-
| C
|}
{| class="wikitable"
|-
| A
| C
| X
| Z
|}
<div style="clear:both;"></div>

== Weitere Informationen ==
* [[../prettytable/]] – veralteter Tabellenstil
* [[../Erweitert#mw-datatable|mw-datatable]] – veraltete Klasse
* [[Hilfe:CSS #Veraltete Anweisungen]]
<noinclude>
[[Kategorie:Hilfe:Listen und Tabellen|Veraltet]]
</noinclude>