Verschiedene Codeschnipsel für's Webdesign & Webdevelopment

Übersicht der bisher vorhandenen Einträge:

Hier gibts Tipps und Tricks, sowie Codefragmente und Snippets rund um die jeweiligen Bereiche zum sofortigen Einsatz.

Formatierung von Tabellen mit CSS.

• Nützliche Tricks zur Formatierung von Tabellen mit CSS 2
  

Für die Formatierung von Tabellen stehen seit CSS Level 2 eine ganze Reihe von Optionen zur Verfügung. So lassen sich zum Beispiel Rahmenabstände von Tabellen festlegen. Mit border-collapse definieren Sie, ob Tabellenlinien zusammengezogen oder einzeln dargestellt werden. In folgendem Beispiel werden einfache Linien festgelegt:

<style type="text/css">
<!--
table { border-collapse:collapse;}
td { border:3px solid red; }
//-->
</style>

Für auseinandergezogene Linien verwenden Sie die Eigenschaft separate:
<style type="text/css">
<!--
table { border-collapse:separate;}
td { border:3px red solid; }
//-->
</style>

Die Eigenschaft border-spacing legt den Abstand zwischen den Rahmen fest, was nur mit border-collapse:separate funktioniert. Der erste Wert legt den horizontalen Abstand, der zweite den vertikalen Abstand zwischen den Rahmen fest. Im folgenden Beispiel geben Sie nur einen Wert an, welcher dann für alle Seiten gilt:
<style type="text/css">
<!--
table { border-collapse:separate;}
border-spacing:6px;}
td { border:3px red solid; }
//-->
</style>

Mit der CSS-Eigenschaft empty-cells lassen sich leere Tabellenzeichen verstecken, was auch nur mit border-collapse:separate funktioniert. Die Eigenschaft empty-cells:show zeigt eine leere Tabellenzelle an.