Im Beispielcode sehen wir 7 Klassen fett hervorgehoben:
Tabellenzellen formatieren - table
- header
- even
- odd
- rowheader
- colheader
- tablepic
- cell
Jeder Tabelle wird eine ID zugeordnet. Diese generiert sich aus der Zahl der Spalten und Reihen. Mit Hilfe der vergebenen Id kann gegebenenfalls per CSS eine besondere Formatierung für individuelle Tabellen vorgenommen werden.
Damit keine ID doppelt vergeben wird, dürfen auf derselben Seite keine Tabellen untereinander stehen, die absolut identische Werte haben.
Die Klassen und das grundsätzliche Aussehen von Tabellen im Contentbereich definieren wir im CSS-Stylesheet:
CSS:
/* Tabelle */
#content table {
line-height: 160%;
padding: 2px 0px 0px 10px;
/* oben, rechts, unten, links */
margin: 0px 10px 0px 10px;
width:96% !important;
}
#content tr.odd {
clear: both;
border: 1px solid <cc:print value="&usercolor.medium">;
background-color: #E3EADF!important;
}
#content tr.even {
clear: both;
border: 1px solid <cc:print value="&usercolor.dark">;
background-color: <cc:print value="&usercolor.medium">!important;
}
#content tr.header {
clear: both;
border: 1px solid <cc:print value="&usercolor.medium">;
background-color: <cc:print value="&usercolor.dark">!important;
color: #fff!important;
}
#content td.rowheader {
font-weight: bold;
vertical-align:middle;
text-align: center;
border: 1px solid <cc:print value="&usercolor.medium">;
background-color: <cc:print value="&usercolor.dark">!important;
color:#fff!important;
}
.rowheader {
padding: 0.5em 0.2em 0.5em 0.5em !important;
}
#content td.colheader {
font-weight: bold;
padding: 4px;
margin: 0px;
vertical-align:middle;
text-align: left;
border: 1px solid <cc:print value="&usercolor.medium">;
background-color: #fff!important;
color:#000!important;
}
#content td.cell {
padding: 4px;
margin: 0px;
vertical-align:middle;
text-align: left;
line-height: 130%;
border: 1px solid <cc:print value="&usercolor.medium">;
}
#content td.tablepic {
text-align:center;
clear: both;
border: 1px solid <cc:print value="&usercolor.medium">;
}
