5.3 Tabellen

URL: http://www.webdesign-referenz.de/designpraxis_tabellen.html

Inhaltsverzeichnis "Tabellen"
5.3.1 Einführung
5.3.2 Tabellen in HTML
5.3.3 Tabellarische Daten
5.3.4 Rahmenwerk
5.3.5 Listengestaltung
5.3.6 Layout-Aufbau

5.3.1 Einführung

Tabellen sind ein wesentliches Element in fast jedem modernen Webdesign: sie erst ermöglichen eine einigermaßen pixelgenaue Gestaltung. Nebenbei sind noch viele andere Dinge mit Tabellen möglich - so z.B. die Darstellung tabellarischer Daten oder auch das Erzeugen kleiner Kästen. Im Folgenden stellen wir Ihnen einige davon vor.

Nach oben

5.3.2 Tabellen in HTML

Wenn Sie noch nicht wissen, wie Tabellen in HTML realisiert werden, dann werfen wir Sie jetzt ins kalte Wasser. Bitte beachten Sie die entsprechenden Kommentare:



            <!-- Neue Tabellendefiniton-->

            <!-- Erklärung der Attribute:

            border: Rahmendicke

            cellspacing: Abstand zwischen zwei Zellen

            cellpadding: Abstand der Zellinhalte zum Zellrand

            align: Ausrichtung der Tabelle

            summary: Zusammenfassung der Inhalte, z.B. für Screenreader

            width: Breite

            height: Höhe

            -->

            <table border="1" cellspacing="3" cellpadding="3"

            align="left" summary="viele nützliche Informationen"

             width="500" height="200">

                <caption>Titel der Tabelle</caption>

                <!-- 

                Vordefinition der Spalten

                Verkürzt Ladezeiten, da der Browser die Tabelle nun

                direkt aufbauen kann, ohne sie erst vollständig

                laden zu müssen

                -->    

                 <colgroup>

                    <col width="300">

                    <col width="200">

                 </colgroup>

                

                <!-- Tabellenkopf -->

                <thead>

                <tr>

                  <th>Spalte 1</th>

                  <th>Spalte 2</th>

                  <th></th>

                </tr>

                </thead>

                

                <tbody>    

                <!-- Neue Reihe -->

                <tr>

                    <!-- Neue Zelle -->

                    <!--

                    Attribute:

                    abbr: Kurzbeschreibung des Inhalts, z.B. 

                    für Screenreader

                    width: Breite

                    height: Höhe

                    -->

                    <td abbr="Informationen über xyz" height="200" width="300">

                        Inhalte 1

                    </td>

                    <td abbr="Informationen über xyz">

                        Inhalte 2

                    </td>

                </tr>

                

                <!-- Neue Reihe -->

                <tr>

                    <!-- Neue Zelle -->

                    <!--

                    Attribute:

                    abbr: Kurzbeschreibung des Inhalts, z.B. für Screenreader

                    

                    -->

                    <td abbr="Informationen über xyz">

                        Inhalte 1

                    </td>

                    <td abbr="Informationen über xyz">

                        Inhalte 2

                    </td>

                </tr>    

                <!-- Neue Reihe -->

                <tr>

                    <!-- Neue Zelle -->

                    <!--

                    Attribute:

                    abbr: Kurzbeschreibung des Inhalts, z.B. für Screenreader

                    

                    -->

                    <td abbr="Informationen über xyz" colspan="2">

                        Verbundene Zelle

                    </td>

                </tr>

                

                </tbody>

                

                <!-- Tabellenfuß -->

                <tfoot>

                <tr>

                  <td>Fuß 1</td>

                  <td>Fuß 2</td>

                </tr>

                </tfoot>            

            </table>

Nach oben

5.3.3 Tabellarische Daten

Tabellen wurden ursprünglich in HTML eingeführt, um tabellarische Daten besser darstellen zu können. Auch heute bzw. gerade heute macht eine konsequente Verwendung von Tabellen in solchen Fällen Sinn.

Worauf kommt es bei der Darstellung von tabellarischen Daten an?

Übersichtlichkeit. Eine Tabelle, die nicht übersichtlich ist, erfüllt ihren Zweck nicht.

Struktur im Code. Verwenden Sie sinnvolle Tags (z.B. tbody).

Punkt zwei ist recht simpel: die erforderlichen Tags sind im vorhergehenden Beispiel zu finden. Schwieriger dagegen ist der erste Punkt, die Übersichtlichkeit. Wer hier sinnvoll arbeiten will, muss schon bei der Tabellenstruktur selbst beginnen: es kommt darauf an, irrelevante Spalten und Daten auszusortieren. Zusätzlich bietet sich eine farbliche Kennzeichnung besonders wichtiger Zellen an.

