Help:Tables

F-Zero Wiki's Help Guide

Basic Editing Getting Started Talk pages Protected pages Images Image sourcing Moving pages Redirects Tables Citing sources References Templates (List of formatting templates) Userboxes (Userbox list)

Guidelines and Policies User accounts Scope Quality standards Image deletion policy Featured articles Interwiki policy Copyrights Privacy policy

Advanced Editing HTML Custom signatures Merging pages Archiving talk pages Media Administrators' guide

Wiki Information Staff Users Affiliates About

Tables are a very useful tool for presenting data neatly. There are many different ways of using wikicode, HTML, and CSS, to achieve the desired appearance of the table, although in most situations, only the basics are required. Experiment in the Sandbox to get a feel for designing tables, and don't hesitate to ask for help where necessary.

Basic coding

Basic coding used in designing a table.

Code	Purpose
{|	Begins a table. Immediately after this, CSS coding (such as class="wikitable") to define the table's appearance should be written.
|+	Used between the table's start and first row to add a caption (which appears above the table, as above).
|-	Defines the end of a row, and the beginning of a new one. It may be omitted at the end of the final row.
!	Defines a heading. All text in this cell will be bolded, and centered, and the cell will be highlighted.
|	Defines a basic cell.
|}	Ends the table.

• Important: Each code must be placed at the beginning of a new line. However, an entire row may be placed on one line, by duplicating the code used to begin the row. This is explained further below.

Simple tables

A series of basic tables, and the required coding.

Description	Wikicode	Result
The most basic table, a 3x2 table with three headers.	{| class="wikitable" ! Header 1 ! Header 2 ! Header 3 |- | Cell 1 | Cell 2 | Cell 3 |}	Header 1 Header 2 Header 3 Cell 1 Cell 2 Cell 3
The same table, with an added caption.	{| class="wikitable" |+ A test table ! Header 1 ! Header 2 ! Header 3 |- | Cell 1 | Cell 2 | Cell 3 |}	A test table Header 1 Header 2 Header 3 Cell 1 Cell 2 Cell 3
The same table, with the wikicode contained on one line per row.	{| class="wikitable" ! Header 1 !! Header 2 !! Header 3 |- | Cell 1 || Cell 2 || Cell 3 |}	Header 1 Header 2 Header 3 Cell 1 Cell 2 Cell 3
An extended table, with randomly added header cells. Any cell can be designated as a "header" by using the ! mark. Note that this effect cannot be achieved with the wikicode contained on one line per row.	{| class="wikitable" | Header 1 ! Header 2 | Header 3 |- | Cell 1 | Cell 2 ! Cell 3 |- ! Cell A ! Cell B | Cell C |}	Header 1 Header 2 Header 3 Cell 1 Cell 2 Cell 3 Cell A Cell B Cell C

Adding HTML and CSS attributes to tables and cells

It's possible to use HTML and CSS to customize the appearance of the table, and even individual cells. To make these attributes take effect throughout the entire table, add them to the same line as the "wikitable" class. To change the attributes of a single row, add the code to the line beginning with the table row marker (|-). To change the attributes of a single cell, add the code after the pipe (|) at the beginning, and end the code with another pipe before adding the cell's content.

A table with the font color changed to red.

{| class="wikitable" style="color: red"
! Header 1 !! Header 2 !! Header 3
|-
| Cell 1 || Cell 2 || Cell 3
|}

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3

A table with one row's text centered.

{| class="wikitable"
| Normal || Normal || Normal
|- align=center
| Centred || Centred || Centred
|}

Normal	Normal	Normal
Centred	Centred	Centred

A table with Cell 2 italicised.

{| class="wikitable"
! Header 1
! Header 2
! Header 3
|-
| Cell 1
| style="font-style: italic" | Cell 2
| Cell 3
|}

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3

Another way of coding the above.

