bannerbannerbannerbannerbanner
Jova wiki   tid   Login/Logout

RSS

Navigation





Quick Search
»
Advanced Search »

PoweredBy
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.


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.1Cell 1.2
Cell 2.1Cell 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.1Cells x.2
Cell 1.1Cell 1.2
Cell 2.1Cell 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

Xx.1x.2
1.xCell 1.1Cell 1.2
2.xCell 2.1Cell 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.1Cell 1.2
Cell 2.1Cell 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.1Cell 1.2
Cell 2.1Cell 2.2

Even single cells can be styled.

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

Styled CellNormal 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
CellCell

While

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

results in

CellCell
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

CellCell

while

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

results in

CellCell

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 cellThis is a cellThis is a cell
Styled cellStyled cellNormal cell
NormalNormalDownload

Jova wiki is © Jovall