nicht angemeldet
Tabellenzelle im Browserfenster horizontal zentrieren
Hallo an alle SelfHTML-Leser !
Ich habe ein kleines Tabellenzellenausrichtungsproblem:
Die Tabelle besteht aus einer Zeile und drei Spalten, also aus drei
nebeneinanderliegenden Zellen, die "vertikal oben" ausgerichtet sind.
Der Inhalt der linken Zelle soll in der Zelle linksbündig gesetzt sein. ( Das habe ich erreicht via <td valign="top" align="left"> )
Der Inhalt der mittleren Zelle soll in der Zelle zentral gesetzt sein. ( Das habe ich erreicht via <td valign="top" align="center"> )
Der Inhalt der rechten Zelle soll in der Zelle rechtsbündig gesetzt sein. ( Das habe ich erreicht via <td valign="top" align="right"> )
Zusätzlich möchte ich noch folgendes erreichen:
Der Inhalt der mittleren Zelle soll nicht nur in der Zelle zentral
gesetzt sein, sondern die mittlere Zelle selbst soll im Browser-
fenster horizontal auch immer mittig ausgerichtet und dabei so breit
wie möglich sein.
(Daraus ergibt sich, daß die linke und die rechte Zelle wohl die
selbe minimal mögliche Breite haben müssen, in welche der Text der
einen Zelle gut und der Text der anderen Zelle gerade noch hinein-
passt. Wenn man diese minimale Breite verdoppelt und von der Gesamt-
tabellenbreite subtrahiert, erhält man die maximal mögliche Breite
für die mittlere Zelle.)
Wie kann man so etwas in HTML so einfach wie möglich imolementieren ?
Für Antworten bedanke ich mich im voraus
und verbleibe
mit freundlichem Gruss
als LiveSucks
-
Hallo,
Der Inhalt der mittleren Zelle soll nicht nur in der Zelle zentral
gesetzt sein, sondern die mittlere Zelle selbst soll im Browser-
fenster horizontal auch immer mittig ausgerichtet und dabei so breit
wie möglich sein.Das macht die Tabelle eigentlich fast von selbst. Wenn die Tabelle 100% der Breite des Fensters einnimmt und die linke und die rechte Spalte eine fixe (oder auch prozentuale) Breite haben, dann wird die mittlere Spalte so breit, wie der Rest. Mach es aber gleich mit Style-angaben, statt mit den width-Attributen.
<table border="1" style="width:100%;">
<tr>
<td style="verticla-align:top; text-align:left; width:100px;">Linker Text Linker Text Linker Text Linker Text </td>
<td style="verticla-align:top; text-align:center;">Mitte</td>
<td style="verticla-align:top; text-align:right; width:100px;">Rechter Text Rechter Text Rechter Text Rechter Text </td>
</tr>
</table>Statt width:100px; könnte auch width:20%; stehen.
Gruß
Axel
-
Hallo,
zunächst mal möchte ich mich für die Antwort und die erhaltene Aufmerksamkeit bedanken.
Der Vorschlag, die beiden äußeren Tabellenspalten gleich breit vorzugeben, beinhaltet im Prinzip das, was ich bereits behelfsmässig gebastelt habe.
Eine Sache ist dabei leider ausser Acht gelassen:
"...die mittlere Zelle selbst soll ...dabei so breit wie möglich sein".
Diese mögliche Breite hängt u. a. von der verwendeten Schriftart und -grösse ab, welche der Benutzer - zumindest im Internet-Explorer - selbst einstellen kann.
Auch setze ich eine derartige Tabelle nicht bloss einmal ein, sondern mehrmals, wobei sich die Inhalte in den Zellen unterscheiden, was sich wieder auf die Zellenbreiten auswirkt, was bedeuten würde, dass ich für jede einzelne Tabelle die optimalen Breiten von Hand einstellen müsste.
Die mögliche Breite sollte daher zur Laufzeit dynamisch ermittelt und nicht durch eine (prozentuale) Breitenangabe durch den HTML-Programmierer vorgegeben vorgegeben werden.
Inzwischen befürchte ich, dass sich das ganze nicht mit reinem HTML lösen lässt, sondern ich JavaScript oder ähnliches einsetzen muss.
Werd mich da mal dranmachen.
Nochmals Danke an alle, die mir bisher geantwortet haben.
Mit freundlichem Gruß
LiveSucks
Hallo,
Der Inhalt der mittleren Zelle soll nicht nur in der Zelle zentral
gesetzt sein, sondern die mittlere Zelle selbst soll im Browser-
fenster horizontal auch immer mittig ausgerichtet und dabei so breit
wie möglich sein.Das macht die Tabelle eigentlich fast von selbst. Wenn die Tabelle 100% der Breite des Fensters einnimmt und die linke und die rechte Spalte eine fixe (oder auch prozentuale) Breite haben, dann wird die mittlere Spalte so breit, wie der Rest. Mach es aber gleich mit Style-angaben, statt mit den width-Attributen.
<table border="1" style="width:100%;">
<tr>
<td style="verticla-align:top; text-align:left; width:100px;">Linker Text Linker Text Linker Text Linker Text </td>
<td style="verticla-align:top; text-align:center;">Mitte</td>
<td style="verticla-align:top; text-align:right; width:100px;">Rechter Text Rechter Text Rechter Text Rechter Text </td>
</tr>
</table>Statt width:100px; könnte auch width:20%; stehen.
Gruß
Axel
-
Hi
zunächst mal möchte ich mich für die Antwort und die erhaltene Aufmerksamkeit bedanken.
So schlimm isses schon? Nun, für grwöhnlich wird _imemr_ geholfen, wenn bestimmte Konventionen (Die stehen in der FAQ...) eingehalten werden.
Der Vorschlag, die beiden äußeren Tabellenspalten gleich breit vorzugeben, beinhaltet im Prinzip das, was ich bereits behelfsmässig gebastelt habe.
Eine Sache ist dabei leider ausser Acht gelassen:
"...die mittlere Zelle selbst soll ...dabei so breit wie möglich sein".
wie wär's dann mit einer spalte, die 100% breit ist
?Diese mögliche Breite hängt u. a. von der verwendeten Schriftart und -grösse ab, welche der Benutzer - zumindest im Internet-Explorer - selbst einstellen kann.
hä?
Auch setze ich eine derartige Tabelle nicht bloss einmal ein, sondern mehrmals, wobei sich die Inhalte in den Zellen unterscheiden, was sich wieder auf die Zellenbreiten auswirkt, was bedeuten würde, dass ich für jede einzelne Tabelle die optimalen Breiten von Hand einstellen müsste.
Das versteh ich nicht? Redest du von _Breite_ oder _Höhe_?
Die mögliche Breite sollte daher zur Laufzeit dynamisch ermittelt und nicht durch eine (prozentuale) Breitenangabe durch den HTML-Programmierer vorgegeben vorgegeben werden.
Zeig mir einen HTML-Programmierer und du bekommst 1 Mio ! *scnr*
Inzwischen befürchte ich, dass sich das ganze nicht mit reinem HTML lösen lässt, sondern ich JavaScript oder ähnliches einsetzen muss.
Und CSS? Ich bin der Meinung, dein Problem noch nicht erfasst zu haben, und _deswegen_ geht es noch nicht...
[...]
Hab dein TOFU mal gelöscht... ;-)
Fabian
-
-