{| class="wikitable"
! Header 1 !! Header 2 !! Header 3
|-
| Cell 1 || style="font-style: italic" | Cell 2 || Cell 3
|}

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3

Left-aligning a caption, and coloring it blue.

{| class="wikitable"
|+ align=left style="color: blue" | Stylised caption
! Header 1 !! Header 2 !! Header 3
|-
| Cell 1 || Cell 2 || Cell 3
|}

Stylised caption

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3

colspan and rowspan: Irregular-sized cells

One cell can be made to span several rows or columns, by using the colspan and rowspan attributes. This has various useful applications. However, the fact that these attributes eliminate certain cells from other parts of the table's coding can significantly increase the overall complexity of the table. Using the Sandbox and the "Show preview" button to learn how these attributes affect a table's appearance is extremely helpful. The attributes accept a numerical value representing the number of rows or columns a single cell should span. This value should be no less than two, and no greater than the total number of rows or columns in the table. The attributes are added to a cell like a HTML or CSS attribute, as follows:

|colspan="2"|Cell content

An example of a table using colspan:

{| class="wikitable"
! Header 1 !! Header 2 !! Header 3
|-
|colspan="2"|Cell 1+Cell 2 || Cell 3
|}

Header 1	Header 2	Header 3
Cell 1+Cell 2		Cell 3

rowspan is more difficult to code:

{| class="wikitable"
!rowspan="2"|Header 1+Cell 1 !! Header 2 !! Header 3
|-
| Cell 2 || Cell 3
|}

Header 1+Cell 1	Header 2	Header 3
	Cell 2	Cell 3

Sortable tables

Sortable tables are useful in tables that contain information that may benefit from being quickly sortable, either alphabetically or numerically. To make a sortable table, change the "wikitable" class at the top of the table to "wikitable sortable". This class places sorting buttons in the table's top headings. Clicking these sorts the entire table according to that column's data. To remove the sort button from a single column, add the "unsortable" class to that column's header. If a column contains a mixture of alphabetical and numerical data, the data will be grouped into the two separate types before sorting. Note that sorting is generally incompatible with colspan and rowspan.

{| class="wikitable sortable"
! Numbers !! Letters !! Mix
|-
| 1 || B || 2
|-
| 3 || D || A
|-
| 2 || A || 3
|-
| 5 || C || B
|-
| 4 || E || 1
|}

Numbers	Letters	Mix
1	B	2
3	D	A
2	A	C
5	C	B
4	E	1

Preventing the "Mix" column from being sorted:

{| class="wikitable sortable"
! Numbers !! Letters !! class="unsortable" | Mix
|-
| 1 || B || 2
|-
| 3 || D || A
|-
| 2 || A || 3
|-
| 5 || C || B
|-
| 4 || E || 1
|}

Numbers	Letters	Mix
1	B	2
3	D	A
2	A	C
5	C	B
4	E	1

Cellpadding and cellspacing

The cellpadding attribute is used to define the number of pixels that should be between the cell walls and their content. The cellspacing attribute defines the thickness of the cell walls, in pixels. These attributes are not supported by the wikitable class; if you need to use them, use border="1" or similar instead (where the number indicates the thickness of the outside border, with a different appearance to cellspacing).

A simple table with cellpadding of 40px and a border of 7px.

{| border="7" cellpadding="40"
| Cell 1-1
| Cell 1-2
| Cell 1-3
|-
| Cell 2-1
| Cell 2-2
| Cell 2-3
|}

Cell 1-1	Cell 1-2	Cell 1-3
Cell 2-1	Cell 2-2	Cell 2-3

A simple table with cellspacing of 20px.

{| border="1" cellspacing="20"
| Cell 1-1
| Cell 1-2
| Cell 1-3
|-
| Cell 2-1
| Cell 2-2
| Cell 2-3
|}

Cell 1-1	Cell 1-2	Cell 1-3
Cell 2-1	Cell 2-2	Cell 2-3