Folgende Anforderung
- 3 Tabellenzellen sollen mit Grafiken befüllt werden
- eine mit Text befüllte Tabellenzelle soll darüber gespannt sein
- dauerhaftes Abspeichern dieser Tabellen-Einstellung sollte möglich sein
Lösung mittels PHP-Parser
Bedingung: PHP muss auf dem Server ausgeführt werden können.
Wir setzen in der navigation.ccml den
PHP-Parser
von Milena ein.
<body>
<?php ob_start(); ?>
-----hier steht der "normale Quellcode"-----------
<?php
if (!function_exists("ob_get_clean")) {
function ob_get_clean() {
$ob_contents = ob_get_contents();
ob_end_clean();
return $ob_contents;
}
}
$content=ob_get_clean();
$content=str_replace('<td colspan="3"></td>','',$content);
echo $content;
?>
</body>
</html>
das hier: <td colspan="3"></td> ist der Teil, der zu ersetzen ist. Woher er kommt, erkläre ich nun:
Bitte die Originaldatei sichern und folgende paragraph_table.ccml einsetzen. Hier der Code:
CCML:
Um den gesamten Code ansehen zu können, nutzen Sie bitte die Markierfunktion mit Hilfe der Maus.
<cc:*>
--------------------------------------------------
Datei: paragraph_table.ccml
Funktion: Tabelle
--------------------------------------------------
</cc:*>
<table id="colspantab<cc:print value="¶graph.table.colcount"><cc:print value="¶graph.table.rowcount">" class="content">
<cc:loop type="row" obj="myrow">
<cc:if cond="&myrow.number | 2=1">
<cc:if cond="&myrow.header">
<tr class="header">
<cc:else>
<tr class="odd">
</cc:if>
<cc:else>
<tr class="even">
</cc:if>
<cc:loop type="col" obj="mycol" row="&myrow.number">
<cc:if cond="&myrow.header">
<td colspan="3"><cc:else><cc:if cond="&mycol.header"><td class="headercell">
<cc:else>
<td class="cell">
</cc:if>
</cc:if>
<cc:if cond="&mycol.picture"><cc:picture uid="&mycol.picture" obj="tablepic" width="517 / ¶graph.table.colcount - 9" suffix="'cols'+¶graph.table.colcount">
<cc:if cond="&mycol.picture.zoom.isonsite"><a href="<cc:print value="&mycol.picture.zoom.url">"><cc:printpicture obj="tablepic" suffix="'cols'+¶graph.table.colcount" alt="Illustration"></img></a></cc:if>
<cc:if cond="&mycol.picture.zoom.isoffsite"><a href="<cc:print value="&mycol.picture.zoom.url">"><cc:printpicture obj="tablepic" suffix="'cols'+¶graph.table.colcount" alt="Illustration"></img></a></cc:if>
<cc:if cond="&mycol.picture.zoom.isnone"><cc:printpicture obj="tablepic" suffix="'cols'+¶graph.table.colcount" alt="Illustration"></img></cc:if>
<cc:if cond="&mycol.picture.zoom.ispicture"><cc:picture uid="&mycol.picture.zoom.uid" obj="hugepic"><a href="<cc:printpictureurl obj="hugepic">"><cc:printpicture obj="tablepic" suffix="'cols'+¶graph.table.colcount" alt="Illustration"></img></a></cc:if>
<cc:if cond="&mycol.picture.zoom.isdownload"><cc:download uid="&mycol.picture.zoom.uid" obj="mydownload"><a href="<cc:print value="&mydownload.url">"><cc:printpicture obj="tablepic" suffix="'cols'+¶graph.table.colcount" alt="Illustration"></img></a></cc:if>
<cc:else><cc:print value="&mycol.text"></cc:if></td>
</cc:loop>
</tr>
</cc:loop>
</table>
Die Umbrüche sollten nicht geändert werden, damit am Ende der oben gezeigte Code (<td colspan="3"></td>) genauso erscheint und via php-parser eliminiert werden kann.
In das Stylesheet kommen folgende Angaben:
CSS:
/* Tabelle */
table.content {
width: xxxpx; /* eigenen Wert eingeben */
margin: 0px 0px 10px 0px;
border: 1px solid <cc:print value="&usercolor.dark">;
margin: 0;
font-size: 0.8em;
}
tr.odd {clear: both;
background-color : <cc:print value="&usercolor.alt.medium">;
}
tr.even {clear: both;
background-color : <cc:print value="&usercolor.bright">;
}
tr { clear: both;
background-color: <cc:print value="&usercolor.medium">;
}
tr.header {
clear: both;
background-color : <cc:print value="&usercolor.bright">;
font-weight: normal;
}
td.rowheader {
color : <cc:print value="&usercolor.dark">;
background-color : <cc:print value="&usercolor.medium">;
padding: 4px;
margin: 0px;
font-weightx: bold;
vertical-align: middle;
text-align: center;
}
td.headercell {
padding: 4px;
margin: 0px;
vertical-align: top;
text-align: left;
}
td.cell {
padding: 4px;
margin: 0px;
vertical-align: middle;
text-align: left;
}
In w2d eine Tabelle mit drei Spalten und zwei Reihen erstellen, ausserdem Spaltenüberschrift markieren.
Nun können
- der drei Zellen überspannende Text in die mittlere Spalte der ersten Zeile eingegeben und
- die drei Grafiken in der zweiten Zeile in jeweils eine Tabellenzelle eingebunden werden.
Mit w2d Cospan in Tabellen einsetzen.
Mit F12 die Seitenvorschau aufrufen - und siehe da, es klappt.
Bitte beachten:
Der so erzeugte Colspan-Effekt greift zukünftig immer, wenn mit dem geänderten Design eine Tabelle mit einer Headerzeile ausgestattet ist. Ansonsten können alle anderen Tabellen wie gewohnt individuell gestaltet werden.
