====== Tabellen ====== Auch Tabellen können mithilfe von CSS grafisch aufgehübscht werden. Dazu werden die allgemeinen Eigenschaften, wie color, border, etc. auf Elemente der Tabelle, also , ,
, ... angewendet. Mit (X)HTML werden verschiedene neue Tags für Tabellen eingeführt, praktisch werden diese jedoch kaum genutzt. Deswegen beschränken wir uns auf den
-Tag, der der Tabelle einen Titel gibt. ===== Beispiel ===== ==== index.html ==== Tabelle
Tabelle XY
Übersicht Spalte 1 Spalte 2
Zeile 1Erste ZelleZweite Zelle
Zeile 2Dritte ZelleVierte Zelle
Zeile 3Fünfte ZelleSechste Zelle
Zeile 4Siebte ZelleAchte Zelle
Zeile 5Neunte ZelleZehnte Zelle
Zeile 6Elfte ZelleZwölfte Zelle
ErgebnisErste SpalteZweite Spalte
 ==== style.css ==== body { background-color: #CFDCE6; font: 100.01% Verdana, sans-serif; color: #706348; } table { border-collapse: collapse; } td, th { padding: 10px; width: 15em; border: 1px solid #807459; font: 0.8em sans-serif; } th { font-weight: bold; letter-spacing: 0.5em; } caption { text-transform: uppercase; font-size: 1.5em; margin-bottom: 10px; } tr.gerade { background-color: #E6DFCF; color: #647D8F; } tr { background-color: white; } tr th { background: url(hg_table2.gif) white no-repeat 3px 3px; } tr.gerade th { background: url(hg_table1.gif) #E6DFCF no-repeat 3px 3px; } ==== Grafiken ==== {{:inf:inf7b_201011:css:hg_table1.gif|}} {{:inf:inf7b_201011:css:hg_table2.gif|}}