HTML - Tabellenausrichtung mit CSS

**engel90**

Hallo
ich habe folgendes Problem:

Nun habe ich jedoch folgendes Problem: Unter Mozilla Firefox sind die Tabellen durch die CSS-Eigenschaft "margin: auto" mittig auf dem Bildschirm ausgerichtet, unter dem InternetExplorer jedoch nicht. Das HTML-Attribut "align" möchte ich nicht benutzen, da meine Website HTML4.01 Strict valid sein soll. Wie kann ich es nun einrichten, dass die Tabellen auch unter IE mittig angezigt werden?

Gruß
engel90

-----------------------------------------------------------------------------------------

Der Quellcode für meine Website: (

Link)

markieren

Code:

			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <title>Informatik Grundkurs</title>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

  <meta name="author" content="Stefan Engelhardt">

</head>

<body style="background-color: #FFFFFF">

</p>

<table cellpadding="2" cellspacing="0" border="0" style="width: 50%; margin: auto">

  <tr align="right" valign="middle">

    <th><span style="font-size: 20px; color: #000000; font-family: Courier New">Delphi Projects - Informatik Grundkurs</span></th>

  </tr>

</table>

<table cellpadding="2" cellspacing="0" border="0" style="width: 50%; margin: auto">

  <tr style="height: 20px">

    <th> </th>

    <th style="width: 10px"> </th>

    <th></th>

    <th style="width: 10px"> </th>

    <th style="width: 50px" align="right"> </th>

  </tr>

  <tr style="height: 2px">

    <td style="background-color: #000000"> </td>

    <td style="width: 10px; background-color: #000000"> </td>

    <td style="background-color: #000000"> </td>

    <td style="width: 10px; background-color: #000000"> </td>

    <td style="width: 50px; background-color: #000000" align="right"> </td>

  </tr>

  <tr style="height: 5px">

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td align="right"> </td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">editor.zip</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Einfacher Texteditor (Nach Vorbild des "Editors" von Micosoft)</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/editor.zip"]766KB[/url]</span></td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">taschenrechner.zip</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Einfacher Taschenrechner mit Standard-Funktionen</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/taschenrechner.zip"]595KB[/url]</span></td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">wuerfelspiel.zip</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Wuerfelspiel</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/wuerfelspiel.zip"]486KB[/url]</span></td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">muster.zip</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Programm zur Erstellung von Mustern aus einzelnen Zeichen (Uebung zur Anwendung Schleifen)</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/muster.zip"]475KB[/url]</span></td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">messwerte.zip</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Programm zur Auswertung von Messwerten (Durchschnitt, Realtiver Fehler, Absoluter Fehler)</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/messwerte.zip"]435KB[/url]</span></td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">minigolf_v1.0.zip</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Programm zur Auswertung von Minigolfturnieren</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/minigolf_v1.0.zip"]528KB[/url]</span></td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">minigolf_v2.0.zip</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Programm zur Auswertung von Minigolfturnieren mit der Möglichkeit die Turniere in XML-Dateien zu speichern/laden</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/minigolf_v2.0.zip"]545KB[/url]</span></td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">xml.pas</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Delphi-Unit mit Befehlen zum Lesen und Schreiben in XML Dateien</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/xml.pas"]11KB[/url]</span></td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">compare.zip</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Programm zum einfachen Vergleichen von 2 Bitmaps (Gibt die Anzahl der unterschiedlichen Pixel an, Bitmaps muessen die gleiche Groeße haben)</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/compare.zip"]420KB[/url]</span></td>

  </tr>

  <tr>

    <td><span style="font-size: 14px; color: #000000; font-family: Courier New">data.zip</span></td>

    <td> </td>

    <td><span style="font-size: 14px; color: #000000">Programm zum erstellen von bis zu 2Mrd. zufaelliger Zahlen (z.B. Zum Testen der Geschwindigkeit von Sortieralgorithmen)</span></td>

    <td> </td>

    <td align="right"><span style="font-size: 14px; color: #000000">[url="data/data.zip"]425KB[/url]</span></td>

  </tr>  

</table>

<table cellpadding="2" cellspacing="0" border="0" style="width: 50%; margin: auto">

  <tr align="right" valign="middle">

    <th><span style="font-size: 10px; color: #000000">Powerd by Stefan Engelhardt © 2007</span></th>

  </tr>

</table>

</p>

</p>

<table cellpadding="2" cellspacing="0" border="0" style="width: 50%; margin: auto">

  <tr align="center" valign="middle">

    <th>

      <span style="font-size: 10px">

        Der Autor dieses Programms haftet nicht für Schäden an Soft- oder Hardware

        oder Vermögensschäden, die durch das Benutzen des Programms entstehen, es

        sei denn diese beruhen auf einem grob fahrlässigen oder vorsätzlichen

        Handeln des Autors, seiner Erfüllungsgehilfen oder seiner gesetzlichen

        Vertreter.

        Für  Schäden an der Gesundheit, dem Körper oder dem Leben des Nutzers haftet

        der Autor uneingeschränkt. Ebenso haftet er für die Verletzung von Pflichten,

        die zur Erreichung des Vertragszwecks von besonderer Bedeutung sind

        (Kardinalspflichten).

      </span>

    </th>

  </tr>

</table>

</body>

</html>

Hallo,
wenn sich der IE an die Standards halten würde, wärst du damit sicherlich auf dem richtigen Weg...

