Tabellenspalte rechtsbündig definieren - wie geht das?

[Peter Trinkler]

Hallo SELFHTMLer,

bin noch ziemlicher Anfänger und habe mich gestern schon mal kurz hier gemeldet wegen dem zentralen Definieren von Schriftgrösse und  Schriftart in einer Tabelle. Durch eure Hilfe bin ich auch super weitergekommen, ein kleines Problem habe ich aber noch, und zwar: Wie kann ich eine Tabellenspalte in einer Tabelle rechtsbündig definieren?

Das Ganze sieht bei mir bis jetzt folgendermassen aus:

<style type="text/css">
  table tr td{
   font-size:18px;
   font-family:Verdana
  }
</style>

<table border="0">
<tr>
<td>Hans Muster</td>
<td>125</td>
</tr><tr>
<td>Peter Meier</td>
<td>12</td>
</tr>
</table>

Die Zahlenfelder sollen rechtsbündig sein. Wie bekomme ich das hin bzw. wie kann ich das zentral definieren? Für eine konkrete Lösung in dem angegebenen Beispiel (und nicht einfach ein Verweis in der Art "Studiere mal die ganzen CSS-Seiten", usw.) wäre ich wirklich dankbar.

Mit freundlichen Grüssen aus der Schweiz
Peter Trinkler

[wahsaga]

hi,

Die Zahlenfelder sollen rechtsbündig sein. Wie bekomme ich das hin bzw. wie kann ich das zentral definieren?

zum ausrichten von text ist text-align zuständig.

Für eine konkrete Lösung in dem angegebenen Beispiel (und nicht einfach ein Verweis in der Art "Studiere mal die ganzen CSS-Seiten", usw.) wäre ich wirklich dankbar.

trotzdem sei dir das dringend empfohlen, bevor du hier weitere fragen dieser art stellst - das _ist_ grundlagenwissen im bereich CSS. und im dir dieses nahezubringen, ist u.a. selfhtml da.

gruß,
wahsaga

[Peter Trinkler]

Hallo wahsaga,

zum ausrichten von text ist text-align zuständig.

Danke für deine Antwort. Da hab ich mich wohl falsch ausgedrückt. Ich weiss natürlich schon, wie man etwas rechtsbündig definiert. Mein Problem in der angegebenen Tabelle ist, wie kann ich sicherstellen, dass NUR das Zahlenfeld rechtsbündig wird (nicht aber die gesamte restliche Tabelle) .... aber vielleicht ist das ja auch Grundlagenwissen ..... wäre für Hilfe aber dennoch dankbar.

Grüsse Peter

[Maz]

Moinsen,

die Zahelnfelder kommen in eine TD-Klasse welche rechtsbündigen Text darstellt, die anderen in eine TD-Klasse (oder in das "Defalut-TD") wo die andere Formatierung definiert wurde.

Du musst also den TDs der Zahlenfelder eine eigene CSS-Klasse zuweisen.

[Peter Trinkler]

Hallo Maz,

Du musst also den TDs der Zahlenfelder eine eigene CSS-Klasse zuweisen.

Und wo steht, wie ich das tun kann?
Danke schon mal für die Antwort. Peter

[Maz]

Moinsen,

vielleicht schaust Du doch mal in die Grundlagen-Tuts ;)

"nacktes" TD:
<table><tr><td></td></tr></table>

würde in der CSS Datei so formatiert:
td{text-align: right;}

ein TD mit einer Klasse:
<table><tr><td class="right"></td></tr></table>

würde in der CSS Datei so formatiert:
td.right{text-align: right;}
bzw.
.right{text-align: right;}

Ich empfehle Dir aber wirklich, mal die CSS Grundlagen anzusehen.
http://de.selfhtml.org/css/index.htm
und
http://www.css4you.de

[Peter Trinkler]

"nacktes" TD:
<table><tr><td></td></tr></table>

würde in der CSS Datei so formatiert:
td{text-align: right;}

ein TD mit einer Klasse:
<table><tr><td class="right"></td></tr></table>

würde in der CSS Datei so formatiert:
td.right{text-align: right;}
bzw.
.right{text-align: right;}

Danke für die Antwort, Maz. Aber eines ist mir nun klargeworden: Der Aufwand ist wahrscheinlich kleiner (und die Zeichenanzahl geringer), wenn ich einfach bei jedem rechtsbündigen Feld <div align="center">ZAHL</div> reinknalle. Super, euer CSS, definitiv eine Verkomplizierung (zumindest in diesem Falle), wie mir scheint.

Mit freundlichen Grüssen
Peter

[Peter Trinkler]

Ich meinte natürlich:

..... bei jedem rechtsbündigen Feld <div align="right">ZAHL</div> reinknalle. ...

