How to edit tables in CityDesk the shorthand-way

CityDesk is lacking support for tables, unfortunately. One way around is to create and edit tables in MS Excel or HTML editors such as Dreamweaver and then copy and paste into a CityDesk article.

Another way, using Javascript to create tables on the fly from data entered into CityDesk articles, is described here and has its pros and cons. On the bright side, once set-up its extremely fast to work with and edit data and you don't have to leave CityDesk.

Assuming you want to maintain a table such as

in CityDesk. Create a CityDesk article named "members", switch to HTML View (just for data entry, no need to learn HTML tags) and enter the table data with

• each item separated by a "#"
• each line separated by "|\"

Save and close the article. Copy and paste the following code in a CityDesk variable, say "dynamicTable" (you could also paste this code directly in your template), and add the variable command {$.dynamicTable$} any place you desire within your template:

<script type="text/javascript">
<!--
var memberData = '{$include "members"$}';
var memberLines = memberData.split("|");
document.writeln('<table width="100%" cellpadding="4" cellspacing="0">');
document.writeln('<tr style="font-weight:bold;"><td>Name</td><td>Age</td><td>Color</td>');
document.writeln('<td>Car</td><td>Phone</td><td>ID</td><td>Email</td></tr>');
for (member=0; member<memberLines.length; ++member) {
var memberItem = memberLines[member].split("#");
document.writeln('<tr>');
document.writeln('<td>' + memberItem[0] + '</td>');
document.writeln('<td>' + memberItem[1] + '</td>');
document.writeln('<td>' + memberItem[2] + '</td>');
document.writeln('<td>' + memberItem[3] + '</td>');
document.writeln('<td>' + memberItem[4] + '</td>');
document.writeln('<td>' + memberItem[5] + '</td>');
document.writeln('<td>' + memberItem[6] + '</td>');
document.writeln('</tr>');
}
document.writeln('</table>');
//-->
</script>

This code generates a table as shown above as an example of the general principle of splitting data with special characters ("#" and "|\") and having Javascript generate HTML table code on the fly (aka when the page loads in the browser).