Help:Tables

From Avon Lake Wiki
Jump to: navigation, search

Tables may be created in wiki pages. Generally, it is best to avoid using tables because table markup often complicates page editing.

Wiki table markup summary

{| table start, required
|+ table caption, optional; only between table start and table row
|- table row, optional on first row—wiki engine assumes the first row
! table header cell, optional.
| table data cell, optional.
|} table end, required
  • The above marks must start on a new line; however, blank spaces at the beginning of a line are ignored.
  • Content may (a) follow its cell mark on the same line after any optional XHTML attributes or (b) on lines below the cell mark. Content that uses wiki markup that itself needs to start on a new line, such as lists, headings, or nested tables, must be on its own new line.
    • Pipe character as content.

To insert a pipe (|) character into a table, use the | escaping markup or the {{!}} magic word.

Basics

The following table lacks borders and good spacing but shows the simplest wiki markup table structure.

You type You get
{|
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}
Orange Apple
Bread Pie
Butter Ice cream

If the text in the cell should contain a line break, use <br /> instead.

You type You get
{|
| Orange
| Apple
| more
|-
| Bread
| Pie
| more
|-
| Butter
| Ice<br />cream
| and<br />more
|}
Orange Apple more
Bread Pie more
Butter Ice
cream
and
more

Extra spaces within cells in the wiki markup, as in the wiki markup below, do not affect the actual table rendering.

You can have longer text or more complex wiki syntax inside table cells, too:

