Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

Tables - ScrewTurn Wiki

RSS
Modified on Fri, Oct 24, 2008, 9:53 PM by Administrator Categorized as ScrewTurn Wiki
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.1Cell 1.2
Cell 2.1Cell 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 cellStyled 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

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.