A table is collection of data displayed in a matrix.
Below is an explanation of how to create a table using WikiDot syntax.
Examples
The simplest way of creating a table is to click on the table icon when you are edit mode. (The 4th symbol in the second row)
Accepting the default of 3 rows and 3 columns and ticking "first row contains headers" results in the following code & table, which can be then edited.
Code
||~ header ||~ header ||~ header ||
|| cell-content || cell-content || cell-content ||
|| cell-content || cell-content || cell-content ||
Table
| header | header | header |
|---|---|---|
| cell-content | cell-content | cell-content |
| cell-content | cell-content | cell-content |
If you want the table left justified, add [[table style="align:left"]] [[row]] [[cell]] before the table code, and
[[/cell]][[/row]][[/table]] after it.
e.g.
Code
[[table]] [[row]] [[cell]]
||~ header ||~ header ||~ header ||
|| cell-content || cell-content || cell-content ||
|| cell-content || cell-content || cell-content ||
[[/cell]][[/row]][[/table]]
Table
|
Advanced Tables
| cell 0.0 | cell 0.0 | cell 0.1 | cell 0.1 |
| cell 0.0 | cell 0.0 | cell 0.1 |
List
|
Table without Lines
| cell 0.0 | cell 0.0 |
Code
[[table]]
[[row]]
[[cell style="padding: 10px; border: 1px solid white"]]
cell 0.0
[[/cell]]
[[cell style="padding: 10px; border: 1px solid white"]]
cell 0.0
[[/cell]]
[[/row]]
[[/table]]
Excel Concatenation Trick
One way of building a big table quickly is to use the Concatenate function in Excel, Open Office, Zoho, etc.
=concatenate("||",a1,"||",b1,"||")
=concatenate("||[[[",a1,"]]]||[[[",b1,"]]]||")
Pages with Tables
If you need a few more examples check out the tables in the pages below.
HTML Tables
You can also embed html tables into pages by placing HTML code between the [[HTML]] & [[/HTML]] tags or by uploading the code for a html table as a file and putting it in an iframe as shown below. (P.S. If you click on the buttons above the table, both the table and the code below it will change in interesting ways.)
Google Tables
It is also possible to generate cool tables using a combination of HTML & the Google API, e.g.
The code for the above table is:
<html>
<head>
<STYLE>
<!—
A{text-decoration:none}
—>
</STYLE>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Council');
data.addColumn('number', 'Population');
data.addColumn('boolean', 'LGAM Member');
data.addRows(4);
data.setCell(0, 0, 'Bundaberg Regional Council');
data.setCell(0, 1, 90000);
data.setCell(0, 2, true);
data.setCell(1, 0, 'Gympie Regional Council');
data.setCell(1, 1, 50000);
data.setCell(1, 2, true);
data.setCell(2, 0, 'Fraser Coast Regional Council');
data.setCell(2, 1, 100000);
data.setCell(2, 2, true);
data.setCell(3, 0, '<a href="http://www.lgam.info/north-burnett-regional-council">North Burnett Regional Council</a>');
data.setCell(3, 1, 15000);
data.setCell(3, 2, true);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {allowHtml: true});
}
</script>
</head>
<body>
<div id='table_div'></div>
</body>
</html>
Which is probably even easier than straight HTML.
The Style bit at the top kills link underlining.
| cell 0.0 |
Related Pages
Contributors
The following site members have contributed to this page: