Tabellen einfügen: Unterschied zwischen den Versionen
Aus GCMS Hilfe
(→Bootstrap) |
|||
| Zeile 10: | Zeile 10: | ||
<keinbr/> | <keinbr/> | ||
| − | <nowiki><div class="table-responsive"><table | + | <nowiki><div class="table-responsive"><table</nowiki> |
| + | class="table"> | ||
<thead> | <thead> | ||
<nowiki><tr></nowiki><nowiki><th>#</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki><nowiki></tr></nowiki> | <nowiki><tr></nowiki><nowiki><th>#</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki> <nowiki><th>Table heading</th></nowiki><nowiki></tr></nowiki> | ||
Version vom 5. Juli 2018, 13:45 Uhr
Es ist möglich über html Tabellen auf den GCMS Seiten zu verwenden. Eine gute und Ausführliche Anleitung für das Erstellen von angepassten Tabellen finden Sie hier.
Bootstrap
Über Bootstrap ist es Ihnen ebenfalls möglich Tabellen auf dem GCMS-System zu verwenden. Rechts sehen Sie ein Beispiel wie so eine Tabelle aussieht. Die hier verwendete Tabellenform ist in einem div Element eingegliedert und die Spalten passen sich immer über die ganze Breite der Seite an.
Der Befehl <tr> leitet hierbei immer eine neue Tabellenzeiile ein und muss durch </tr> beendet werden.
Der Codeabschnitt <th> dient dazu eine neue Spalte zu erstellen und </th> zum Schließen dieser.
<keinbr/> <div class="table-responsive"><table class="table"> <thead> <tr><th>#</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th></tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">2</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">3</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table> </div>
Eine Ausführliche Dokumentation zu den Funktionen ist hier zu finden.