Gibt da leider nicht viele Möglichkeiten, aber eine ist, deine komplette Layout Tabelle in eine weitere, Ein-Zellige Tabelle zu packen, und diese auf 100% Bildschirmbreite zu strecken, jedoch im td Tag das align Attribut auf center zu setzten. In selbigem ist das align Attribut bis XHTML 1.1 erlaubt.

Eine weitere Möglichkeit wäre es, dem IE ein paar neue Tricks beizubringen, mit beispielsweise der IE7 JavaScript Bibliothek

http://dean.edwards.name/IE7/, welche, wenn ich mich Recht erinnere, unter anderem diesen CSS Verarbeitungsfehler behebt. Leider ist die Entwicklung von diesem Projekt scheinbar eingeschlafen...

Btw, solltest du gerade bei der Verwendung bzw. der Auslieferung einer HTML Datei im Strict Standard auf Tabellenlayouts verzichten, da diese, unter Umständen verschieden dargestellt werden.

**engel90**

ok danke

ich werd alles in eine große tabelle packen ^^

**DGL-luke**

Hallo,

Tabelle ist schlecht, probiers erstmal mit "text-align: center;" fürs elternelement aus. das ist allemal besser als ne große tabelle zu bauen.

**Chewie**

Welche IE-Version willst du unterstützen? Mittige Ausrichtung mit margin:auto geht im IE mindestens seit Version 6 - allerdings nicht im Quirks-Modus. Und in den schaltet der IE, wenn in der ersten Zeile des Dokuments nicht die (richtige) Doctype-Definition steht.

Also: Kommentar in der ersten Zeile entfernen und staunen

**Thorben77**

Zitat von engel90:

ich werd alles in eine große tabelle packen ^^

Bloß nicht

Warum Layout mit Tabellen dumm ist …

Zitat von engel90:

Das HTML-Attribut "align" möchte ich nicht benutzen, da meine Website HTML4.01 Strict valid sein soll.

Das ist zwar eine gute Absicht, aber warum verwendest du trotzdem das align-Attribut, neben anderen wie cellspacing, cellpadding, border, …

Und um dein Problem zu lösen:

CSS4YOU:

Wird vor dem <!DOCTYPE> ein Kommentar oder eine XML-Angabe eingefügt, so schaltet der IE immer in den Quirks-Modus.

Es reicht also, den Kommentar in der allerersten Zeile zu entfernen.

Zitat von DGL-luke:

Tabelle ist schlecht, probiers erstmal mit "text-align: center;" fürs elternelement aus.

Das ist aber leider auch nicht besser, dadurch würde nur der IE fälschlicherweise das Element zentrieren; eigentlich richtet

text-align nur den Text und anderen Inhalt in einem Element aus, nicht die Elemente selbst.

**DGL-luke**

Zitat:

eigentlich richtet text-align nur den Text und anderen Inhalt in einem Element aus, nicht die Elemente selbst.

... aber das ist ja auch ein IE-Fix.

**alcaeus**

markieren

Code:

<table style="width:20%;margin:auto;"...>...

wird bei mir im Fx und im IE korrekt angezeigt. Voraussetzung ist natuerlich, dass du deine Seite nicht im Quirks-Modus laufen hast, was bei dir allerdings der Fall ist. Nimm mal den einleitenden Kommentar raus, und sorg dafuer dass der DOCTYPE ganz am Anfang des Dokuments steht, dann passts auch.

Greetz
alcaeus

**Thorben77**

Zitat von DGL-luke:

... aber das ist ja auch ein IE-Fix.

Stimmt, da hab ich wohl nicht dran gedacht

**SirThornberry**

@Thorben77: Dein Link warum Layout mit Tabellen schlecht ist, ist recht pauschal. Gepaart mit PHP (oder anderen Scriptsprachen) wird nicht einmal Inhalt mit Layout vermischt (auf Programmiererebene) denn Tabelleninhalte können dynamisch von anderen Orten geladen werden. Vielleicht sollte man zu dem Thema mal einen eigenen Thread aufmachen (denn ich denke so ziemlich alle Argumente kann man entkräften bzw. durch Gegenargumente kann man auch das FÜR hervor heben)

HTML - Tabellenausrichtung mit CSS

HTML - Tabellenausrichtung mit CSS

Re: HTML - Tabellenausrichtung mit CSS

Re: HTML - Tabellenausrichtung mit CSS

Re: HTML - Tabellenausrichtung mit CSS

Re: HTML - Tabellenausrichtung mit CSS

Re: HTML - Tabellenausrichtung mit CSS

Re: HTML - Tabellenausrichtung mit CSS

Re: HTML - Tabellenausrichtung mit CSS

Re: HTML - Tabellenausrichtung mit CSS

Re: HTML - Tabellenausrichtung mit CSS

Forumregeln

engel90 Registriert seit: 15. Jan 2007 Ort: Jena 38 Beiträge Delphi 7 Personal	#3 Re: HTML - Tabellenausrichtung mit CSS 24. Apr 2007, 18:04 ok danke ich werd alles in eine große tabelle packen ^^
	Zitat

Thorben77 Registriert seit: 22. Okt 2004 359 Beiträge	#9 Re: HTML - Tabellenausrichtung mit CSS 25. Apr 2007, 07:53 Zitat von DGL-luke: ... aber das ist ja auch ein IE-Fix. Stimmt, da hab ich wohl nicht dran gedacht
	Zitat