AktuellWebmaster
Codeschnipsel
Tutorials & Workshops
Ressourcen & Material
eBooks
Empfehlungen & Links
Downloads
Archive & Sammlungen
Tipps & Tricks
Tabellen & Listen
ServiceWebmaster-Lexikon
Wenn nichts mehr geht
Link eintragen
Tools & Utilities
Suchmaschinen & SEO
Barrierefrei
Internetrecht
Projekte & Tipps
Jobsuche
Zum Nachschlagen
Für Webworker
Codeschnipsel für's Webdesign & Webdevelopment
Im Bereich der Webprogrammierung gibt es bestimmt zahlreiche Tricks, Kniffe und Codeschnipsel, mit denen man sich das Leben leichter machen kann, die für Ihre Seiten recht nützlich sein können, oder die für Ihre Besucher zusätzlichen Nutzwert bieten. Wir haben versucht für Sie einige Tipps und Tricks zu verschiedenen Themen zusammenzustellen.
Übersicht der bisher vorhandenen Einträge:
Das Aussehen von Tabellen gezielt manipulieren
Nützliche Tricks zur Formatierung von Tabellen mit CSS 2
Für die Gestaltung und 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.
