Tabelle Ausrichtung in der Spalte

[Lothar Leser]

Guten Morgen,

ich suche eine Möglichkeit, in einer Tabelle mit CSS die Inhalte einer Spalte so auszurichten, dass Zahlen rechts stehen und Texte links. Am besten die Zahlen nach dem Dezimalzeichen ausgerichtet.

Geht sowas?

Grüße Lothar

[Robert B.]

Moin Lothar,

ich suche eine Möglichkeit, in einer Tabelle mit CSS die Inhalte einer Spalte so auszurichten, dass Zahlen rechts stehen und Texte links.

das ist meines Wissens nur mit CSS-Klassen möglich, die zu allem Überfluss auch noch für jede betreffende Zelle definiert werden müssen^[1]. Zumindest brauchst Du die Klassen nur für die Zahlen, denn Text wird standardmäßig links ausgerichtet.

Viele Grüße
Robert

---

1. Ich fände es sehr praktisch, wenn man mit der Angabe einer Klasse in der col eine ganze Spalte stylen könnte – das ist aber leider nicht möglich. ↩︎

[Auge]

Hallo

das ist meines Wissens nur mit CSS-Klassen möglich, die zu allem Überfluss auch noch für jede betreffende Zelle definiert werden müssen.

Ich fände es sehr praktisch, wenn man mit der Angabe einer Klasse in der col eine ganze Spalte stylen könnte – das ist aber leider nicht möglich.

Ja, darauf bin ich eben auch gestoßen. Schade, das wäre wohl zu einfach gewesen. Andererseits halte ich es bei bestimmten Tabellen durchaus für sinnvoll, im HTML Hinweise auf die Datentypen der Spalten/Zellen hinterlegen zu können. Und da sind wir mMn eins zwei fix bei Klassen für die Tabellenzellen. Wenn man so vorgeht, gehört aber auch an die Zellen für Text eine Klasse, selbst wenn sie nicht für die Formatierung der Zelle mit CSS benutzt wird.

Tschö, Auge

[Felix Riesterer]

Lieber Lothar,

wenn in Deiner Tabelle die Zahlen in der immer gleichen Spalte stehen, dann kannst Du mit dem :nth-child-Selektor diese rechtsbündig darstellen:

/* Inhalte in der dritten Spalte rechtsbündig */
#meine-tabelle td:nth-child(3) {
  text-align: right;
}

Wenn Deine Tabelle aber so Sachen wie colspan oder rowspan verwendet, dann klappt das eventuell nicht zuverlässig, weil dann die Zählung der Zellen auf CSS-Ebene anders funktioniert. CSS zählt die Kindelemente, deren Anzahl dann natürlich verändert ist, was ja auch logisch ist, weil zusammengefasste Zellen oder Zeilen die Anzahl der Spalten ändert.

Liebe Grüße

Felix Riesterer

[Auge]

Hallo

Wenn Deine Tabelle aber so Sachen wie colspan oder rowspan verwendet, dann klappt das eventuell nicht zuverlässig, weil dann die Zählung der Zellen auf CSS-Ebene anders funktioniert. CSS zählt die Kindelemente, deren Anzahl dann natürlich verändert ist, was ja auch logisch ist, weil zusammengefasste Zellen oder Zeilen die Anzahl der Spalten ändert.

Zudem sollte Lothar auch darüber nachdenken, ob sich die Struktur der Tabelle (zumindest voraussichtlich) nicht mehr ändert. Sonst kann es passieren, dass eine neue Spalte vor der zu formatierenden Spalte eingefügt wird, womit auch in diesem Fall die Zählung per CSS nicht mehr die gewünschte Spalte trifft.

Tschö, Auge

[Lothar Leser]

Hallo Auge,

Zudem sollte Lothar auch darüber nachdenken, ob sich die Struktur der Tabelle (zumindest voraussichtlich) nicht mehr ändert. Sonst kann es passieren, dass eine neue Spalte vor der zu formatierenden Spalte eingefügt wird, womit auch in diesem Fall die Zählung per CSS nicht mehr die gewünschte Spalte trifft.

Es ist viel schlimmer: In derselben Spalte stehen entweder Zahlenwerte, oder Bemerkungen. Leider ist das nicht regelmäßig.

Aber eine Klasse pro Zelle ist eine Lösung, weil die Tabelle sowieso mit PHP erzeugt wird. Da kann ich die passende Klasse im Ausgabemodul vorsehen.

Danke an Alle
Lothar

[Rolf B]

Hallo Lothar Leser,

ein Nachtrag: Ausrichten am Dezimalkomma ist nicht vorgesehen. Zumindest nicht, wenn die Anzahl der Nachkommastellen variabel ist.

Bei fixer Anzahl und einem Font, bei dem alle Ziffern gleich breit sind (sollten die meisten sein) reicht einfach rechts ausrichten.

Bei variabler Anzahl könnte man die Nachkommastellen rechts mit Nullen auffüllen. Wenn das semantisch irreführend ist (weil es eine Genauigkeit suggeriert, die die Zahlen nicht hergeben), kann man auch \u2007 (Figure Space) zum Auffüllen nehmen.

