Tabellenformatierung

[Markus]

Hallo,

ich habe eine Tabelle erstellt und benötige etwas Hilfe bei der Formatierung mit CSS.

<tr>
    <td>Adresse</td>
    <td>Tag</td>
    <td>Uhrzeit</td>
  </tr>

Die Spalte mit der Uhrzeit sollte rechtsbündig und mit etwas (ca. 2 cm) Abstand zur Spalte "Tag" ausgerichtet sein.

Wäre nett, wenn mir jemand helfen könnte.

Grüße
Markus

[Sebastian Becker]

Hallo, Markus,

Die Ausrichtung erfolgt per CSS mit ...

text-align:right;

Den Abstand stellst Du ein mit ...

padding:60px;

Der Wert kann soviel ich weiß nur in Pixel angegeben werden - die optimale Größe ermittelst Du am besten experimentell ...

Grüße,

Sebastian

[Gunnar Bittersmann]

padding:60px;
Der Wert kann soviel ich weiß nur in Pixel angegeben werden

Sebastian,
SELFHTML: padding sagt es dir besser.

die optimale Größe ermittelst Du am besten experimentell ...

Optimal wäre wohl die Angabe abhängig von der Schriftgröße – also in em.

Live long and prosper,
Gunnar

[Sebastian Becker]

Hallo, Gunnar,

padding:60px;
Der Wert kann soviel ich weiß nur in Pixel angegeben werden
SELFHTML: padding sagt es dir besser.

O.K., vermutlich kann man sogar %, in, cm, mm, em, ex, pt, und pc verwenden (wo kann man das genau nachlesen?) - px ist aber üblich und naheliegend ...

Grüße,

Sebastian

[Ashura]

Hallo Sebastian.

padding:60px;
Der Wert kann soviel ich weiß nur in Pixel angegeben werden
SELFHTML: padding sagt es dir besser.

O.K., vermutlich kann man sogar %, in, cm, mm, em, ex, pt, und pc verwenden

Die Maßeinheit „pc“ gibt es nicht in CSS.

(wo kann man das genau nachlesen?)

Fällt es so schwer, die von Gunnar verlinkte Seite auch ein Mal durchzulesen und auf diesen Link zu stoßen?

• px ist aber üblich und naheliegend ...

Weder noch.

Einen schönen Dienstag noch.

Gruß, Ash*feel free*ura

[Ashura]

Hallo.

O.K., vermutlich kann man sogar %, in, cm, mm, em, ex, pt, und pc verwenden

Die Maßeinheit „pc“ gibt es nicht in CSS.

Ich habe nichts gesagt...

Einen schönen Dienstag noch.

Gruß, Ash*feel free*ura

[Gunnar Bittersmann]

wo kann man das genau nachlesen?

Sebastian,
In der CSS 2.1 Specification oder auch in der deutschen Übersetzung der CSS2-Spezifikation vielleicht? Kapitel 8.4, 4.3.2, 4.3.3.

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

<tr>
    <td>Adresse</td>
    <td>Tag</td>
    <td>Uhrzeit</td>
  </tr>

Markus,
Ich nehm mal an, die Tabelle soll noch mehr Zeilen haben?

Um die dritte Zelle in jeder Zeile zu selektieren:
td:first-child+td+td {padding-left: 3em; text-align: right}

IEs haben aber sowohl mit Pseudoklassen als auch mit Selektoren für benachbarte Elemente ihre Probleme.

Da bleibt nur, allen dritten td in jeder Zeile eine Klassenangabe mitzugeben und die Formatierung für die Klasse anzugeben.

Live long and prosper,
Gunnar

[Axel Richter]

Hallo,

IEs haben aber sowohl mit Pseudoklassen als auch mit Selektoren für benachbarte Elemente ihre Probleme.
Da bleibt nur, allen dritten td in jeder Zeile eine Klassenangabe mitzugeben und die Formatierung für die Klasse anzugeben.

Der IE kann in COL-Elementen viele CSS-Angaben umsetzten, die andere Browser dort nicht umsetzen. Das könnte man hier ausnutzen:

<style type="text/css">
 table {width:100%;}
 td:first-child+td+td {text-align: right; background-color:yellow;}
</style>

<table border="1">
<colgroup>
 <col width="50%">
 <col width="30%">
 <col width="20%" style="text-align: right; background-color:yellow;">
</colgroup>
 <tr>
  <td>Adresse</td>
  <td>Tag</td>
  <td>Uhrzeit</td>
 </tr>
 <tr>
  <td>Adresse1</td>
  <td>Tag1</td>
  <td>10:45</td>
 </tr>
</table>

viele Grüße

Axel

[Gunnar Bittersmann]

Der IE kann in COL-Elementen viele CSS-Angaben umsetzten, die andere Browser dort nicht umsetzen. Das könnte man hier ausnutzen:

Jo, Axel. Nur dass das style-Attribut der Trennung zwischen Dokumentstruktur und Layout widerspricht. Dann lieber:

<style type="text/css">  
[code lang=css] table {width: 100%}  
 #adresse {width: 50%}  
 #tag {width: 30%}  
 #uhrzeit, td:first-child+td+td {text-align: right; background-color: yellow}

</style>

<table>
<colgroup>
 <col id="adresse">
 <col id="tag">
 <col id="uhrzeit">
</colgroup>
 <tr>
  <td>Adresse</td>
  <td>Tag</td>
  <td>Uhrzeit</td>
 </tr>
 <tr>
  <td>Adresse1</td>
  <td>Tag1</td>
  <td>10:45</td>
 </tr>
</table>[/code]

Live long and prosper,
Gunnar