Forum: PC-Programmierung HTML <table> Frage


von Fosotim (Gast)


Lesenswert?

Guten Tag!

ich hab eine Tabelle, die sieht so aus:

<table style="width:100%">
<tr>
  <td style="width:50px">...</td>
  <td>...</td>
  <td style="width:50px">...</td>
</tr>
</table>

Der Sinn soll sein, dass die linke und die rechte äußere Spalte jeweils 
eine Breite von 50px haben, während die Spalte in der Mitte quasi 100% - 
2*50px haben sollte. Die Spalten enthalten hierbei mindestens ein &nbsp;

Das funktioniert so im Firefox und Chrome, aber nicht im IE7.

Weiß jemand, wie man das im IE7 hinkriegt?

mfg
Fosotim

von Tabellator (Gast)


Lesenswert?

zuerst mal versuchen den IE7 in den Standard-Konformen Modus zu zwingen.
z.B. mit einer ihm genehmen DOCTYPE-Dekl.

xhtml unterstützt der IE übrigens nicht, egal welche Version. Mit HTML4 
oder 5 hast du bessere Chancen.

Ansonsten vielleicht mal ein  "table-layout: fixed" versuchen.

http://de.selfhtml.org/css/eigenschaften/tabellen.htm#table_layout

von Vlad T. (vlad_tepesch)


Lesenswert?

der trick ist glaub ich einfach der mittleren spalte auch noch ein width 
mitzugeben.
ob das jetzt mit 50pixel am rand geht weiß ich nicht.
 macht in meinen Augen  sowiso nicht viel sinn.
Manch einer hat vielleicht ienen sehr hochauflösenden Bildschrim und die 
Schriftgrößen dementsprechend angepassst.

lieber etwas in der art

<table style="width:100%">
<tr>
  <td style="width:10%">...</td>
  <td style="width:80%">...</td>
  <td style="width:10%">...</td>
</tr>
</table>

von Tabellator (Gast)


Lesenswert?

@Vlad:

Das reicht halt nicht immer, z.B. wenn man an der Seite Platz für 
Werbebanner (fixe Breite) haben muss.

Muss aber eigentlich auch ohne gehen. Einfach mal den Seitenquelltext 
von dieser Seite ansehen, interessant ist die

<table id="twocolumns">

Die hier die Spaltenaufteilung macht.

Erste Spalte mit Breitenangabe, zweite ohne. Ganze Table ist auf width: 
100% gestellt.

Scheint mit dem IE zu funktionieren, sonst wär hier viel gemecker.
ABER:
Die Erste Zeile

<!DOCTYPE html>

(HTML5 Doctype)
Bringt den IE in den Standard-Modus, nicht in den verqueren HTML 1.0 
Kompatibilitätsansichts-Modus.

von Vlad T. (vlad_tepesch)


Lesenswert?

Tabellator schrieb:
> Das reicht halt nicht immer, z.B. wenn man an der Seite Platz für
> Werbebanner (fixe Breite) haben muss.

seitenlayout macht man nicht mit tabellen, die sind für Inhalt da

von Sitemaker (Gast)


Lesenswert?

Tabellen =  Pfui...

Mach ein tabellenloses Design mit CSS2 - geht einfacher und wird besser.

von Fosotim (Gast)


Lesenswert?

Vlad Tepesch schrieb:
> Tabellator schrieb:
>> Das reicht halt nicht immer, z.B. wenn man an der Seite Platz für
>> Werbebanner (fixe Breite) haben muss.
>
> seitenlayout macht man nicht mit tabellen, die sind für Inhalt da

Tut mir leid ... Ich hab wohl vergessen dazuzuschreiben, dass das nicht 
für's Layout, sondern für den Inhalt ist ... Es soll unglaublicherweise 
wirklich eine Tabelle mit Inhalt werden ;-)

Grüße,
Fosotim

von MSIE1.0 (Gast)


Lesenswert?

Und, funktioniert jetzt alles? Hat der Doctype zum Erfolg geführt oder 
die 80%-Angabe in der mittleren Spalte?

von donkong (Gast)


Lesenswert?

setz doch mal die mitte auf 100% und den rest auf px

von Läubi .. (laeubi) Benutzerseite


Lesenswert?

Das Problem ist das die Breite in der Tabelle im Style attribut gesetzt 
ist.
1
<table width="100%">
Sollte zum gewünschtem Ergebnis führen.
Leider sind die CSS Eigenschaften (auch wenn sie gleich heißen) nicht 
immer gleichwertig zu benutzen wie die Attributnamen.

<table style="width:100%">