Rolf

[MudGuard]

Hi,

ein Nachtrag: Ausrichten am Dezimalkomma ist nicht vorgesehen. Zumindest nicht, wenn die Anzahl der Nachkommastellen variabel ist.

ich meine, daß es da mal einen Wert gab bei text-align für Ausrichtung an einem Zeichen. Wurde aber von den Browser-Herstellern nie implementiert und ist dann irgendwann wieder aus dem Standard rausgeflogen …

Ja, gefunden, mein Gedächtnis trügt mich nicht: text-align: <string>

cu,
Andreas a/k/a MudGuard

[Lothar Leser]

Hallo,

ich meine, daß es da mal einen Wert gab bei text-align für Ausrichtung an einem Zeichen. Wurde aber von den Browser-Herstellern nie implementiert und ist dann irgendwann wieder aus dem Standard rausgeflogen …

Ja, gefunden, mein Gedächtnis trügt mich nicht: text-align: <string>

Firefox scheint das zu unterstützen.

      td { text-align: right ',';
      }

Grüße
Lothar

[Rolf B]

Hallo Lothar,

meiner nicht (FF 128.5.0esr), in den Entwicklerwerkzeugen steht "Ungültiger Eigenschaftswert".

td { 
  width: 10em;
  border: thin solid black;
  text-align: right ',';
}

Geht hier weder mit "," noch mit ',', und auch nicht mit Punkt statt Komma. Ohne "right", so wie im Spec-Beispiel, geht's auch nicht.

Es ist aber auch so, dass das nur zwei Entwicklungsstände der CSS2 Spec (März 1998 und Mai 1998) das nachvollziehbar enthalten. Danach folgt die 2008er Version, da ist es schon raus. In der finalen 2011-er Version fehlt es auch. Zwischen 1998 und 2008 tobten die Browserkriege und offenbar sind da alle Zwischenstände verbrannt 😉

Rolf

[Gunnar Bittersmann]

@@Lothar Leser

Firefox scheint das zu unterstützen. td { text-align: right ','; }

Mir scheint, der Schein trügt.

Oder kannst du ein Online-Beispiel verlinken und die Version deines Firefoxes angeben?

BTW, selbst nach dem von dir verlinkten Uralt-Stand der Spezifikation sollte Firefox da nichts ausrichten können, weil Syntaxfehler. Anno dazumals waren right und ',' erlaubt, aber nicht beides zusammen. (Die Erklärung von | stand auch damals schon in der Spec.)

Aber wie schon gesagt wurde, wurde die Ausrichtung anhand des Dezimaltrennzeichens wohl nie in irgendeinem Browser implementiert und verschwand wieder aus der Spec.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Rolf B

… einem Font, bei dem alle Ziffern gleich breit sind (sollten die meisten sein)

Ähm nö, wieso?

Ob Proportionalziffern oder Tabellenziffern Default sind, liegt im Ermessen des Schriftdesigners. Bei Abril sind’s Proportionalziffern; bei Source Serif Pro sind’s Tabellenziffern:

Ebenso im Ermessen des Schriftdesigners: ob Versalziffern oder Mediävalziffern Default sind. Bei Abril ist das selbst innerhalb der Schriftfamilie verschieden: bei Abril Display sind’s Versalziffern; bei Abril Text sind’s Mediävalziffern.

Wenn man was anderes als den Default haben möchte, muss man das als OpenType-Feature angeben (und natürlich Fonts verwenden, die Versalziffern und Mediävalziffern anbieten). Und ja, man will. In Überschriften, Fließtext etc. will man i.d.R. Proportionalziffern; in Tabellen – nun ja – Tabellenziffern:

body  { font-variant-numeric: proportional-nums lining-nums }
table { font-variant-numeric: tabular-nums lining-nums }

Und beim Tagesspiegel wollen wir Abril Text mit Versalziffern. Beispielartikel: Fußball-WM 2034 findet in Saudi-Arabien statt

Bei variabler Anzahl könnte man die Nachkommastellen rechts mit Nullen auffüllen. Wenn das semantisch irreführend ist (weil es eine Genauigkeit suggeriert, die die Zahlen nicht hergeben), kann man auch \u2007 (Figure Space) zum Auffüllen nehmen.

So sollte es sein. Bei der Calibri ist es das nicht, siehe obiger Screenshot. Und wer denkt, ich hätte einen Knick in der Optik, kann im ☞ Codepen im Hintergrund eine Linie zuschalten. (Da bin ich gerade erst Lucas de Groot, der die Calibri gemacht hat, übern Weg gelaufen. Vielleicht denk ich das nächste Mal dran, ihn zu fragen.)

Bei der Source Sans Pro stimmt die Breite des figure space mit der Breite der Tabellenziffern überein. (Im Codepen Source Sans Pro zuschalten, so man die Schrift lokal installiert hat.)

Bei der unteren Tabelle hab ich die Ausrichtung durch Padding in ch gemacht. Da stimmt’s dann auch in der Calibri; die Tabellenziffern sind jeweils 1ch breit.

Kwakoni Yiquan