Beispiele: Tabellen-Formatierung mit CSS

Beispiel 1 - zusammenfallende Rahmen:

1px dünne blaue "Haarlinie" um die Tabelle und die Zellen, Innenabstand der Zellen 5px:

table { border:1px solid blue; border-collapse:collapse; border-spacing:0; }
td, th { border:1px solid blue; padding:5px; text-align:left; }

Beispiel 2 - getrennte Rahmen:

4px fetter roter Rahmen um die ganze Tabelle, 1px feine gestrichelte blaue Rahmen um die einzelnen Zellen, Abstand zwischen diesen Rahmen 10px, Innenabstand 15px:

table { border:4px solid red; border-collapse: separate; border-spacing: 15px; }
td, th { border:1px dotted blue; padding:5px; text-align:center; }

Beispiel 3 - "Nahtlose" blinde Tabelle:

Kein Rahmen, kein Innenabstand in den Zellen (z.B. um ein zerstückeltes Bild aus "Slices" wieder zusammenzusetzen):

table { border:0 none; border-collapse:collapse; border-spacing:0; }
td { border:0 none; padding:0; }
td img { display:block; } /* Erklaerung: http://www.dodabo.de/html+css/img-table/ */

Mit diesem CSS:

Ohne CSS - Standarddarstellung des Browsers:

tiptom.ch > Homepage-Tips > FAQ

Thomas Lüthi, info@tomogramm.ch