Peter

[Maz]

Moinsen,

..... bei jedem rechtsbündigen Feld <div align="right">ZAHL</div> reinknalle. ...

was unnötig redundant wäre. Das kannst Du ja, wie schon erwähnt wurde, direkt dem TD zuweisen.
Der Vorteil die Formatierung extern in CSS zu machen, ist eben der, dass Du mit nur einer klitzekleinen Änderung in der CSS Datei z.B. alle rechtsbündigen Inhalte linksbündig machen kannst. Ohne auch nur die HTML Datei anzufassen.

[wahsaga]

hi,

auch wenn du es inzwischen wohl ander siehst:

Aber eines ist mir nun klargeworden: Der Aufwand ist wahrscheinlich kleiner (und die Zeichenanzahl geringer), wenn ich einfach bei jedem rechtsbündigen Feld <div align="center">ZAHL</div> reinknalle. Super, euer CSS, definitiv eine Verkomplizierung (zumindest in diesem Falle), wie mir scheint.

eine änderung der HTML-struktur wäre das ja auch gewesen - und bei deinem beispiel sogar noch mit einem zusätzlichen element!
_das_ ist komplizierter, als es mit CSS zu machen.

gruß,
wahsaga

[Ingo Turski]

Hi,

Der Aufwand ist wahrscheinlich kleiner (und die Zeichenanzahl geringer), wenn ich einfach bei jedem rechtsbündigen Feld <div align="center">ZAHL</div> reinknalle.

Das wäre Unfug, da Du auch dem Element td dieses HTML-Attribut zuweisen könntest.

Super, euer CSS, definitiv eine Verkomplizierung (zumindest in diesem Falle), wie mir scheint.

nö, nur oberflächlich betrachtet. Und der Vorteil ist, daß Du ganz simpel durch Änderung der einen CSS-Zeile die Ausrichtung in allen angesprochenen Elementen auf allen Seiten nachträglich ändern kannst. Oder durch zusätzliche Angaben weitere Formatierungen vornehmen kannst, ohne die HTML-Dateien ändern zu müssen.

freundliche Grüße
Ingo

[Peter Trinkler]

"nacktes" TD:
<table><tr><td></td></tr></table>

würde in der CSS Datei so formatiert:
td{text-align: right;}

ein TD mit einer Klasse:
<table><tr><td class="right"></td></tr></table>

würde in der CSS Datei so formatiert:
td.right{text-align: right;}
bzw.
.right{text-align: right;}

Okay Maz, jetzt hab ich's geschnallt ... und es funktioniert auf meiner Webseite. Super :-)) Klassen definieren, sehr interessant ;-) Herzlichen Dank!!!

Peter

[Ingo Turski]

Hi,

Durch eure Hilfe bin ich auch super weitergekommen

... hast aber das Prinzip leider noch nicht verstanden, da Dir die fertige Lösung lieber war:

table tr td{

Hier sprichst Du völlig unnötig über Nachfahren-Selektoren eine td in einer tr in einem table an. Aufgrund der hohen Spezifität kann das bei weiteren Definitionen zu Problemen führen.

Die Zahlenfelder sollen rechtsbündig sein. Wie bekomme ich das hin bzw. wie kann ich das zentral definieren?

Wie soll CSS wissen, welche TDs rechtsbündig ausgerichtet werden sollen? Ohne Eingriff in des HTML (z.B. wie bereitsd gesagt durch Einfügen einer Klasse) geht das nicht - jedenfalls nicht mit dem aktuellen CSS 2.1.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Die Zahlenfelder sollen rechtsbündig sein. Wie bekomme ich das hin bzw. wie kann ich das zentral definieren?
Wie soll CSS wissen, welche TDs rechtsbündig ausgerichtet werden sollen? Ohne Eingriff in des HTML (z.B. wie bereitsd gesagt durch Einfügen einer Klasse) geht das nicht - jedenfalls nicht mit dem aktuellen CSS 2.1.

Doch - die Zahlenfelder sind in der zweiten Spalte.

Das läßt sich per CSS 2.0 oder auch 2.1 wunderbar ansprechen.
Sowohl :firstchild als auch der Nachbargeschwister-Selektor existieren bereits in CSS 2.0

td:firstchild + td ist als Selektor also geeignet.

Woran es scheitert, ist nicht CSS, sondern der IE, der das nicht umsetzen kann.

cu,
Andreas

[Ingo Turski]

Hi,

Woran es scheitert, ist nicht CSS, sondern der IE, der das nicht umsetzen kann.

stimmt. Ich neige wohl dazu, dem IE manchmal doch etwas zuviel CSS 2 zuzutrauen. ;-)

freundliche Grüße
Ingo