allgemein …
Tabellen dienen der übersichtlichen Darstellung von Zahlen oder Daten. Die früher weit verbreitete Verwendung von Tabellen in Webdesign und -layout ist heute nicht mehr erwünscht. Das folgende Beispiel zeigt mögliche Angaben zur Gestaltung von Tabellen.
| Beschreibung: | CSS-Code: |
|---|---|
| Tabellenmuster |
table { border-spacing:10px; table-layout:fixed; width:100%; border-collapse:collapse; }
table, th, td { border:1px solid black; }
th, td { padding:0.5em; }
td { text-align:center; vertical-align:bottom; }
tr:nth-child(even) { background-color:#f2f2f2; }
tr:hover {background-color:#eee; }
|
Beschreibung: | HTML-Code: |
| Tabelle einbinden |
<table> <colgroup> <col> <col> <col> </colgroup> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </tbody> </table> |
Beschreibung: | HTML-Code: |
| Struktur mit:
- Kopfbereich - Inhalt - Fußbereich |
<table>
<thead>
<tr><th>Kopfzeile ...
</thead>
<tbody>
<tr><td>normale Zelle ...
</tbody>
<tfoot>
<tr><td>Fußzeile ...
</tfoot>
</table>
|
zum Beispiel …
| 2020 | 2021 | 2022 | 2023 | |
|---|---|---|---|---|
| Kohlköpfe | 50 | 64 | 48 | 67 |
| Wirsing | 35 | 28 | 38 | 25 |
| Rosenkohlstauden | 12 | 13 | 17 | 20 |
| 97 | 85 | 103 | 112 |