<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Komplexe Tabellengestaltung - Cascading Style Sheets - Workshop Internet-Präsenz</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="DE" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="Übung Cascading Style Sheets. Komplexe Tabellengestaltung." /> <meta name="keywords" content="HTML, Cascading Style Sheets" /> <meta name="author" content="Roland Unger" /> <style type="text/css"> <!-- table { border-collapse: collapse; } th, td { padding: 0.3em 0.5em; border: 1px solid #000; } th { background: #e0e0e0; font-weight: bold; text-align: left; } td { text-align: right; } thead td { background: lightcyan; font-weight: bold; } tbody td { background: lightyellow; font-style: italic; } tfoot td { background: lightblue; font-weight: bold; } --> </style> </head> <body> <h1>Workshop Internet-Präsenz</h1> <h2>Komplexe Tabellengestaltung - Cascading Style Sheets</h2> <p>Mit Hilfe der Descendant Combinators und der Tags <em>thead</em>, <em>tbody</em> und <em>tfoot</em> lassen sich relativ komplexe Tabellen gestalten, wie nachfolgendes einfaches Beispiel zeigt:</p> <table summary="Datentabelle"> <thead> <tr> <th>Bedeutung</th> <td>Einnahmen</td> <td>Ausgaben</td> </tr> </thead> <tfoot> <tr> <th>Summe</th> <td>1850,00 €</td> <td>1700,00 €</td> </tr> </tfoot> <tbody> <tr> <th>1. Quartal</th> <td>500,00 €</td> <td>375,00 €</td> </tr> <tr> <th>2. Quartal</th> <td>400,00 €</td> <td>400,00 €</td> </tr> <tr> <th>3. Quartal</th> <td>450,00 €</td> <td>325,00 €</td> </tr> <tr> <th>4. Quartal</th> <td>500,00 €</td> <td>600,00 €</td> </tr> </tbody> </table> </body> </html>