1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Check it out in the NAWCC Events forum:
    Talk about the upcoming National Meeting
    Preregistration is now closed.
    Visit the site for our New Member Walk In Deal.

Writing articles with tables

Basic principles

Tables are constructed using the [table]table description[/table] code. The table description consists of a number of lines which specify the general style of the table and each row in it. Each line begins with special code characters and can contain formatting information:

[table] general table style information
! description of row header(s) (line begins with an exclamation mark)
! description of row header(s)
...
|- start of new row marker
| description of cell(s) in row (line begins with a vertical bar or pipe)

| description of cell(s) in row
...
|- start of new row marker
| description of cell(s) in row
...
[/table]

A simple table

The simplest table has no table style information and no row headers. For example:
[table]
|-
|Waltham
|1850-1954
|40,000,000
|-
|Elgin
|1864-1950
|45,000,000
|-
|Hamilton
|1896-1960
|25,000,000
|-
|Howard
|1857-1920
|150,000
[/table]
This produces the following table (the dates and production are illustrative and not necessarily correct):

Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000

That does not look like a table. It is easy to add a header to such a simple table by adding another row at the top before the first row of data:
|-
|[b]Company[/b]
|Dates
|Production
The result is:
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000

The code for a table can be made more compact by putting more than one cell in a row on the same line. This is done by using “||” as a separator:
[table]
|-
|[b]Company[/b]||Dates||Production
|-
|Waltham||1850-1954||40,000,000
|-
|Elgin||1864-1950||45,000,000
|-
|Hamilton||1896-1960||25,000,000
|-
|Howard||1857-1920||150,000
[/table]
This produces the same table.

Adding borders

Adding a border around the table is simple; just change the first line to be:
[table] border="1"
Using the above table the result is:
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000

The number in the code border="number" controls the thickness of the outside line of the border.

Adding headers

A header row can be added to a table by using lines beginning with exclamation marks:
[table] border="6"
!Company!!Dates!!Production
|-
|Waltham||1850-1954||40,000,000
|-
|Elgin||1864-1950||45,000,000
|-
|Hamilton||1896-1960||25,000,000
|-
|Howard||1857-1920||150,000
[/table]
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000

Adding a caption

A caption can be added to a table by including the line |+caption.
[table] border="6"
|+Watch Company Production
!Company!!Dates!!Production
|-
|Waltham||1850-1954||40,000,000
|-
|Elgin||1864-1950||45,000,000
|-
|Hamilton||1896-1960||25,000,000
|-
|Howard||1857-1920||150,000
[/table]
Watch Company Production
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000

Table width

The width of the table can be specified by adding width="NN%" to the [table] code. For example, if the previous table has [table] width="60%" border="6" we get:

CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000
where the width of the table is 60% of the width of the window.

The width can also be specified as a fixed number of pixels, width="NNpx".

Using images

Small images can be used in tables:
[table] border="1"
!Symbol!!Name!!Meaning
|-
|[img]http://mb.nawcc.org/attachment.php?attachmentid=36810&stc=1[/img]
|Attribution
|You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
|-
|[​IMG]
|NoDerivs
|You may not alter, transform, or build upon this work.
|-
|[​IMG]
|NonCommercial
|You may not use this work for commercial purposes.
|-
|[​IMG]
|ShareAlike
|If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.
[/table]
SymbolNameMeaning
[​IMG]AttributionYou must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
[​IMG]NoDerivsYou may not alter, transform, or build upon this work.
[​IMG]NonCommercialYou may not use this work for commercial purposes.
[​IMG]ShareAlikeIf you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.

Table, row and cell parameters

Parameters which change appearance can be defined for the table as whole, individual rows or particular cells:
[table]table parameters
|+row parameters
|cell parameters|cell value
Just to confuse things, two different types of parameter can be used:
  • Normal message board and wiki codes. Some of these codes can be used in individual cell data, including [i], [b], [u], and [color]. Even [footnote] and can be used.
    However other codes do not work; in particular [plain][center] and [right].
  • Table codes of the form code="value".
    The value can be simple, as in border="6", or it can consist of name:value pairs separated by semi-colons, as in style="background:yellow; color:green"

List of parameters

The following table gives a partial list of these parameters.

At the moment there is no complete list of what does and does not work, so using these codes is a matter of trial and error.

codetypeapplies toactionnotes
align="value"parametertable, row, cellaligns the table, row values or cell values left, center or rightwhen applied to the table, the whole table is moved across the page
border="value"parametertablespecifies the width of the outside border of a tablevalue is nnpx pixels; nn=0, no border or lines between cells
cellpadding="value"parametertablespecifies the space between cell text and the bordervalue is nn pixels
cellspacing="value"parametertablespecifies the space between cellsvalue is nn pixels
colspan="value"parametercellmakes a cell span several columnsvalue is nn, the number of columns
rowspan="value"parametercellmakes a cell span several rowsvalue is nn, the number of rows
valign="top"parametercellmoves the cell text to the top of the cell
width="value"parametertable, cellspecifies the width of the table or of a columnvalue is nn% of window or nnpx pixels
style="parameter list"table, row, cellperforms one or more formatting operationsparameter list consists of parameter:value pairs separated by semi-colons
"background:color"style parametertable, row, cellsets the background color of cells
"border-collapse:collapse"style parametertableproduces very thin lines between cellsSimilar to cellspacing="0", but with thinner lines
"color:color"style parametertable, row, cellsets the color of text in cells
"height:value"style parameterrow, cellsets the height of cells in a rowvalue is nnpx pixels

Column width

