Tabellen
Datentabellen mit UIkit-Styling, Striping, Hover-Effekten und responsivem Verhalten.
Basis-Tabelle
| ID | Name | Rolle | Status |
|---|---|---|---|
| 1 | Max Mustermann | Admin | Aktiv |
| 2 | Erika Musterfrau | Editor | Aktiv |
| 3 | Karl Klein | Benutzer | Inaktiv |
HTML
<table class="uk-table uk-table-divider">
<thead>
<tr><th>Name</th><th>Rolle</th></tr>
</thead>
<tbody>
<tr><td>Max Mustermann</td><td>Admin</td></tr>
</tbody>
</table>Varianten
UIkit bietet verschiedene Tabellen-Modifikatoren:
| Klasse | Beschreibung |
|---|---|
| .uk-table-divider | Trennlinie zwischen Zeilen |
| .uk-table-striped | Abwechselnde Zeilenhintergründe |
| .uk-table-hover | Hover-Effekt auf Zeilen |
| .uk-table-small | Geringeres Padding |
| .uk-table-middle | Vertikal zentrierte Zellinhalte |
| .uk-table-responsive | Horizontales Scrollen auf kleinen Screens |
| .uk-table-justify | Erste/letzte Spalte ohne seitliches Padding |
uk-table-striped + uk-table-hover + uk-table-small
| Datum | Ereignis | Benutzer | IP |
|---|---|---|---|
| 2025-06-01 08:12 | Login | max@test.de | 192.168.1.10 |
| 2025-06-01 08:45 | Seitenaufruf | max@test.de | 192.168.1.10 |
| 2025-06-01 09:03 | Logout | max@test.de | 192.168.1.10 |
| 2025-06-01 09:15 | Login | erika@test.de | 10.0.0.5 |
HTML
<table class="uk-table uk-table-striped uk-table-hover uk-table-small">
...
</table>Mit Aktionsspalte
| Name | Aktionen | |
|---|---|---|
| Max Mustermann | max@mustermann.de | |
| Erika Musterfrau | erika@musterfrau.de |