Components Table CSS Framework

Components, Table, CSS und Framework sind hier zusammen, weil Tabellen ohne Styling oft nach 90ern aussehen.

Tabellen sind perfekt für Dokus: Klassen, Eigenschaften, kurze Erklärungen. In einem Framework ist eine Table-Component meist schlicht, aber konsequent. Du willst klare Linien, ordentliche Zellabstände und einen Kopfbereich, den man sofort erkennt. Die Tabelle soll ruhig wirken und trotzdem Struktur geben. Wenn du das über Base alleine versuchst, wird es schnell zu allgemein. Als Component kann die Tabelle gezielt optimiert werden.

<table class="table">
  <thead>
    <tr><th>Klasse</th><th>Wirkung</th></tr>
  </thead>
  <tbody>
    <tr><td>.btn</td><td>Button Grundstil</td></tr>
    <tr><td>.codebox</td><td>Code in Box darstellen</td></tr>
  </tbody>
</table>

Lesbarkeit vor Effekten

Ich sehe oft Tabellen, die mit zu vielen Farben arbeiten. Für Doku reicht ein sanfter Hintergrund im Header und ein feiner Rand. Der Rest ist Typografie. Wenn Zeilenhöhen stimmen und Abstände nicht zu eng sind, liest sich das angenehm. In einem Wiki-nahen Look wie hier wirkt das vertrauenswürdig und nicht laut. Genau das will man bei technischen Seiten.

.table th{ background:#eaf3ff; }
.table td, .table th{ padding:10px; border:1px solid #c8ccd1; }

Tabellen passen in die Schichtenlogik

Base gibt Grundwerte, Content ordnet Standard-HTML, Objects bauen Layout. Eine Tabelle ist eine UI-Komponente, weil sie ein fertiges Element ist, das man wiederholt und erwartet. Wenn du das sauber trennst, kannst du später eine zweite Tabellenvariante ergänzen, ohne alles kaputt zu machen. Und ja, auch hier gilt: wenn man es am Anfang schludert, wird’s später sehr anstrengend, das wieder gerade zu ziehn.