Tabelle mit grauem Hintergrund
Kurzanleitung:
- Sie legen Ihre Tabelle ganz normal über den Editor an
- Sie fügen unten stehenden Code vor <tbody> ein
- Sie passen die Titel entsprechend Ihren Anforderungen ein
1. Die Tabelle
Sie können Ihre Tabelle ganz normal über den TinyMCE-Editor erstellen, indem Sie das entsprechende Symbol, wie im nebenstehenden Bild abgebildet, anklicken. Die gewünschte Tabellengröße lässt sich dann intuitiv auswählen.
Über Punkt "Table properties" können Sie die Ausmaße einer bereits existierenden Tabelle anpassen. Über die Untermenüpunkte "Cell", "Row" und "Column" lassen sich die Einstellungen für Zellen, Zeilen und Spalten aufrufen. Hier kann man auch neue Tabellenzeilen- und spalten hinzufügen.
Achten Sie dabei darauf, dass Sie die Titelreihe nicht mit einberechnen, die werden Sie später erstellen.
2. Der Code
Da Sie sich für die graue Tabelle entschieden haben, müssen Sie folgendne Code im Quelltext-Modus eingeben. Den Quelltext-Modus erreichen Sie über einen Klick auf folgenden Button:
Es öffnet sich ein weiteres Fenster, dass Ihren eingegebenen Hauptinhalt ausgibt. Nun müssen Sie den Anfang der Tabelle suchen, der, wenn Sie die Tabelle mit dem TinyMCE-Editor angelegt haben, wie folgt aussehen sollte:
Wichtig ist hier das <table>. Wenn Sie diesen Teil identifiziert haben, markieren Sie ihn, aber nicht die folgende Zeile (<tbody>), und ersetzen Sie ihn durch folgenden Code:
<table class="matrix2">
<thead>
<tr><th>Überschrift Spalte 1</th><th>Überschrift Spalte 2</th><th>Überschrift Spalte 3</th><th>Überschrift Spalte 4</th></tr>
</thead>
Dieser Code setzt die Klasse fest und erzeugt die Kopfzeile, die vier Spalten hat.
Eine fertige Tabelle könnte dann so aussehen:
2.1 Erklärung des Codes
Code | Bedeutung |
---|---|
<table class="matrix2"> | Definiert, dass nun eine Tabelle erstellt wird, mit der Klasse matrix2. Diese Klasse steuert das Aussehen. |
<thead> ...</thead> | Definiert die Kopfzeile der Tabelle. In dieser Kopfzeile müssen die Zellen der Überschriftsreihe, die für diese Klasse rot ausgeführt wird, definiert werden. |
<tr>...</tr> | Setzt fest, dass nun eine Zeile der Tabelle beginnt. (tr = table row) |
<tbody>...</tbody> | Definiert, dass jetzt der Inhalt der Tabelle anfängt. Die folgenden Tags müssen sich innerhalb des Body-Tags befinden. |
<tr>...</tr> | S.o. Definiert, dass jetzt eine Zeile anfängt, diesmal nicht als Header, sondern als Inhalt. |
<td>...</td> | td steht für table data, bedeutet also, dass jetzt eine Datenzelle befüllt wird, und zwar mit dem Inhalt zwischen dem Eröffnungstag (<td>) und dem schließenden Tag (</td>). Bei jeder Zeile müssen Sie so für jede Spalte einen <td>Wert</td> haben. |
</tbody> | Falls noch nicht vorhanden, müssen Sie den schließenden Tag wieder nutzen, um zu signalisieren, dass der Body abgeschlossen ist. |
</table> | Auch der table-Tag bedarf eines abschließenden Tags. Diesen müssen Sie ganz ans Ende setzen. |