Sitemaker schrieb:
> Mach ein tabellenloses Design mit CSS2 - geht einfacher und wird besser.
Das wage ich zu bezweifeln... gerade wenn es Browserübergreifend 
funktionieren soll wird es mit "CSS-only" schnell haarig.

donkong schrieb:
> setz doch mal die mitte auf 100% und den rest auf px
Pixel und Prozentangaben lassen sich (leider) nicht ohne weiteres 
mischen... leider wurde beim Entwurf von CSS eher nach Prinzipien wie
> Tabellen =  Pfui...
entwickelt, ohne zu Bedenken das es halt noch mehr Seitenlayouts gibt 
als welche die nur Inhalt tragen. ;)

von Sitemaker (Gast)


Lesenswert?

Läubi .. schrieb:
> Sitemaker schrieb:
>> Mach ein tabellenloses Design mit CSS2 - geht einfacher und wird besser.
> Das wage ich zu bezweifeln... gerade wenn es Browserübergreifend
> funktionieren soll wird es mit "CSS-only" schnell haarig.

Hört hört, ein Profi.

von Sitemaker (Gast)


Lesenswert?

@Läubi:
...auch wenn Du es nicht glaubst, es gibt sogar tabellenfreie 
Shopsysteme die auf allen Browsern laufen... Befass Dich mal bischen mit 
CSS2 und Du wirst die angestaubten Tabellen von einst schnell vergessen.

von Läubi .. (laeubi) Benutzerseite


Lesenswert?

Sitemaker schrieb:
> @Läubi:
> ...auch wenn Du es nicht glaubst, es gibt sogar tabellenfreie
> Shopsysteme die auf allen Browsern laufen... Befass Dich mal bischen mit
> CSS2 und Du wirst die angestaubten Tabellen von einst schnell vergessen.
Auch wenn du es nicht glaubst ich habe überhaupt nicht gesagt das es 
nicht ohne ginge... Ich habe nur geschrieben das Dinge, welche man mit 
Tabellen recht einfach erreichen kann mit CSS oft nicht so einfach 
umsetzbar sind wenn man möchte das es zuverlässig auf allen Browsern 
läuft.

Und statt zu sagen "nimm CSS Tabellen sind Böse", hätte unser "Experte" 
ja einfach mal schnell ein Beispiel für den TE in HTML+CSS erstellen 
können, damit wäre Ihm sicher mehr geholfen gewesen als die ewige 
Diskussion über Tabellen ja/nein...

von Sitemaker (Gast)


Lesenswert?

Läubi .. schrieb:
> Und statt zu sagen

... o.k. Message verstanden.

Also ich würde keine Tabellen, da man damit oft Probleme bekommt.
Jeder Browser stellt die anders da.
Ein schöner Überblick über die kompatibilität liefert:
http://www.css4you.de/table-layout.html

Ein anderer Ansatz währe es mit <ul> bzw. <ol> zu machen.
Diese kann man entweder verschachteln oder 'straight forward'...

z.B.:

eine große Box aussenrum:
<div id="MeineTabelle">
<ul class="Spalte1">
<li> irgendwas </li>
<li> irgendwas </li>
<li> irgendwas </li>
</ul>

<ul class="Spalte2">
<li> irgendwas </li>
<li> irgendwas </li>
<li> irgendwas </li>
</ul>

<ul class="SpalteN">
<li> irgendwas </li>
<li> irgendwas </li>
<li> irgendwas </li>
</ul>
</div>

MeineTabelle platzierst Du mit relative auf der Haupseite dort wo Du sie 
haben willst.
Die Spalten werden absolut in Bezug auf MeineTabelle ausgerichtet.
Du kannst die Spalten dann Pixelgenau platzieren und natürlich weitere 
Spalten hinzufügen. z.B:
.Spalte1
{position:absolute; width:50px; top:0px; left:200px;}
.Spalte2
{width: 100px.... left:250px;}

...sollte so hinhauen.

von Εrnst B. (ernst)


Lesenswert?

<div style="display: table">
 <div style="display: table-row">
  <div style="display: table-cell">...</div>
...


Duck und wech...

von Fosotim (Gast)


Lesenswert?

Es funktioniert jetzt ... Das Geheimnis war, dass man in der Zelle etwas 
sichtbares haben muss, damit der IE das richtig darstellt.

Ein <b></b> reicht nicht, es muss wirklich sichtbar sein ...

Wahrscheinlich hätte dann ein <b>&nbsp;</b> auch gereicht ...

Aber Danke für eure Tipps!

Grüße,
Tim

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.