Baukasten

Hier sind einige der Elemente die bei der Erstellung von Webapplikationen benutzt werden. Sie sollen bei der Kommunikation und Planung der neuen Anwendung helfen.

Was sind Tabellen?

Tabellen strukturieren Daten in Zeilen und Spalten und eignen sich für übersichtliche, vergleichbare Informationsmengen. Durch optionale Formatierungen wie Streifen, Rahmen, Hover-Effekte und responsives Scrollen lassen sie sich an verschiedene Anwendungsfälle anpassen. Für sehr große Datenmengen mit Sortier- und Suchbedarf empfehlen sich erweiterte Datentabellen.

Default Table
# Name Position Age Start Date
1 Brandon Jacob Designer 28 2016-05-25
2 Bridie Kessler Developer 35 2014-12-05
3 Ashleigh Langosh Finance 45 2011-08-12
4 Angus Grady HR 34 2012-06-11
5 Raheem Lehner Dynamic Division Officer 47 2011-04-19
Dark Table
# Name Position Age Start Date
1 Brandon Jacob Designer 28 2016-05-25
2 Bridie Kessler Developer 35 2014-12-05
3 Ashleigh Langosh Finance 45 2011-08-12
4 Angus Grady HR 34 2012-06-11
5 Raheem Lehner Dynamic Division Officer 47 2011-04-19
Active Table

Highlight a table row or cell by adding a .table-active class.

# Name Position Age Start Date
1 Brandon Jacob Designer 28 2016-05-25
2 Bridie Kessler Developer 35 2014-12-05
3 Ashleigh Langosh Finance 45 2011-08-12
4 Angus Grady HR 34 2012-06-11
5 Raheem Lehner Dynamic Division Officer 47 2011-04-19
Tables without borders

Add .table-borderless for a table without borders.

# Name Position Age Start Date
1 Brandon Jacob Designer 28 2016-05-25
2 Bridie Kessler Developer 35 2014-12-05
3 Ashleigh Langosh Finance 45 2011-08-12
4 Angus Grady HR 34 2012-06-11
5 Raheem Lehner Dynamic Division Officer 47 2011-04-19
Table Variants

Use contextual classes .table-primary .table-secondary .table-success .table-danger .table-warning .table-info .table-light .table-dark to color tables, table rows or individual cells.

Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
Table with stripped rows
# Name Position Age Start Date
1 Brandon Jacob Designer 28 2016-05-25
2 Bridie Kessler Developer 35 2014-12-05
3 Ashleigh Langosh Finance 45 2011-08-12
4 Angus Grady HR 34 2012-06-11
5 Raheem Lehner Dynamic Division Officer 47 2011-04-19
Table with hoverable rows
# Name Position Age Start Date
1 Brandon Jacob Designer 28 2016-05-25
2 Bridie Kessler Developer 35 2014-12-05
3 Ashleigh Langosh Finance 45 2011-08-12
4 Angus Grady HR 34 2012-06-11
5 Raheem Lehner Dynamic Division Officer 47 2011-04-19
Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

# Name Position Age Start Date
1 Brandon Jacob Designer 28 2016-05-25
2 Bridie Kessler Developer 35 2014-12-05
3 Ashleigh Langosh Finance 45 2011-08-12
4 Angus Grady HR 34 2012-06-11
5 Raheem Lehner Dynamic Division Officer 47 2011-04-19

Border color utilities can be added to change colors:

# Name Position Age Start Date
1 Brandon Jacob Designer 28 2016-05-25
2 Bridie Kessler Developer 35 2014-12-05
3 Ashleigh Langosh Finance 45 2011-08-12
4 Angus Grady HR 34 2012-06-11
5 Raheem Lehner Dynamic Division Officer 47 2011-04-19
Small tables

Add .table-sm to make any .table more compact by cutting all cell padding in half.

# Name Position Age Start Date
1 Brandon Jacob Designer 28 2016-05-25
2 Bridie Kessler Developer 35 2014-12-05
3 Ashleigh Langosh Finance 45 2011-08-12
4 Angus Grady HR 34 2012-06-11
5 Raheem Lehner Dynamic Division Officer 47 2011-04-19