Recht beliebt ist auch die Methode der wechselnden Zeilenfarben: eine Zeile hat grundsätzlich eine andere Hintergrundfarbe als die vor ihr bzw. hinter ihr.

Wir wollen Ihnen im Folgenden einige Entwürfe für die Darstellung tabellarischer Daten präsentieren:



            <html>

            <head>

            <title>Datenblatt</title>

            <style>

                body {background: white; font-family: Verdana, Arial; }

                th {background: silver;}

                .spalte1 {background: #dbdbdb}    

                .spalte2 {background: #e9e9e9}

            </style>

            </head>

            <body>

            <table>

                <caption>Daten über xyz</caption>

                

                <thead>

                <tr>

                  <th>Name</th>    

                  <th>Wert a</th>

                  <th>Prozentzahl b</th>

                  <th>Erwartete Steigerung</th>

                  <th>Vergleichswert 2000</th>      

                </tr>

                </thead>

                

                <tbody>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>                        

                </tbody>         

            </table>

            </body>

            </html>

Eine interessante Ergänzung wäre die Markierung besonders wichtiger Felder:

        

            <html>

            <head>

            <title>Datenblatt</title>

            <style>

                body {background: white; font-family: Verdana, Arial; }

                th {background: silver;}

                .spalte1 {background: #dbdbdb}    

                .spalte2 {background: #e9e9e9}

                .important {background: #ff9966}

            </style>

            </head>

            <body>

            <table>

                <caption>Daten über xyz</caption>

                <thead>

                <tr>

                  <th>Name</th>    

                  <th>Wert a</th>

                  <th>Prozentzahl b</th>

                  <th>Erwartete Steigerung</th>

                  <th>Vergleichswert 2000</th>      

                </tr>

                </thead>

                

                <tbody>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td class="important">

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td class="important">

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td class="important">

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>    

                <tr class="spalte1">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>

                

                <tr class="spalte2">

                    <td>

                        xyz

                    </td>

                    <td>

                        200

                    </td>

                    <td>

                        16%

                    </td>        

                    <td>

                        34%

                    </td>    

                    <td>

                        300

                    </td>            

                </tr>                        

                </tbody>         

            </table>

            </body>

            </html>

Auch andere Farbvariationen könnten interessant sein. Hier zum Beispiel eine grünliche Variante, direkt darunter eine bläuliche:



            <style>

                body {background: white; font-family: Verdana, Arial; }

                th {background: silver;}

                .spalte1 {background: #669966}    

                .spalte2 {background: #66cc99}

                .important {background: white}

            </style>



            <style>

                body {background: white; font-family: Verdana, Arial; }

                th {background: silver;}

                .spalte1 {background: #0099cc}    

                .spalte2 {background: #66ccff}

                .important {background: #66ffff}

            </style>

Nach oben

5.3.4 Rahmenwerk

Oft sieht man auf Websites kleine bunte Rahmen. Eigentlich geht so etwas nur mit CSS, dadurch wird es dann aber inkompatibel zu älteren Browsern. Es gibt jedoch einen "Trick", der sich das cellpadding-Attribut von HTML zu Nutze macht:



            <html>

            <head>

            <title>Info-Kasten</title>

            <style>

                body {background: white; font-family: Verdana, Arial; }

                .outside {background: black; width: 300px;}    

                .inside {background: silver}

            </style>

            </head>

            <body>

            <table class="outside">

                <tr>

                    <td>

            <table class="inside">

                <tr>

                    <td>

                        Hier sind einige Informationen zum Thema. Ein wunderbarer kleiner Kasten....

                    </td>

                </tr>

            </table>        

                    </td>

                </tr>

            </table>

            </body>

            </html>

Nach oben

5.3.5 Listengestaltung

Obwohl dafür eigentlich die Listen-Tags <ul> und <ol> zuständig sind, bietet sich doch manchmal eine Listengestaltung mit Tabellen an. Möglicher Grund: man will möglichst einfach (d.h. ohne CSS-Verwendung) und so kompatibel wie möglich den Abstand zwischen zwei Listeneinträgen oder das Listen-Aufzählungssymbol ändern. Das folgende Beispiel zeigt eine einfache Liste mit vergrößertem Abstand und dem Bindestrich als Aufzählungssymbol:



            <html>

            <head>

            <title>Info-Kasten</title>

            <style>

                body {background: white; font-family: Verdana, Arial; }

                .outside {background: black; width: 300px;}    

                .inside {background: silver}

            </style>

            </head>

            <body>

            <table border="0" cellspacing="0" cellpadding="5">

                <tr>

                    <td>

                        -

                    </td>

                    <td>

                        Eintrag 1

                    </td>

                </tr>

                <tr>

                    <td>

                        -

                    </td>

                    <td>

                        Eintrag 2

                    </td>

                </tr>

                <tr>

                    <td>

                        -

                    </td>

                    <td>

                        Eintrag 3

                    </td>

                </tr>

                <tr>

                    <td>

                        -

                    </td>

                    <td>

                        Eintrag 4

                    </td>

                </tr>

                <tr>

                    <td>

                        -

                    </td>

                    <td>

                        Eintrag 5

                    </td>

                </tr>                

            </table>

            </body>

            </html>

Nach oben

5.3.6 Layout-Aufbau

Wer ein komplexeres Layout aufbauen will, kann den Einsatz von verschachtelten Tabellen kaum vermeiden. Dabei ist es oft praktisch, dass Tabellen bei Höhen- und Breitenangaben sowohl prozentuale als auch absolute Angaben akzeptieren. Verwendet man konsequent prozentuale Angaben, lässt sich damit ein Layout erstellen, das völlig unabhängig von der verwendeten Bildschirmauflösung ist.

Tabellen, die zum Aufbau von Layouts verwendet werden, ähneln sich meist in diesen beiden Punkten:

colspan und rowspan werden oft verwendet

border, cellpadding und cellspacing sind auf den Wert 0 gesetzt.

Problematisch ist, dass Browser sich nicht immer an die vom Webdesigner angegebenen Größen halten. Die Vergrößerung einer Tabelle ist beispielsweise Standard, wenn anderenfalls in den Zellen enthaltene Elemente nicht sichtbar wären. In solch einem Falle wird dann oft an einer anderen Stelle gekürzt, also z.B. in einer Zelle, die nicht voll ausgefüllt ist.

Wer Wert darauf legt, eine Mindestbreite für Zellen vorzuschreiben, kann dies mit Hilfe eines sog. "Blindgifs" tun. Das ist eine 1x1 Pixel GIF-Datei, deren einziger Bildpunkt transparent ist. Wer dann dem Browser eine Mindestbreite (hier 300 Pixel) für eine Zelle aufzwingen will, verwendet diesen Code:

<img src="blind.gif" width="300" height="1" hspace="0" vspace="0" border="0" alt="">

Insgesamt betrachtet ist der Aufbau von Layouts mit Tabellen also nicht allzu schwer. Wir zeigen Ihnen nun zwei simple Beispiele.



            <html>

            <head>

            <title>Hauptseite</title>

            <style>

                body {background: white; font-family: Verdana, Arial; }

                .nav {background: silver; width: 150px;}    

            </style>

            </head>

            <body>

            <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

                <tr>

                    <td valign="top" class="nav">

                    <table border="0" cellspacing="0" cellpadding="3" align="center">

                    <tr>

                        <td><a href="link1.htm">Link1</a></td>

                    </tr>

                    <tr>

                        <td><a href="link1.htm">Link1</a></td>

                    </tr>

                    <tr>

                        <td><a href="link1.htm">Link1</a></td>

                    </tr>

                    <tr>

                        <td><a href="link1.htm">Link1</a></td>

                    </tr>                        

                    </table>

                            

                    </td>

                    <td valign="top">

                    <h1>Hauptseite</h1>

                    Wilkommen auf dieser wunderbaren Homepage.... 

                    </td>

                </tr>

            </table>

            </body>

            </html>

        

            <html>

            <head>

            <title>Hauptseite</title>

            <style>

                body {background: white; font-family: Verdana, Arial; }

                .header {background: navy; color: white;}    

                .nav {background: #33ccff; color: white;}        

            </style>

            </head>

            <body>

            <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

                <tr>

                    <td colspan="2" align="center" class="header" height="100">

                        <h1>Arnies Super-Homepage</h1>

                    </td>

                </tr>

                <tr>

                    <td valign="top" class="nav" width="150">

                    <table border="0" cellspacing="0" cellpadding="3" align="center">

                    <tr>

                        <td><a href="link1.htm">Link1</a></td>

                    </tr>

                    <tr>

                        <td><a href="link1.htm">Link1</a></td>

                    </tr>

                    <tr>

                        <td><a href="link1.htm">Link1</a></td>

                    </tr>

                    <tr>

                        <td><a href="link1.htm">Link1</a></td>

                    </tr>                        

                    </table>        

                    </td>

                    <td valign="top">

                    <h3>Willkommen!</h3>

                    Diese Homepage ist die beste der Welt. Was ich schon immer einmal der Welt vorstellen wollte...

                    </td>

                </tr>    

                

            </table>

            </body>

            </html>

Nach oben