You type You get
{|
|Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, 
sed diam voluptua. 

At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet. 
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
Lorem ipsum dolor sit amet,

consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt

Table headers

Table headers can be created by using "!" (exclamation mark) instead of "|" (pipe symbol).

Headers usually show up bold and centered by default.

You type You get
{|
! Item
! Amount
! Cost
|-
| Orange
|10
|7.00
|-
| Bread
|4
|3.00
|-
| Butter
|1
|5.00
|-
! Total
|
|15.00
|}
Item Amount Cost
Orange 10 7.00
Bread 4 3.00
Butter 1 5.00
Total 15.00

Note: When using attributes as in the heading 'Item' a vertical bar '|' is used for separation, not an exclamation point '!'.

Caption

A table caption can be added to the top of any table as follows.

You type You get
{|
|+ Food complements
|-
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}
Food complements
Orange Apple
Bread Pie
Butter Ice cream

class="wikitable"

Basic styling (light gray background, borders, padding and align left) can be achieved by adding class="wikitable" after the table start tag ({|).

You type You get
{| class="wikitable"
|+ Food complements
|-
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}
Food complements
Orange Apple
Bread Pie
Butter Ice cream

HTML colspan and rowspan

You can use HTML colspan and rowspan attributes on cells for advanced layout.

You type You get
{| class="wikitable"
!colspan="6"| Shopping List
|-
|rowspan="2"| Bread & Butter
| Pie
| Buns
| Danish
|colspan="2"| Croissant
|-
| Cheese
|colspan="2"| Ice cream
| Butter
| Yogurt
|}
Shopping List
Bread & Butter Pie Buns Danish Croissant
Cheese Ice cream Butter Yogurt

XHTML attributes

You can add XHTML attributes to tables.

Attributes on tables

Placing attributes after the table start tag ({|) applies attributes to the entire table.

You type You get
{| class="wikitable" style="text-align: center; color: green;"
| Orange
| Apple
| 12,333.00
|-
| Bread
| Pie
| 500.00
|-
| Butter
| Ice cream
| 1.00
|}
Orange Apple 12,333.00
Bread Pie 500.00
Butter Ice cream 1.00

Attributes on cells

You can put attributes on individual cells by placing attributes after the table data cell tag (|) or the table header cell tag (!). For example, numbers may look better aligned right.

You type You get
{| class="wikitable"
| Orange
| Apple
| style="text-align:right;" | 12,333.00
|-
| Bread
| Pie
| style="text-align:right;" | 500.00
|-
| Butter
| Ice cream
| style="text-align:right;" | 1.00
|}
Orange Apple 12,333.00
Bread Pie 500.00
Butter Ice cream 1.00

To place attributes on individual rows, just put the attributes after the table row tag (|-).

Border styling

To define the styling of all four sides of a cell, place the attributes after the table start tag ({|) to format all cells in that table or after the table cell tag (| or !) to format that cell only. The order goes: border‑style border‑width border‑color

  • border-style defines the type of line used for the border
    • It can be solid, dotted, dashed, or double
  • border-width defines the width of the border
    • The value is specified in pixels. For example, 5px or 100px.
  • border-color defines the color of the border
    • The value can be a common color, such as red yellow, green, blue, or black
    • The value can also be a RGB color, such as #800000 for maroon.
You type You get
{|style="border-style: solid; border-width: 20px; border-color: blue"
| Hello
|}
Hello

With HTML attributes and CSS styles

CSS style attributes can be added with or without other HTML attributes.

You type You get
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}
Orange Apple
Bread Pie
Butter Ice cream

Attributes

Attributes can be added to the caption and headers as follows.

You type You get
Food complements
Orange Apple
Bread Pie
Butter Ice cream
Food complements
Orange Apple
Bread Pie
Butter Ice cream

Column width

Column width can be added as follows.

You type:

{| style="color: black; background-color: #ffffcc; width: 85%;"
| colspan="2" |  This column width is 85% of the screen width
|-
| style="width: 30%; background-color: white;"| '''This column is 30% counted from 85% of the screen width'''
| style="width: 70%; background-color: orange;"| '''This column is 70% counted from 85% of the screen width'''
|}


You get:

This column width is 85% of the screen width
This column is 30% counted from 85% of the screen width This column is 70% counted from 85% of the screen width

Alignment

Table alignment

Table alignment is achieved by using CSS. The table alignment is controlled by margins.

  • To align left, set margin‑left to a fixed number (amount you want to indent) and set margin‑right to auto.
  • To align right, set margin‑right to a fixed number (amount you want to indent) and set margin‑left to auto.
  • To align to the center, set both margin values to auto.

For example, a right-aligned table:

You type You get
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}
Orange Apple
Bread Pie
Butter Ice cream

And a center-aligned table:

You type You get
{| class="wikitable" style="margin: auto;"
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}
Orange Apple
Bread Pie
Butter Ice cream

Table floating around text

If you align a table to the right or the left side of the page, the text that comes after the table starts at the end of it, leaving an empty space around the table. You can make the text to be wrapped around the table by making the table to float around the text instead of just aligning it. This can be achieved using the float CSS attribute, which can specify where the table floats to the right side or to the left. When using float, margin attributes don't control table alignment but are used to specify the margin between the table and the surrounding text.

You type You get
{| class="wikitable" style="float:right; margin-left: 10px;"
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream 
|}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisl et est posuere pretium fermentum vitae sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce hendrerit tristique leo, non elementum mi tincidunt ut. Praesent egestas sapien et ullamcorper elementum. Ut nibh urna, ornare a arcu vitae, molestie porta lacus. Nullam non enim quam. Vivamus semper et arcu ac tempor. Donec lobortis gravida mi et faucibus. Aliquam erat volutpat. Donec viverra ac ligula sit amet imperdiet. Aliquam ac ante viverra, feugiat ex vitae, pharetra nisl. Orci varius natoque penatibus et magnis dis parturient montes.
Orange Apple
Bread Pie
Butter Ice cream

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisl et est posuere pretium fermentum vitae sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce hendrerit tristique leo, non elementum mi tincidunt ut. Praesent egestas sapien et ullamcorper elementum. Ut nibh urna, ornare a arcu vitae, molestie porta lacus. Nullam non enim quam. Vivamus semper et arcu ac tempor. Donec lobortis gravida mi et faucibus. Aliquam erat volutpat. Donec viverra ac ligula sit amet imperdiet. Aliquam ac ante viverra, feugiat ex vitae, pharetra nisl. Orci varius natoque penatibus et magnis dis parturient montes.

Cell contents alignment

The alignment of cell contents can be controlled with 2 different CSS properties: text-align and vertical-align.

text-align can be specified at the table, row or individual cells, while vertical-align only can be specified at individual rows or cells.

You type You get
{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}
A B C
D E F
G H I

Caveats

Negative numbers

If you start a cell on a new line with a negative number with a minus sign (or a parameter that evaluates to a negative number), your table can get broken, because the characters |- will be parsed as the wiki markup for table row, not table cell.
To avoid this, insert a space before the value (| -6).

CSS vs attributes

Table borders specified through CSS rather than the border attribute will render incorrectly in a small subset of text browsers (try to use wiki markup instead of CSS when possible).

See also