Tabellen einfügen: Unterschied zwischen den Versionen

Aus GCMS Hilfe
Wechseln zu: Navigation, Suche
Zeile 3: Zeile 3:
 
== Bootstrap ==
 
== Bootstrap ==
 
[[Datei:Tabelle.png|miniatur|Bootstrap-Tabelle - Frontend]]
 
[[Datei:Tabelle.png|miniatur|Bootstrap-Tabelle - Frontend]]
Ü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.
+
Ü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 <nowiki><tr></nowiki> leitet hierbei immer eine neue Tabellenzeiile ein und muss durch <nowiki></tr></nowiki> beendet werden. 
 +
 
 +
Der Codeabschnitt <nowiki><th> dient dazu eine neue Spalte zu erstellen und </th></nowiki> zum Schließen dieser. 
  
 
  <keinbr/>
 
  <keinbr/>

Version vom 18. April 2018, 09:33 Uhr

Es ist möglich über html Tabellen auf den GCMS Seiten zu verwenden. Weitere informationen hierzu entnehmen Sie bitte hier.

Bootstrap

Bootstrap-Tabelle - Frontend

Ü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">
<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.