Tabellenspalten unterschiedlich formatieren

[Jürgen Berkemeier]

Hallo,

mit:

<style type="text/css">
  <!--
   #Liste td {vertical-align:middle;text-align:center}
  //-->
  </style>
(die Tabelle hat die ID "Liste")

formatiere ich eine Tabelle. Nun möchte ich aber, dass die erste und letzte Spalte linksbündig und der Rest mittig ausgerichtet sind. Wie kann ich mittels CSS eine einzelne Tabellenspalte gezielt formatieren?

Gruß,     Jürgen

[Vimes]

formatiere ich eine Tabelle. Nun möchte ich aber, dass die erste und letzte Spalte linksbündig und der Rest mittig ausgerichtet sind. Wie kann ich mittels CSS eine einzelne Tabellenspalte gezielt formatieren?

Hallo Jürgen,

das geht genauso, wie du es für die Tabelle gemacht hast.
<td id="MeineID">...</td>
Diese Zelle kannst du über die ID genaus ansprechen, wie deine Tabelle.

Oder über Klassen, falls mehrere Zellen "betroffen" sind, schau dir dazu doch [url=http://selfhtml.teamone.de/css/formate/zentrale.htm#klassen] an.

mit td.meineKlasse {...}

wird jede Tabellenzelle der Klasse class="meineKlasse" entsprechend formatiert.
btw. Überleg Dir, ob das Klassenkonzept für Deine Tabelle konzeptuell vielleicht auch passender ist (falls es beispielsweise mehrere davon geben wird).

[Cheatah]

Hi,

<td id="MeineID">...</td>

wenn ich die Frage richtig verstanden habe, geht es um eine ganze Spalte, also um mehrere <td>s. Eine ID ist dokumentweit eindeutig, darf also nicht mehrfach vorkommen, so dass sie hier wohl nicht wirklich geeignet ist.

[url=http://selfhtml.teamone.de/css/formate/zentrale.htm#klassen] an.

</faq/#Q-19> ;-)

Cheatah

[Vimes]

</faq/#Q-19> ;-)
Cheatah

Sorry und offtopic, habe nach einem halben Jahr Abstinenz (und anderen Foren - gibt es die?)  glatt vergessen, wie das ging - und natürlich die FAQ bzw. Vorschau geflissentlich ausgelassen - brauch ich ja nicht. Globe Besserung

[Cheatah]

Hi,

Nun möchte ich aber, dass die erste und letzte Spalte linksbündig und der Rest mittig ausgerichtet sind. Wie kann ich mittels CSS eine einzelne Tabellenspalte gezielt formatieren?

mit :first-child und :last-child. Das Problem ist, dass insbesondere der IE hierbei versagt; ich empfehle daher, den <td>s Klassen zu verpassen.

Cheatah

P.S.: CSS/3.0 kennt dann sogar nth-child(), mit dem man beliebige Spalten selektieren kann - z.B. jede zweite.

[Jürgen Berkemeier]

Hallo Chetah,

ich wollte vermeiden, jedem ersten und letzten <td> eine ID zu spendieren, da es aber keine andere Lösung zu geben scheint, werde ich nich daran vorbei kommen. Es lebe cut and paste.

Gruß,     Jürgen

[Vimes]

ich wollte vermeiden, jedem ersten und letzten <td> eine ID zu spendieren, da es aber keine andere Lösung zu geben scheint, werde ich nich daran vorbei kommen. Es lebe cut and paste.

Hallo Jürgen,

Was stört dich denn an den Klassen? Sind auch semantisch passender, da du ja eine ganze Gruppe/Klasse von td's hast, die bestimmte Eigenschaften haben.

[Cheatah]

Hi,

ich wollte vermeiden, jedem ersten und letzten <td> eine ID zu spendieren,

Klasse, nicht ID! Jede ID darf nur ein einziges Mal im gesamten Dokument vorkommen.

da es aber keine andere Lösung zu geben scheint, werde ich nich daran vorbei kommen. Es lebe cut and paste.

Na, mit _Cut_ & Paste kommst Du auch nicht wirklich weit *g*

Cheatah

[wahsaga]

hi,

ich wollte vermeiden, jedem ersten und letzten <td> eine ID zu spendieren,
Klasse, nicht ID! Jede ID darf nur ein einziges Mal im gesamten Dokument vorkommen.

dem hat er ja theoretisch mit obiger aussage auch (noch) nicht widersprochen.

gruss,
wahsaga

[Cheatah]

Hi,

ich wollte vermeiden, jedem ersten und letzten <td> eine ID zu spendieren,
Klasse, nicht ID! Jede ID darf nur ein einziges Mal im gesamten Dokument vorkommen.
dem hat er ja theoretisch mit obiger aussage auch (noch) nicht widersprochen.

nun ja, wenn es nur jeweils ein erstes und letztes <td> gibt ... :-)

Cheatah

[Jürgen Berkemeier]

Hallo Cheatah,

Klasse, nicht ID! Jede ID darf nur ein einziges Mal im gesamten Dokument vorkommen.

Stimmt! Man soll sich nicht davon beeindrucken lassen, dass es im IE und im Mozolla funktioniert.

Gruß,     Jürgen

[Cheatah]

Hi,

Man soll sich nicht davon beeindrucken lassen, dass es im IE und im Mozolla funktioniert.

man soll sich _nie_ davon beeindrucken lassen, dass irgendetwas auf irgendwelchen Systemen funktioniert. Dieser Fehler wird leider allzu oft gemacht ...

Cheatah

[Axel Richter]

Hi,

Nun möchte ich aber, dass die erste und letzte Spalte linksbündig und der Rest mittig ausgerichtet sind. Wie kann ich mittels CSS eine einzelne Tabellenspalte gezielt formatieren?

mit :first-child und :last-child. Das Problem ist, dass insbesondere der IE hierbei versagt; ich empfehle daher, den <td>s Klassen zu verpassen.

*grrr* Ich _kann_ diese IE-Flamerei nicht mehr lesen. Der IE kann dafür COL-Elemente entsprechend formatieren:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle</title>
<style type="text/css">
<!--
table {border:1px solid black; width:100%;}
td {border:1px solid black; width:20%;}
tr>td {text-align:center;}
td:first-child {text-align:left;}
td:last-child {text-align:right;}
-->
</style>
</head>
<body>
<table >
<colgroup>
 <col style="text-align:left; background-color:yellow;">
 <col style="text-align:center; background-color:green;">
 <col style="text-align:center; background-color:yellow;">
 <col style="text-align:center; background-color:green;">
 <col style="text-align:right; background-color:yellow;">
</colgroup>
<tr>
 <td>links</td>
 <td>mitte</td>
 <td>mitte</td>
 <td>mitte</td>
 <td>rechts</td>
</tr>
<tr>
 <td>links</td>
 <td>mitte</td>
 <td>mitte</td>
 <td>mitte</td>
 <td>rechts</td>
</tr>
<tr>
 <td>links</td>
 <td>mitte</td>
 <td>mitte</td>
 <td>mitte</td>
 <td>rechts</td>
</tr>
</table>
</body>
</html>

Für das mit der Farbe ist Gecko zu blöd :-P

viele Grüße

Axel

[Kurz und bündig - der Rest in SelfHTML Kap. CSS]

<tr style="text-align : left"></tr>

...align : center...

...align : left...

[Jürgen Berkemeier]

Hallo "Kurz und bündig - der Rest in SelfHTML Kap. CSS"

danke für diese aufschlussreiche Antwort.

Gruß,     Jürgen

[Thomas Luethi]

Hallo,

Wie kann ich mittels CSS eine einzelne Tabellenspalte gezielt formatieren?

Fuer gewisse Dinge (Breite, Rahmen, Hintergrund) kann man
theoretisch in HTML das COL-Element benuetzen und dann
mit CSS auch auf Spalten zugreifen:
http://www.w3.org/TR/REC-CSS2/tables.html#q4
Ich weiss nicht, wie praxis-tauglich das ist.
Und die horizontale Ausrichtung, die Du willst,
ist dort nicht erwaehnt.

Fuer Dich bleiben praktisch also nur die Klassen
fuer einzelne Zellen (TD), wie schon meine Vorredner
erwaehnten.

Gruesse,

Thomas

[Jürgen Berkemeier]

Hallo Thomas,

ich habe es mit <colgroup><col id="C1">...</colgroup> versucht. Es wurde aber offensichtlich nur das <col>-Tag formatiert, der Rest der Tabelle hat sich davon nicht beeindrucken lassen. Ich werde also diverse <td> mit einer ID versehen müssen.

Gruß,     Jürgen

[Jürgen Berkemeier]

Hallo,

danke an alle!
Da eine einfache Spaltenübergreifende Formatierung noch nicht von allen Browsern unterstützt wird, habe ich alle <td>s in eine Klasse gesteckt:

<style type="text/css">
<!--
 .ce {vertical-align:middle;text-align:center}
 .le {vertical-align:middle;text-align:left}
//-->
</style>

...
<tr>
 <td class="le">xxx</td>
 <td class="ce">xxx</td>
 <td class="ce">xxx</td>
 <td class="ce">xxx</td>
 <td class="le">xxx</td>
</tr>
...

Gruß,     Jürgen