Help:Tables
Tables are commonly used on Starfield Wiki to organize information into 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. This article focuses solely on the wiki table markup tags.
Introduction[edit]
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 Starfield Wiki 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[edit]
Definition[edit]
All tables must start with:
{|
The {|
tag must be at the start of a new line.
Following the {|
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:
|}
Although the wiki will try to fix the problem, the results are generally not what you wanted. 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. This |}
tag must be at the start of a new line to be recognized.
Rows[edit]
To start a new row of the table use:
|-
The |-
tag must be 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. Two common usages follow.
|- style=text-align:left
- This would make this one row all contain left-aligned text. "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[edit]
Cells are generated either like this:
|cell1
|cell2
|cell3
or like this:
|cell1||cell2||cell3
The two types can be combined in various ways. For example:
|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[edit]
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 if desired. For example, the fourth column in every row could be made into a "header" format.
Captions[edit]
Captions are not generally used with Starfield Wiki tables. If you need to create one, however, use the tag:
|+ Caption
Options[edit]
Classes[edit]
Starfield Wiki has several predefined 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 classes used to specify overall table layout are:
class="wikitable"
: The standard table layout used for nearly every table on SFW.
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
|}
Header 1
Header 2
abcde
fghij
klmno
pqrst
Header 1
Header 2
abcde
fghij
klmno
pqrst
Header 1
Header 2
abcde
fghij
klmno
pqrst
Additional classes exist that can be used to provide other formatting details. These classes are designed to be used in conjunction with one of the basic layout classes. For example, class="wikitable vmid compress"
(note that the optional classes follow the primary "wikitable" class). The available options are:
centered
: Centers the table horizontally on the page.
compress
: Eliminates all padding and margins to create smaller tables.
firstleft
: First column is left-aligned, the rest of the table is center-aligned.
vmid
: Sets all cells in the table to have valign=middle (i.e., the content is all aligned vertically in the middle of the cell).
vtop
: Sets all cells in the table to have valign=top (i.e., the content is all aligned vertically at the top of the cell). This is the default setting for tables, and therefore generally does not need to be used.
Sortable Tables[edit]
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
|}
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. This example also adds the striped
option (see notes below):
{| class="wikitable sortable striped"
!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
|}
Name
Value
Price
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'''
|}
Name
Value
Price
Alpha
42
$500.00
Beta
27
$2000.00
Gamma
3
$10.00
Totals:
72
$2510.00
Keep in mind that only one row can be bottom-sorted in this way, and there is no way to top-sort a row.
Starfield Wiki's implementation of sortable tables is not the same as standard mediawiki sortable tables. Some additional features on SFW:
- Adding the class
striped
to the table in addition to sortable
will cause every other row to automatically have a light gray background. This striping is updated every time the table is sorted (demonstrated in the second demo table above).
- Row-spanning and column-spanning cells are supported in sortable tables.
- Rowspan groups of rows are always kept together as a fixed unit when sorting.
- The format of a column can be specified by setting the class of the first cell in the column. This is particularly useful if the column contains blank cells. Any cells that do not match the specified class are treated as blank. Possible classes are:
- sort_num: sort column numerically
- sort_date: sort column as a date
- sort_str: sort column as a string
- The column can be set to sort by default in descending order (with one click, instead of having to click twice for descending order). Do this by setting the class of the first cell in the column to:
- sort_desc: descending sort order
- Minor features:
- Clicking on a column three times reverts the entire table to its original layout.
- Line breaks (<br>) are automatically inserted before the sortable column icon.
- Several tweaks improve how dates and numbers are parsed.
Collapsible Tables[edit]
Sometimes a table becomes too large, or contains information that isn't always wanted on a page. In such cases, the table can be made collapsible. This places a link in the top right of the first column that allows the user to show or hide the contents of the table. Additionally, tables can be marked as collapsed, which causes the table to start in a hidden state.
{| class="wikitable collapsible"
!Name!!Value!!Price
|-
|Alpha||42||$500.00
|-
|Beta||27||$2000.00
|-
|Gamma||3||$10.00
|}
Name
Value
Price
Alpha
42
$500.00
Beta
27
$2000.00
Gamma
3
$10.00
{| class="wikitable collapsible collapsed"
!Name!!Value!!Price
|-
|Alpha||42||$500.00
|-
|Beta||27||$2000.00
|-
|Gamma||3||$10.00
|}
Name
Value
Price
Alpha
42
$500.00
Beta
27
$2000.00
Gamma
3
$10.00
Examples[edit]
Simple Example[edit]
{| class="wikitable"
| Cell 1, row 1
| Cell 2, row 1
|-
| Cell 1, row 2
| Cell 2, row 2
|}
Cell 1, row 1
Cell 2, row 1
Cell 1, row 2
Cell 2, row 2
Floating Table[edit]
{| class="wikitable" style="float:right;"
| Cell 1, row 1
|rowspan=2| Cell 2, row 1 (and 2)
| Cell 3, row 1
|-
| Cell 1, row 2
| Cell 3, row 2
|}
Cell 1, row 1
Cell 2, row 1 (and 2)
Cell 3, row 1
Cell 1, row 2
Cell 3, row 2
Note that this is a "floating" table; therefore, subsequent text will be displayed next to the table instead of after it.
Nested Table[edit]
{| class="wikitable"
| blabla
|
{| bgcolor=#ABCDEF border=2
|nested
|-
|table
|}
|the original table again
|}
blabla
nested
table
the original table again
Headers[edit]
{| class="wikitable"
!
! col Header 1
! ch 2
|-
! row header 1
| abc def ghi
| gchf ghh dfgh
|-
! RH 2
| gfbb gbgbds
| dfgsdsdg
|}
col Header 1
ch 2
row header 1
abc def ghi
gchf ghh dfgh
RH 2
gfbb gbgbds
dfgsdsdg
{| class="wikitable"
! !! col Header 1 !! ch 2
|-
! row header 1 || abc def ghi || gchf ghh dfgh
|-
! RH 2 || gfbb gbgbds || dfgsdsdg
|-
! RH 3 || ||
|}
col Header 1
ch 2
row header 1
abc def ghi
gchf ghh dfgh
RH 2
gfbb gbgbds
dfgsdsdg
RH 3
See Also[edit]