Tabellen

HTML-Tabellen sehen in der Standardform relativ langweilig aus. Durch Bootstrap kannst du diese optisch aufwerten. Bootstrap bietet dir viele Möglichkeiten, deine Tabellen visuell zu verändern (Die jeweiligen Optionen findest du unten in der Übung.)

Die Basis zur Veränderung des Tabellen-Designs bringt die Klasse table mit. Damit weiß Bootstrap, dass du eine Tabelle designen möchtest.

• Verwendest du zusätzlich table-dark, wird die Tabelle dunkel dargestellt.
• Soll die Tabelle kompakter dargestellt werden, kannst du die Klasse table-sm verwenden.

<table class="table table-dark table-sm">

Tabellenkopf

Mit thead-light und thead-dark, kannst du die Kopfzeilen/-spalten grafisch hervorheben.

<thead class="thead-light">

Tabellenzeilen

Auf einer einfachen Tabelle verliert man schnell den Überblick. Aus diesem Grund ist es hilfreich, die Tabellenzeilen farblich abwechselnd zu designen. Dies kannst du in Bootstrap mit der Klasse table-striped machen.

<tr class="table-striped">

Rahmen

Mit der Klasse table-bordered erhältst du Rahmen auf allen Seiten.

Möchtest du keine Rahmen darstellen, verwendest du die Klasse table-borderless.

<table class="table-bordered">

Tabellenzeile hervorheben

Eine Zeile kann hervorgehoben werden, wenn die Maus darüber fährt (Hover). Das ist nicht nur ein Hingucker, sondern bietet eine bessere Usability für deine Besucher. Dafür ist die Klasse table-hover zuständig.

<tr class="table-hover">

Tabellenfarben

Zu Farben in Bootstrap kommen wir in den nächsten Modulen noch, allerdings gibt es zwei Möglichkeiten Tabellenzeilen und -zellen einzufärben. Für die Primärfarbe sind das die Klassen table-primary und bg-primary.

<td class="table-primary">

In dieser Übung darfst du selber testen, wie sich die einzelnen Klassen verhalten:

Wie erstelle ich ein Webseiten-Layout?

Eins der kompliziertesten Themen in HTML sowie CSS (zumindest früher und wenn man als Anfänger startet) ist das Layouting.

Es gibt verschiedene Möglichkeiten und Techniken, um ein Webseiten-Layout zu gestalten.

Seitdem alle Webseiten mobil erreichbar sein müssen, kommt dazu die Herausforderung, dass das Layout zusätzlich responsiv sein muss. Dazu aber später mehr.

Dank Bootstrap haben wir die Möglichkeit mit ein paar CSS-Klassen ein Layout nach unseren Wünschen zu erstellen.

Sobald wir einen Bootstrap Container definiert haben (siehe letzte Lektion!) können wir in Bootstrap Zeilen und Spalten erstellen, ähnlich wie in einer Tabelle.

Rows und Columns (dt. Zeilen und Spalten)

In einem Container kann man zunächst mehrere Zeilen definieren, dies geht mit einem div und der Klasse row, z.B.

Um eine Spalte in dieser Zeile hinzuzufügen, erstellt man ein weiteres div mit der Klasse col:

In das div-Element kann man nun ohne Probleme alle weiteren Elemente einfügen. Benötigst du eine weitere Zeile oder Spalte, fügst du entsprechende Elemente mit den Klassen row oder col hinzu.

Wichtig zu wissen ist, dass man maximal 12 Spalten verwenden kann. In den seltensten Fällen benötigt man mehr Spalten.

(Solltest du mal mehr als 12 Spalten benötigen, melde dich bitte per Mail bei uns, das wollen wir sehen! ?)

Das sind die Basics für das Layout. In dem Beispiel darfst du mit einem Layout herumspielen, in dem du Zeilen und Spalten anlegst.