Wenn Sie in Unterseiten oder in der Artikelbeschreibung mit Tabellen arbeiten, so können Sie diese mit ganz einfachen Schritten optisch gestalten und auch Responsive darstellen.
Allgemeine Angaben
Das im apt-shop standardmäßig verwendete Bootstrap Framework bietet einfache Funktionen um Ihre Tabellen zu gestalten.
Geben Sie dazu der Tabelle die CSS Klasse table:
<table class="table"></table>
Sie können dies auch im HTML Editor machen, wenn Sie dort eine Tabelle hinzufügen/bearbeiten:
Responsive Tabellen
Wenn Sie Tabellen auch mobil optimiert darstellen wollen, dann setzen Sie einen div container mit der Klasse table-responsive um die Tabelle:
<div class="table-responsive"> <table class="table"> ... </table> </div>
gestreifte Zeilen
Möchten Sie jede 2. Zeile farblich unterlegen, so geben Sie zusätzlich die CSS Klasse table-striped an:
<table class="table table-striped"></table>
Tabelle mit Rahmen
Möchten Sie einen Rahmen um die Tabelle/Zellen angeben, so geben Sie zusätzlich die CSS Klasse table-bordered an:
<table class="table table-bordered"></table>
Mouseover in den Zeilen
Sollen die Zeilen beim Mouseover mit einer Hintergrundfarbe hinterlegt werden, so geben Sie zusätzlich die CSS Klasse table-hover an:
<table class="table table-hover"></table>
Weitere Optionen
Es gibt noch weitere Optionen zur Darstellung von Tabellen: Hier finden Sie die Informationen dazu.