Beispiele
Anwendungsbeispiele für die mögliche Gestaltung von Tabellen für Veranstaltungsinformationen, zeitliche Abläufe, Publikationsübersichten oder sonstige tabellarische Daten.
» Quellcode einblenden » Quellcode ausblenden
<table width="361" class="uni-grid" style="background-color:#FFFFFF;">
<tbody>
<tr>
<th colspan="2">Headline</th>
</tr>
<tr>
<td style="width: 179px;"> </td>
<td style="width: 182px;"> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
» Quellcode einblenden » Quellcode ausblenden
<table width="543" style="background-color:#FFFFFF;" class="uni-grid">
<tbody>
<tr>
<th colspan="3">Headline</th>
</tr>
<tr>
<td style="width: 179px;"> </td>
<td style="width: 182px;"> </td>
<td style="width: 182px;"> </td>
</tr>
<tr>
<th colspan="3">Headline</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
| Headline |
| Subline |
| | | | |
| | | | |
| Headline |
| Subline |
| | | | |
| | | | |
» Quellcode einblenden » Quellcode ausblenden
<table width="722" class="uni-grid" style="background-color:#FFFFFF;">
<tbody>
<tr>
<th colspan="4">Headline</th>
</tr>
<tr>
<td class="subline" colspan="4">Subline</td>
</tr>
<tr>
<td style="width: 179px;"> </td>
<td style="width: 182px;"> </td>
<td style="width: 182px;"> </td>
<td style="width: 179px;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th colspan="4">Headline</th>
</tr>
<tr>
<td colspan="4" class="subline">Subline</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS-Klassen im CMS Zope/Plone
In der CD-Umsetzung für das CMS Zope/Plone existieren bereits CSS-Klassen für die Tabellenformatierung.
Mit dem Einsatz der Klasse "uni-grid" auf Tabellen (<table class="uni-grid">) werden die generellen Tabellenformatierungen zugewiesen. Durch die Zuweisung der Klasse "even" auf Zeilen (<tr class="even">) bzw. "subline" auf Zellen (<td class="subline">) erhalten Sie Zeilen bzw. Zellen mit grauem Hintergrund.
Zurück: Icons und Funktionselemente
