Logo

Tabellen in moziloCMS


Um eine Tabelle anzulegen gibt es in moziloCMS bereits ein Syntaxelement.
Den Cursor an die Stelle setzen wo die Tabelle stehen soll und dann in der Syntaxleiste auf das Symbol für die Tabelle klicken.

Bild "Webdesign/Tutorials:table01.jpg"

Im Textfeld erschein dann:

[tabelle|
<<  |  >>
<  |  >
]


Der Platzhalter <<  |  >> für den Tabellenkopf kann weggelassen werden wenn er nicht benötigt wird.
Den Platzhalter <  |  > wiederholtst Du entsprechend der Anzahl Deiner Tabellenzeilen.
Der senkrechte Strich | trennt die Tabellenzellen voneinander. Je mehr Striche | um so mehr Spalten hat die Tabelle.

Mit Text sieht die obige Tabelle auf der Seite so aus:
Überschrift 1   Überschrift 2
Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt

Die grundlegenden Styles für die Tabelle sind in der style.css des verwendeten Layouts bereits angelegt und können angepasst und erweitert werden.

Möchtest Du weitere Tabellen verwenden, diese aber anders stylen, dann ist dies natürlich auch möglich.

Hier die Tabelle nochmal mit einem Rahmen:

Überschrift 1 Überschrift 2
Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt

Um verschiedene Tabellen unterschiedlich zu formatieren kannst Du jeder Tabelle einen eigenen class-Namen zuweisen (Ein paar Grundkenntnisse in css setze ich voraus.):

[tabelle=classname|

In der style.css kannst Du die Tabelle dann formatieren über:

table.classname {} die Styles für die gesammte Tabelle
th.classname {} die Styles für den Tabellenkopf
td.classname1 {} die Styles für alle Zellen in jeder ersten, dritten, fünften, siebenten (u.s.w.) Zeile
td.classname2 {} die Styles für alle Zellen in jeder zweiten, vierten, sechsten, achten (u.s.w.) Zeile

Für die Tabellenzellen wird automatisch ein zweiter class-Name classnamecellNummer angelegt. Damit ist es möglich jede Zelle in einer Zeile nochmals separat zu stylen.

td.classname1.classnamecell1 {} die erste Zelle der ersten, dritten, etc. Zeile
td.classname1.classnamecell2 {} die zweite Zelle der ersten, dritten, etc. Zeile
td.classname1.classnamecell3 {} die dritte Zelle der ersten, dritten, etc. Zeile
td.classname2.classnamecell1 {} die erste Zelle der zweiten, vierten, etc. Zeile
td.classname2.classnamecell5 {} die fünfte Zelle der zweiten, vierten, etc. Zeile
td.classnamecell4 {} die vierte Zelle jeder Zeile
td.classnamecell5 {} die fünfte Zelle jeder Zeile

Hier mal eine Tabelle mit Rahmen, einem border-spacing und für jede Tabellenzelle je Zeile eine andere Farbe:

Überschrift 1 Überschrift 2 Überschrift 3 Überschrift 4
Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt
Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt
Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt
Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt
Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt Irgendein bedeutungsloser Inhalt

In den meisten Fällen dürfte es vollkommen ausreichend sein, die Tabellen über den vorgegebenen oder einen eigenen class-Namen den eigenen Wünschen entsprechend per css zu stylen.


Es gibt jedoch tabellarische Inhalte, da ist es sinnvoll oder gewünscht vereinzelt Spalten und/oder Zeilen zusammen zu fassen, wie zum Beispiel für die Ahnentafel meines Zwergpinschers (siehe Bild). Dafür gibt es die beiden Tabellenzellen-Attribute colspan und rowspan.

Bild "Webdesign/Tutorials:table03.jpg"

In diesem Fall reicht das vorhandene Syntaxelement nicht aus, denn colspan und rowspan können nicht über css verwendet werden. Diese Attribute werden direkt im html-Tag <td> eingetragen.
(Details siehe selfhtml)

Du hast zwei Möglichkeiten dies umzusetzen. Entweder über html oder Du legst ein eigenes Syntaxelement an. Was für Dich sinnvoller ist, entscheidest Du.


über html:

Den Cursor an die Stelle setzen wo die Tabelle stehen soll und dann in der Syntaxleiste auf das Symbol für html klicken.

Bild "Webdesign/Tutorials:table02.jpg"

Im Textfeld erschein dann:

[html| ]

Zwischen | und ] schreibst du den html-Code für Deine Tabelle:

[html|
<table class="tut">
<tr>
<td>Zelle1, Reihe1</td>
<td>Zelle2, Reihe1</td>
<td>Zelle3, Reihe1</td>
</tr>
<tr>
<td colspan="2">Zelle1, Reihe2</td>
<td rowspan="2">Zelle2, Reihe2</td>
</tr>
<tr>
<td>Zelle1, Reihe3</td>
<td>Zelle2, Reihe3</td>
</tr>
</table>
]


Damit es nicht unübersichtlich wird habe ich auf umfangreiche Formatierungen verzichtet und nur dem table-Tag eine class zugewiesen.

So sieht die Tabelle dann aus:

Zelle1, Reihe1 Zelle2, Reihe1 Zelle3, Reihe1
Zelle1, Reihe2 Zelle2, Reihe2
Zelle1, Reihe3 Zelle2, Reihe3


über eigene Syntaxelemente:

Gehe zu Einstellungen und dort zu Syntax-Einstellungen. Klicke auf das Symbol mit dem Stift:
Bild "Webdesign/Tutorials:table04.jpg"

Jetzt lege Deine Syntaxelemente an:

table = <table class="{DESCRIPTION}">{VALUE}</table>
tr = <tr>{VALUE}</tr>
th = <th class="{DESCRIPTION}">{VALUE}</th>
td = <td class="{DESCRIPTION}">{VALUE}</td>
td_col2 = <td colspan="2" class="{DESCRIPTION}">{VALUE}</td>
td_row2 = <td rowspan="2" class="{DESCRIPTION}">{VALUE}</td>


table, tr, td müssen sein.
th ist optional
td_col2, td_row2 etc. legst Du Dir so an wie Du sie benötigst.

Du kannst die Syntaxelemente natürlich auch anders benennen, z.B. mit Tabelle, Zeile, Zelle usw.

Im Editor kannst Du nun Deine eigenen Syntaxelemente auswählen:
Bild "Webdesign/Tutorials:table05.jpg"

So sollte die obige Tabelle (html) mit den Syntaxelementen aussehen:

[table=tut|
[tr|[td=|Zelle1, Reihe1][td=|Zelle2, Reihe1][td=|Zelle3, Reihe1]]
[tr|[td-col2=|Zelle1, Reihe2][td-row2=|Zelle2, Reihe2]]
[tr|[td=|Zelle1, Reihe3][td=|Zelle2, Reihe3]]
]


Das Ergebnis ist das selbe wie bei der Variante mit html:

Zelle1, Reihe1Zelle2, Reihe1Zelle3, Reihe1
Zelle1, Reihe2Zelle2, Reihe2
Zelle1, Reihe3Zelle2, Reihe3