Help:Tables

{{#vardefine: (/ | {| }} {{#vardefine: /) | |}  }}

table.prettytable th { padding: 1em; }

table.htable { border: 1px solid #426787; }

th.htable { background-color: #1d578b; }

.code, .result{ padding: 1em; }

code { border: 1px dashed #47b; font-size: 120%; }

pre { margin:0; }

Tables are great for organizing data and information in a user-friendly way. They can be made using XHTML, wiki coding or a combination of the two. This guide will mainly cover the wiki coding portion as the other has hundreds of great, publicly available tutorials on the Internet. The main advantage of wiki coding is that it tends to be much simpler than XHTML and easier to edit. However, it can occasionally be limited in functionality, making XHTML an important part of advanced tables.

Table Building Terms
Some characters cannot be used in certain situations, usually in complex templates. Some templates to use if such situations arise are as follows:  |  - Produces a pipe ( | )  |-  - Produces a piped hyphen ( |- )

View all workarounds here.

Basics
The most basic components of a table are the and  tags (hereon referred to as "table tags") and. The table tags begin and end the table, while the actual contents of the table are in cells initiated by a single pipe.

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * }

Note:
 * The cells are created horizontally, from left to right. This basic fact becomes important in more complex tables (see Colspan and Rowspan)
 * The table start tag is followed by  . This little bit of code produces the most commonly used table style. It should look good for most purposes.

To create a new row of cells, use

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * }

The cells in one row can be written on one single line, separated by.

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * }

You can also use wiki markup in tables. {| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * }

Table Header
Table headers can be created by using instead of. The text in a header is usually bolded and centered.

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * }

Table Caption
Table can be given captions by using

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * }

Table Attributes
Placing attributes directly after the table start tag applies the attributes to the entire table.

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * }

Cell Attributes
To apply attributes to an individual cell, write the table code in the following format:

or for a header:

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * }

Row Attributes
To apply attributes to an single row, write the attributes directly after

To modify the topmost row, type followed by the desired attributes on a line before creating any cells.

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * }

Stylization
These are some of the most commonly used table styles. Knowledge of XHTML greatly aids in this section. '''"#" indicates that a number must be placed between the quotation marks. The default unit is pixels, where appropriate.'''

Sortable Tables
For sortable tables, a key is sometimes required to determine the sorting possibilities. It can be used by typing the following:

The following: produces:
 * }

Colspan
Sometimes it is necessary to merge two cells together. If these cells are beside each other horizontally, the colspan attribute is used.

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * class="code" |
 * class="code" |


 * class="result" |


 * }

Rowspan
To merge two cells vertically, use the rowspan attribute.

In order to utilize this attribute properly, it is important to understand how tables are rendered. Once a cell is merged with the ones below it, the lower cells are "reserved".

For example, say that you merge all the cells in column 2 by placing some code in the topmost cell. When you create a new row and begin filling it with cells, you will only be able to create cells for columns 1, 3 and beyond, automatically skipping column 2.

In another example, say that you merge only the first two cells in column 2. In the first row, you use the "rowspan" attribute in column 2. In the second row, the cells automatically skip column 2, since that cell is "reserved". In the third row, you can once again create cells in column 2, since there are no reserved cells.

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * class="code" |
 * class="code" |


 * class="result" |


 * }

Mixed
Advanced layouts can be made by mixing the two attributes.

{| class="htable" ! class="htable" | Code ! class="htable" | Result
 * class="code" |
 * class="code" |


 * class="result" |


 * class="code" |
 * class="code" |


 * class="result" |


 * }