Defining the width of a cell defines the width of the column and so there should be only one width paramter for each column. For example:
[table] width="60%" border="3"
!Company!!Dates!!Production
|-
|width="150px"|Waltham||width="100px"|1850-1954||40,000,000
|-
|Elgin||1864-1950||45,000,000
|-
|Hamilton||1896-1960||25,000,000
|-
|Howard||1857-1920||150,000
[/table]
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000
Note that the third column does not have a width specification; its width is what is left of the 60% of the window’s width and varies.

All columns can have a fixed width, in which case there is no need to specify the width of the table:
[table] border="1"
!Company!!Dates!!Production
|-
|width="150px"|Waltham||width="100px"|1850-1954||width="100px"|40,000,000
|-
|Elgin||1864-1950||45,000,000
|-
|Hamilton||1896-1960||25,000,000
|-
|Howard||1857-1920||150,000
[/table]
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000

Align (and footnote)

The align code can be used for individual cells in a table:
[table] border="1"
!Company!!Dates!!Production
|-
|width="150px"|Waltham
|width="100px" align="center"|1850-1954
|width="100px" align="right"|40,000,000
|-
|Elgin
|align="center"|1864-1950
|align="right"|45,000,000
|-
|Hamilton[footnote]Name sold to Swiss company[/footnote]
|align="center"|1896-1960
|align="right"|25,000,000
|-
|Howard
|align="center"|1857-1920
|align="right"|150,000
[/table]



CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton[1]1896-196025,000,000
Howard1857-1920150,000

  1. ^Name sold to Swiss company

The whole table can be aligned:
[table] border="1" align="right"
!Company!!Dates!!Production
|-
|width="150px"|Waltham||width="100px" align="center"|1850-1954||width="100px" align="right"|40,000,000
|-
|Elgin||align="center"|1864-1950||align="right"|45,000,000
|-
|Hamilton||align="center"|1896-1960||align="right"|25,000,000
|-
|Howard||align="center"|1857-1920||align="right"|150,000
[/table]
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000


This right aligned table acts like a right aligned image in that the following text is placed beside it.

Note that the headings are now centered even though the code does not specify this; it is presumably a bug in the system.




Aligning headings is a bit strange because the pipe | is used and not the exclamation mark ! as we would expect:
[table] border="1" width="50%"
!align="left"|Company
!align="center"|Dates
!align="right"|Production
[/table]
CompanyDatesProduction
Note: The system has a strange bug which occasionally causes it to insert an unwanted space. This can be seen if we try to compress the above table heading codes:
[table] border="1" width="50%"
!align="left"|Company!!align="center"|Dates!!align="right"|Production
[/table]
The space in al ign above is not in the text for this article; it has been inserted by the system. As a result the alignment is incorrect:
CompanyDatesProduction

Colors

[table] border="1" style="background:yellow; color:red"
!Company!!Dates!!Production
|-
|width="150px"|Waltham
|width="100px" align="center"|1850-1954
|width="100px" align="right"|40,000,000
|-
|Elgin
|align="center"|1864-1950
|align="right"|45,000,000
|-
|Hamilton
|align="center"|1896-1960
|align="right"|25,000,000
|-
|Howard
|align="center"|1857-1920
|align="right"|150,000
[/table]
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-196025,000,000
Howard1857-1920150,000

[table] border="1" style="background:yellow; color:red"
!Company!!Dates!!Production
|-
|width="150px"|Waltham
|width="100px" align="center"|1850-1954
|width="100px" align="right"|40,000,000
|-
|Elgin
|align="center" style="background:black; color:white"|1864-1950
|align="right"|45,000,000
|-
|Hamilton
|align="center"|1896-1960
|align="right"|25,000,000
|-
|Howard
|align="center"|1857-1920
|align="right"|150,000
[/table]

Height and valign

[table] border="1"
!Company!!Dates!!Production
|-
|width="150px"|Waltham
|width="100px" align="center"|1850-1954
|width="100px" align="right"|40,000,000
|-style="height:80px"
|Elgin
|align="center"|1864-1950
|align="right"|45,000,000
|-style="height:80px"
|valign="top"|Hamilton
|valign="top" align="center"|1896-1960 (these dates may not be correct)
|valign="top" align="right"|25,000,000
|-
|Howard
|align="center"|1857-1920
|align="right"|150,000
[/table]
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
Hamilton1896-1960 (these dates may not be correct)25,000,000
Howard1857-1920150,000

Colspan

Using colspan in a row reduces the number of elements in that row. So the description of the row has one or more fewer column specifications.
[table] border="1"
!Company!!Dates!!Production
|-
|width="150px"|Waltham
|width="100px" align="center"|1850-1954
|width="100px" align="right"|40,000,000
|-
|Elgin
|align="center"|1864-1950
|align="right"|45,000,000
|-
|Hamilton
|colspan="2" align="center"|No Data
|-
|Howard
|align="center"|1857-1920
|align="right"|150,000
[/table]
CompanyDatesProduction
Waltham1850-195440,000,000
Elgin1864-195045,000,000
HamiltonNo Data
Howard1857-1920150,000

Rowspan

[table] border="1"
!Company!!Dates!!Production
|-
|width="150px"|Boston
|width="100px" align="center" rowspan="2"|1850-1954
|width="100px" align="right" rowspan="2"|40,000,000
|-
|Waltham
|-
|Elgin
|align="center"|1864-1950
|align="right"|45,000,000
|-
|Hamilton
|colspan="2" align="center"|No Data
|-
|Howard
|align="center"|1857-1920
|align="right"|150,000
[/table]
CompanyDatesProduction
Boston1850-195440,000,000
Waltham
Elgin1864-195045,000,000
HamiltonNo Data
Howard1857-1920150,000
Categories: Category Tutorials

This page has been seen 2,172 times.

    • Created by
      Encyclopedia manager
      on
      Last updated by
      encyclopedia manager
      on
  • Contributors:

Current Discussion: Main discussion

  1. No comments have been posted for this discussion.