Help:Tables
Tables are commonly used on LifeWiki:About to organize information into rows and columns. Although traditional HTML tags can be used to create a table (<table>, <tr>, <td>, etc.), the wiki software introduces a new set of table markup tags to simplify the process. This article focusses solely on these wiki table markup tags.
Introduction
A simple table looks like:
| First Column | Second Column |
|---|---|
| A cell | Another cell |
| More | ...and more |
The code used to produce this table is:
{| class="wikitable"
! First Column !! Second Column
|-
| A cell || Another cell
|-
| More || ...and more
|}
The basic parts used to construct tables (as shown in this example) are:
- {|: creates the start of the table. The first line, following the {| tag, is used to define the overall table.
- class="wikitable": part of the table definition, this class creates a table with a standard UESP appearance.
- ! and !!: provide the text for the column headers.
- |-: defines the start of a new row.
- | and ||: provide the text for individual cells in the table.
- |}: marks the end of the table.
Table Structure
Definition
All tables must start with {|. The {| tag must be placed at the start of a new line.
Following the {| tag it is possible to provide any options that you wish to apply to the overall table. Common types of options include the table class, positioning the table on the page, and default text alignment for all cells.
One common mistake is to forget to close the table with a |} tag. Although the wiki will try to fix the problem, the results are generally not what you want. If you find that parts of your table are showing up in strange places on the page, make sure that you have closed all of your tables.
Rows
To start a new row of the table, use |-. The |- tag must be placed at the start of a new line. The contents of the row are not provided on the same row.
The only text that can be added following the |- tag are parameters to change the formatting of the row. For example:
- |- style="text-align:left"
- This makes the text in this row left-aligned. "Left" can be replaced by "right" or "center" for right-aligned or center-aligned text, respectively. This option applies only to the one row and will override any other options specified by the table's class or in the table's definition. However, individual cells may override the general row formatting.
- |- valign="top"
- This makes all cells in the row be vertically "top-aligned" (i.e., the text in the cells starts at the very top of the cell).
Cells
Cells are generated either like this:
|cell1 |cell2 |cell3
or like this:
|cell1||cell2||cell3
The two types can be combined in various ways, e.g.
|cel11||cell2 |cell3
Any formatting options for the cell are supplied before the cell contents and separated from the contents using a | tag. Adding alignment options to the previous examples would be done as:
|style="text-align:left"|cell1 |style="text-align:center"|cell2 |style="text-align:left"|cell3
or
|style="text-align:left"|cell1 |style="text-align:center"|cell2 |style="text-align:left"|cell3
or
|style="text-align:left"|cell1 |style="text-align:center"|cell2 |style="text-align:left"|cell3
Header cells
Header cells are used to provide the column titles, and generally have bold text and a different background color for emphasis. They are specified similarly to standard #Cells, except ! or !! is used instead the opening | or ||. When formatting is being provided for a header cell, one ! and one | must be combined:
!style="text-align:left"|cell1
Header cells can be specified anywhere in a table (e.g., the fourth column in every row could be made into a "header" format, if desired).
Options
Classes
LifeWiki has some pre-defined classes that provide the tables on the site with a uniform appearance and allow editors to quickly and easily create tables without learning detailed table formatting commands. These classes are defined in the site's CSS files and can only be modified by the site's administrators.
The three common classes used to specify overall table layout are:
- class="wikitable": The standard table layout used for most data tables.
- class="hiddentable": For tables that are used solely for organizing information where no table borders, margins, or backgrounds are desired. In many cases, this format of table is possible simply by omitting the class option from the table definition. However, there are situations such as nested tables where the hiddentable class is necessary.
- class="toc": For manually-created tables of contents.
{| class="wikitable"
!Header 1!!Header 2
|-
|abcde||fghij
|-
|klmno||pqrst
|}
|
{| class="hiddentable"
!Header 1!!Header 2
|-
|abcde||fghij
|-
|klmno||pqrst
|}
|
{| class="toc"
!Header 1!!Header 2
|-
|abcde||fghij
|-
|klmno||pqrst
|}
| ||||||||||||||||||
|
|
|
Sortable Tables
Another class that can be added for extra table features is sortable. With this option, an icon is added to the header of each column; clicking on the icon causes the entire table to be sorted based upon the values in that column.
{| class="wikitable sortable"
!Name!!Value!!Price
|-
|Alpha||42||$500.00
|-
|Beta||27||$2000.00
|-
|Gamma||3||$10.00
|}
|
|
You can remove the sort icon from a column by giving the header the "unsortable" class, like so:
{| class="wikitable sortable"
!Name!!Value!!Price!!class=unsortable|Notes
|-
|Alpha||42||$500.00||Found under the bed
|-
|Beta||27||$2000.00||Hiding in the closet
|-
|Gamma||3||$10.00||Above the dresser
|}
|
|
You can also exclude a bottom row from sorting by giving it the "sortbottom" class:
{| class="wikitable sortable"
!Name!!Value!!Price
|-
|Alpha||42||$500.00
|-
|Beta||27||$2000.00
|-
|Gamma||3||$10.00
|-class="sortbottom"
|'''Totals:'''||'''72'''||'''$2510'''
|}
|
|
Keep in mind that only one row can be bottom-sorted in this way, and there is no way to top-sort a row.
External links
- Help:Sorting at WikiMedia.org
- Help:Table at WikiMedia.org
- Help:Table at Wikipedia
| ||||||||||||||