Mouseover Tabelle
Kurzanleitung:
- Sie legen Ihre Tabelle ganz normal über den Editor an
- Sie ergänzen <tbody> umd eine weitere Klasse: <tbody class="mouseover">
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.
2. Der Code
Um den Mouseover-Effekt einzufügen, müssen Sie den Quelltext bearbeiten. 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="mouseover">
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="mouseover"> | Definiert, dass nun eine Tabelle erstellt wird, mit der Klasse mouseover. Diese Klasse steuert das Aussehen. |
<tbody>...</tbody> | Definiert, dass jetzt der Inhalt der Tabelle anfängt. Die folgenden Tags müssen sich innerhalb des Body-Tags befinden. |
<tr>...</tr> | Definiert, dass jetzt eine Zeile anfängt. (tr = table row) |
<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. |