www.mikrocontroller.net

Forum: PC-Programmierung HTML <table> Frage


Autor: Fosotim (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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

Autor: Tabellator (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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....

Autor: Vlad Tepesch (vlad_tepesch)
Datum:

Bewertung
0 lesenswert
nicht 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>

Autor: Tabellator (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: Vlad Tepesch (vlad_tepesch)
Datum:

Bewertung
0 lesenswert
nicht 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

Autor: Sitemaker (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Tabellen =  Pfui...

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

Autor: Fosotim (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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

Autor: MSIE1.0 (Gast)
Datum:

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

Autor: donkong (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
setz doch mal die mitte auf 100% und den rest auf px

Autor: Läubi .. (laeubi) Benutzerseite
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Das Problem ist das die Breite in der Tabelle im Style attribut gesetzt 
ist.
<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. ;)

Autor: Sitemaker (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: Sitemaker (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: Läubi .. (laeubi) Benutzerseite
Datum:

Bewertung
0 lesenswert
nicht 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...

Autor: Sitemaker (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: Εrnst B✶ (ernst)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
<div style="display: table">
 <div style="display: table-row">
  <div style="display: table-cell">...</div>
...


Duck und wech...

Autor: Fosotim (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.