Tabellenhöhe 100%
    
 HomeFehlersuche • 100%-Angaben Beispiel    drucken  Seite drucken

 Doctype-Notiereung

Einige HTML-Notierungen gehören nicht zum HTML-Standard werden in der Praxis aber häufig benutzt. Sie werden allerdings nur dann vom Browser unterstützt, wenn sie ihm (dem Browser) mitteilen, dass er sich nicht strikt an die Regeln halten soll.

100%-Angaben in HTML-Dokumenten


Sie verwenden den Eintrag 100% für das Tabellenattribut 'height'. Dennoch wird die Tabelle nicht entsprechend angezeigt?

Sie verwenden innerhalb ihrer Seite einen iFrame, doch der iFrame wird nicht angezeigt?




a  Mit dieser Angabe funktioniert das nicht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
...

b  Mit dieser Angabe schon:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
...

Die zusätzliche Angabe " Transitional " erlaubt auch HTML-Befehle älteren Standards. Offenbar also auch das eigentlich nicht implementierte Attribut für Tabellenhöhe.



   Schreibweise beachten

Übrigens ist die Angabe 'case sensitiv' das bedeutet Groß- Kleinschreibung wird unterschieden!

a  falsch:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
b  richtig:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


   Beispiel Notierung der Tabelle

<table border="1" align="center" height="100%" width="200">
<tr><td valign="middle" align="center">

Seiteninhalt

</td></tr>
</table>

<table height=" " bestimmt die Höhe der gesamten Tabelle in Bezug auf das Anzeigefenster. Diese Angabe gehört nicht zum HTML-Standard, wird aber von den Browsern unterstützt und in der Praxis häufig benutzt.




   Anwendungsbeispiel

Objekt innerhalb der Seite zentrieren

Sie haben zur Zentrierung eines Objekts eine Tabelle eingesetzt, weil die vertikale Zentrierung mit CSS immer wieder Probleme bereitet. Innerhalb der Tabelle bestimmen sie eine zentrierte Ausrichtung mit align und valign:
<table border="1" height="150" width="200">
<tr><td valign="middle" align="center">

Objekt

</td></tr>
</table>
Objekt



   Nächster Schritt

Sie möchten nun dieses Objekt im gesamten Browser- oder Framefenster zentrieren.

(Falls erforderlich Randeinstellungen beachten, siehe BODY FRAME MARGINS)

Dazu stecken sie den gesamten Inhalt in eine weitere Tabelle. Die Tabellenhöhe und -breite bestimmen sie mit 100% . Innerhalb der Tabelle bestimmen Sie die Ausrichtung wie im ersten Beispiel:

<table border="0" align="center" height="100%" width="100%">
<tr><td valign="middle" align="center">

zentrierter Inhalt

</td></tr>
</table>
<table border="0" align="center" height="100%" width="100%">
<tr><td valign="middle" align="center">

        <table border="1" height="150" width="200">
        <tr><td valign="middle" align="center">

        Objekt

        </td></tr>
        </table>

</td></tr>
</table>



   Testen

Setzen sie die den Rand der Tabelle auf 1 und testen Sie das Ergebnis. In diesem Fall ist es einmal der IE6, der abhängig von der Dokumenttyp-Angabe die 100%-Anweisung ignoriert (eigene Erfahrung).