Sites

Home
Jova.se
Main
Umbraco
Wordpress

Navigation

Discuss (0) History

Tables

» Tables

The WikiMarkup used in ScrewTurn Wiki supports tables, using a well-known syntax. Inserting tables is simple, but you can also modify the appearance of the tables.

Table of Contents [Hide/Show]

1 - Basic Tables
2 - Advanced Options
3 - Table Appearance
4 - Merging Cells
5 - Alignment
6 - All Together

1 - Basic Tables

A simple table is composed by a sequence of rows, and each row contains some cells.

{|
| Cell 1.1
| Cell 1.2
|-
| Cell 2.1
| Cell 2.2
|}

will results in

Cell 1.1	Cell 1.2
Cell 2.1	Cell 2.2

Depending on the theme you are using, tables' appearance might differ.
The same results can be obtained using the form

{|
| Cell 1.1 || Cell 1.2
|-
| Cell 2.1 || Cell 2.2
|}

As you can see, a table starts with {| and ends with |}. A single pipe starts a cell of the table, while a pipe with a hyphen (|-) starts a new row in the table. A double pipe separates two or more cells in the same row.

2 - Advanced Options

A table can have a caption (or title). You can specify it using a pipe and plus, just after the opening tag.

{|
|+ This is a Table
| Cell 1.1 || Cell 1.2
|-
| Cell 2.1 || Cell 2.2
|}

produces

This is a Table
Cell 1.1	Cell 1.2
Cell 2.1	Cell 2.2

You can also use row and cell headers; they are identified with a exclamation mark.

{|
! Cells x.1 !! Cells x.2
|-
| Cell 1.1 || Cell 1.2
|-
| Cell 2.1 || Cell 2.2
|}

generates

Cells x.1	Cells x.2
Cell 1.1	Cell 1.2
Cell 2.1	Cell 2.2

You can use row headers as well.

{|
! X !! x.1 !! x.2
|-
! 1.x
| Cell 1.1 || Cell 1.2
|-
! 2.x
| Cell 2.1 || Cell 2.2
|}

generates

X	x.1	x.2
1.x	Cell 1.1	Cell 1.2
2.x	Cell 2.1	Cell 2.2

3 - Table Appearance

You can modify the appearance of a table (and each row or cell) using XHTML tags.

{| border="1" bgcolor="Gray"
| Cell 1.1 || Cell 1.2
|-
| Cell 2.1 || Cell 2.2
|}

generates

Cell 1.1	Cell 1.2
Cell 2.1	Cell 2.2

You can also modify the appearance of single rows. In this case, you can add a trailing row separator manually.

{| cellspacing="0" cellpadding="2" border="1"
|- style="background-color: Red; color: White;"
| Cell 1.1 || Cell 1.2
|- style="font-weight: bold;"
| Cell 2.1 || Cell 2.2
|}

results in

Cell 1.1	Cell 1.2
Cell 2.1	Cell 2.2

Even single cells can be styled.

{|
| bgcolor="Blue" | Styled Cell
| Normal cell
|-
| Normal cell
| bgcolor="Yellow" | Styled cell
|}

Styled Cell	Normal cell
Normal cell	Styled cell

4 - Merging Cells

You can use XHTML attributes to merge two or more cells (horizontally or vertically).
Note: not all the the browsers support this feature.

{|
| colspan="2" bgcolor="Red" | Cell
|-
| Cell || Cell
|}

generates

Cell
Cell	Cell

While

{|
| rowspan="2" bgcolor="Red" | Cell
| Cell
|-
| Cell
|}

results in

Cell	Cell
	Cell

5 - Alignment

You can align a table to the right or place it in the center of the page.

{| align="right" border="1"
| Cell || Cell
|}

produces

Cell

while

{| style="margin: 0px auto;" border="1"
| Cell || Cell
|}

results in

Cell

6 - All Together

{| cellspacing="0" cellpadding="2" style="background-color: #EEEEEE;"
|+ Styled Table
|- style="background-color: #990000; color: #FFFFFF;"
| This is a cell || This is a cell || This is a cell
|-
| style="background-color: #000000; color: #CCCCCC;" | Styled cell
| style="border: solid 1px #FF0000;" | Styled cell
| '''Normal cell'''
|-
| Normal || Normal || [Download]
|}

produces

Styled Table
This is a cell	This is a cell	This is a cell
Styled cell	Styled cell	Normal cell
Normal	Normal	Download