Tabelle

====== Tabellen ====== Auch Tabellen können mithilfe von CSS grafisch aufgehübscht werden. Dazu werden i.d.R. die allgemeinen Eigenschaften, wie color, border, etc. auf Elemente der Tabelle, also , ,

, ... angewendet. ++++ (X)HTML-Beispielcode anzeigen |







Tabelle





 Tabelle XY
 
  Übersicht  Spalte 1  Spalte 2
 
 
  Ergebnis Erste Spalte Zweite Spalte
 
 
  Zeile 1 Erste Zelle Zweite Zelle
  Zeile 2 Dritte Zelle Vierte Zelle
  Zeile 3 Fünfte Zelle Sechste Zelle
  Zeile 4 Siebte Zelle Achte Zelle
  Zeile 5 Neunte Zelle Zehnte Zelle
  Zeile 6 Elfte Zelle Zwölfte Zelle
 






++++

++++ Dazu gehörenden CSS-Beispielcode anzeigen | 
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;
}
thead {
           background-color: #CCBA8F;
}
.ohne {
           background-color: #E6DFCF;
           color: #807459;
}

tfoot {
           background-color: #CCBA8F;
}

tbody tr.gerade {
           background-color: #E6DFCF;
           color: #647D8F;
}
tbody tr {
           background-color: white;
}
tbody tr th {
           background: url(hg_table2.gif) white no-repeat 3px 3px;
}
tbody tr.gerade th {
           background: url(hg_table1.gif) #E6DFCF no-repeat 3px 3px;
}

++++