Eigenschaft
text-align
können Sie Inhalte von Tabellenzellen links (
left
), rechts (
right
) oder zentriert (
center
) ausrichten. Auch die Angabe
justify
(Blocksatz) ist natürlich möglich, innerhalb von Tabellenzellen aber in den meisten Fällen nicht sinnvoll. Wenn Sie wie im obigen Beispiel die Eigenschaft
vertical-align
auf Tabellenzellen oder auch Tabellenzeilen (
tr
) anwenden, können Sie Inhalte mit unterschiedlich hohen Inhalten oben bündig (
top
), unten bündig (
bottom
) oder mittig (
middle
) ausrichten.
    Mit
background-color
erhalten die Kopfzellen im obigen Beispiel eine hellgraue Hintergrundfarbe. Die letzte Spalte der Tabelle, welche
td
-Elemente mit
class="sum"
enthält, bekommt mit
width
eine Breite von
5em
vorgegeben.
Weitere Hinweise
    Die
border
-Eigenschaft wird detaillierter in 14.6 Rahmen, Ecken und Konturen beschrieben, die Eigenschaften
font-family
,
font-size
und
font-weight
in 14.1 Schriftformatierung ,
padding
in 14.5 Innenabstand und
background-color
in 14.7 Hintergrundfarben und Hintergrundbilder .
14.9.2    Rahmenoptionen
    Bild 14.29: Gitternetzrahmen von Tabellenzellen können zusammenfallen oder auch nicht.
    Sie können festlegen, ob Einzelrahmen von Tabellenzellen zusammenfallen sollen oder nicht. Umgekehrt können Sie den Abstand zwischen Zellen beeinflussen und z. B. vergrößern.
    Per Default (laut dem vom W3-Konsortium empfohlenen Browser-Stylesheet) sollen Browser Tabellen mit sichtbarem Gitternetz so darstellen wie im linken Teil zu sehen, also mit kleinen Abständen zwischen den Zellen sowie zum äußeren Tabellenrahmen. Sie können jedoch eine Darstellung wie rechts zu sehen erzwingen.
Beispiel zu border-collapse
    
    
    
    
    
    
    
    
    
    

Ohne collapse
von meinem Haus	mit meinem Auto	zu meinem Boot

    
    
    
    
    
    
    
    
    
    

Mit collapse
von meinem Haus	mit meinem Auto	zu meinem Boot

    Bild 14.30: Prioritäten beim Zusammenfallen von Rahmen
Erläuterung zu border-collapse
    Mit der Angabe
border-collapse:
collapse;
bei
table
-Elementen erreichen Sie, dass die Rahmen von Zellen sowie ein für die gesamte Tabelle definierter Außenrahmen zusammenfallen. Die umgekehrte Angabe (der Browser-Standard) ist
border-collapse:
separate;
. Das obige Beispiel zeigt, wie sich Rahmen mit unterschiedlichem Rahmentyp überlagern, wenn Sie nichts anderes anordnen.
    Die Angabe
border-collapse:
collapse;
ist nämlich nur so lange unproblematisch, wie alle Rahmen in Farbe, Dicke und Typ gleich sind. Wenn jedoch Rahmen mit unterschiedlichen Eigenschaften zusammenfallen sollen, entsteht eine Konfliktsituation. Rahmen, die dabei in jedem Fall Vorrang haben und den gemeinsamen Grenzrahmen der Nachbarzelle überlagern sollen, müssen zu diesem Zweck die CSS-Angabe
border-style:
hidden
erhalten. Rahmen, die in jedem Fall nachrangig sein und von dem Grenzrahmen der Nachbarzelle überlagert werden sollen, müssen die CSS-Angabe
border-style:
none;
erhalten. Wenn keine der Zellen die Angabe
border-style:
hidden
enthält, aber eine davon die Angabe
border-style:
none;
, entscheidet die Breitenangabe (
border-width
) zum Rahmen, welche Formatierung beim gemeinsamen Grenzrahmen Vorrang hat. Breitere Rahmen haben dann Vorrang. Falls auch die Breitenangabe keine Konfliktlösung bringt, da die Breitenangaben gleich sind, dann entscheidet die folgende Reihenfolge von Rahmentypen (
border-style
:):
double
,
solid
,
dashed
,
dotted
,
ridge
,
outset
,
groove
,
inset
.
    Das Gegenteil von
border-collapse:
collapse;
ist jedoch manchmal auch gewünscht: nämlich die explizite Verbreiterung der Abstände zwischen Zellrahmen untereinander und zwischen Zellrahmen und Tabellenrahmen. Dafür stellt CSS ebenfalls eine Eigenschaft bereit, nämlich
border-spacing
.
Beispiel zu border-spacing