Tabelle mit farblich abgesetzten Zeilen
Kurzanleitung:
- Sie legen Ihre Tabelle ganz normal über den Editor an
- Sie fügen unten stehenden Code vor <tbody> ein
- Sie passen die Titel und die Links entsprechend Ihren Anforderungen an
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. Je nach Layout kann es Sinn ergeben, für die Buchstaben, auf die später verlinkt wird, eine separate Zeile einzuberechnen.
2. Der Code
Sie können die alternierende Tabelle auch ohne Sprungmarken nutzen, wenn Sie allerdings die Funktion mit Sprungmarken und dem dazugehörigen Alphabet nutzen möchten, müssen Sie den folgenden Code im Quelltext-Modus eingeben. Den Quelltext-Modus erreichen Sie über einen Klick auf den Button, der mit HTML beschriftet ist:
Es öffnet sich ein weiteres Fenster, das 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:
<div class="abc"><a href="streifen.html#A">A</a> <a href="streifen.html#B">B</a> <a href="streifen.html#C">C</a> <a href="streifen.html#D">D</a> <span href="#">E</span> <span href="#">F</span> <a href="streifen.html#G">G</a> <span href="#">H</span> <a href="streifen.html#I">I</a> <span href="#">J</span> <a href="streifen.html#K">K</a> <span href="#">L</span> <a href="streifen.html#M">M</a> <span href="#">N</span> <a href="streifen.html#O">O</a> <a href="streifen.html#P">P</a> <span href="#">Q</span> <span href="#">R</span> <a href="streifen.html#S">S</a> <a href="streifen.html#T">T</a> <span href="#">U</span> <a href="streifen.html#V">V</a> <a href="streifen.html#W">W</a> <span href="#">X</span> <span href="#">Y</span> <a href="streifen.html#Z">Z</a></div>
<table style="width: 100%;" cellpadding="1" class="streifen" border="1" cellspacing="0"><colgroup> <col width="49%" /> <col width="17%" /> <col width="17%" /> <col width="17%" /> </colgroup>
Der erste Teil des Codeschnipsels erzeugt die Buchstabendarstellung, die auch bei den Mitarbeiterverzeichnissen verwendet wird. Wichtig wird hier, dass Sie die Links entsprechend anpassen. Das können Sie wie gewohnt über die Kettenglied-Symbole im TinyMCE-Editor erledigen. Zu beachten ist, dass Sie vorher schon die Sprungmarken (Anker) gesetzt haben müssen, auf die Sie verweisen. Im obigen Beispiel sind dies die Buchstaben.
Bitte beachten Sie den Unterschied zwischen der Markierung als <a href=""> und <span href="">: Ersteres nutzen Sie, wenn der Buchstabe angesprungen, letzteres, wenn keine Sprungmarke gesetzt werden soll. Der entsprechende Buchstabe wird dann ausgegraut.
Der zweite Teil des Codeschnipsels legt wiederum die Klasse, hier streifen, fest und vergibt noch diverse andere Attribute, die Sie nach Ihren Wünschen anpassen können.
Eine fertige Tabelle könnte dann so aussehen: