Textausrichtung innerhalb einer Tabellenzelle

[pixxma]

Hallo,

ich möchte in einer Tabellenzelle folgendes darstellen:
------------------------------------------------
|  Text links                    Text rechts   |
------------------------------------------------

Die Ausrichtung des rechten Textes habe ich wie folgt versucht:

  
<table width="100%">  
  <tr>  
    <td style="background-image:url(bilder/verlauf.jpg);">  
       <span style="padding-left:10px;">Text links</span>  
       <span style="padding-right:10px; text-align:right;">Text rechts</span>  
    </td>  
  </tr>  
</table>  

Warum wird der Text "Text rechts" nicht rechtsbündig gesetzt und wie würde man es hinbekommen?

MfG

pixxma

[Gunnar Bittersmann]

@@pixxma:

nuqneH

Warum wird der Text "Text rechts" nicht rechtsbündig gesetzt

Wegen „'text-align' […] Angewendet auf: Elemente auf Blockebene“. [CSS2 §16.2] 'span' ist kein solches.

und wie würde man es hinbekommen?

Mit 'float'.

Qapla'

[pixxma]

Hallo,

»» und wie würde man es hinbekommen?

Mit 'float'.

Öh, ich habe es jetzt mal so ausprobiert und es klappt auch:

  
<table width="100%">  
  <tr>  
    <td style="background-image:url(bilder/verlauf.jpg);">  
       <span style="padding-left:10px; float:left;">Text links</span>  
       <span style="padding-right:10px; float:right;">Text rechts</span>  
    </td>  
  </tr>  
</table>

Meintest Du es so?

MfG

pixxma

[suit]

Meintest Du es so?

Eines der floats kannst du eigentlich einsparen indem du der Zelle ein entsprechendes text-align verpasst bzw. den Vorgabewert belässt.

Viele ältere Rechner haben probleme mit zu vielen Floats (geht auf die Performance).

[pixxma]

Hallo,

Eines der floats kannst du eigentlich einsparen indem du der Zelle ein entsprechendes text-align verpasst bzw. den Vorgabewert belässt.
Viele ältere Rechner haben probleme mit zu vielen Floats (geht auf die Performance).

Danke für den Tip. Ich habe es jetzt so gemacht und hinbekommen:

  
<table width="100%">  
  <tr>  
    <td style="background-image:url(bilder/verlauf.jpg); text-align:right;">  
       <span style="padding-left:10px; float:left;">Text links</span>  
       <span style="padding-right:10px;">Text rechts</span>  
    </td>  
  </tr>  
</table>

MfG

pixxma

[suit]

Du kannst auch eines der span-Element einsparen und den Abstand zum Zellenrand über den Innenabstand der Zelle selbst regeln - das macht den Code nochmal kürzer.

Und wie gesagt: float: right und die Voreinstellung belassen (text-align: left) - das macht's nochmal kürzer.

Ebenso solltest du dich von HTML-Formatierung trennen und gänzlich mit CSS arbeiten - idealerweise in einem separaten CSS-File, nicht inline.

[pixxma]

Hallo,

Du kannst auch eines der span-Element einsparen und den Abstand zum Zellenrand über den Innenabstand der Zelle selbst regeln - das macht den Code nochmal kürzer.

Die padding-Werte sind in der Endversion evtl. nicht identisch, deswegen lasse ich sie lieber beide da.

Und wie gesagt: float: right und die Voreinstellung belassen (text-align: left) - das macht's nochmal kürzer.

Also das klappt bei mir nicht. Wenn ich bei dem 2. span float:right hinzufüge, erhalte ich in der Browseransicht automatisch eine zweite Tabellenzeile darunter.

Ebenso solltest du dich von HTML-Formatierung trennen und gänzlich mit CSS arbeiten - idealerweise in einem separaten CSS-File, nicht inline.

Ja, mit der Tabellenbreite, das war nicht so gut... Externes CSS kommt noch, ich verwende gerade nur lokales CSS, um alles mögliche an der Tabelle auszuprobieren. - Verkürzt sieht sie jetzt so aus:

  
<table style="width:100%;">  
  <tr>  
    <td style="background-image:url(bilder/verlauf.jpg); text-align:right;">  
    <span style="padding-left:10px; float:left;">Text links</span>  
    <span style="padding-right:10px;">Text rechts</span>  
    </td>  
  </tr>  
</table>

Danke für Deine/Eure Bemühungen

MfG

pixxma

[suit]

Die padding-Werte sind in der Endversion evtl. nicht identisch, deswegen lasse ich sie lieber beide da.

Das spielt keine Rolle - du kannst sie auch im übergeordneten Element getrennt angeben.

[pixxma]

Hallo,

»» Die padding-Werte sind in der Endversion evtl. nicht identisch, deswegen lasse ich sie lieber beide da.

Das spielt keine Rolle - du kannst sie auch im übergeordneten Element getrennt angeben.

Ja, stimmt. Mit padding allgemein in der übergeordneten Tabellenzelle.
Danke!

MfG

pixxma