Table

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

header header header
cell-content cell-content cell-content
cell-content cell-content cell-content

Advanced Tables

cell 0.0 cell 0.0 cell 0.1 cell 0.1
cell 0.0 cell 0.0 cell 0.1

List

  • Aaaa
  • Bbbb
  • Cccc

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:

External Links & References

  1. Simple Javascript Table Example
  2. Google Search

Notes (Edit)

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License