Help:Editing/Tables
 |
This guide is written for use with the Source Mode editor. If you have not already switched to the Source Mode editor you can find out how to here.
|
This guide covers more advanced things you can do with table layouts, as well as the classes you can apply to a table to alter its behavior. It assumes you have read Help:Editing/Source mode basics#Tables for basics on tables.
Extended syntax[edit source]
First, let us start off with a table like
{| class="wikitable"
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}
|
|
And we already know that:
{|opens a table|-starts a new line!is a header cell|is a normal cell|}closes a table
All of which must be at the start of a new line (excluding spaces at the start of the line).
If it wasn't already clear, tables can contain almost all normal wikitext.
Captions[edit source]
Table captions appear above the table, as a type of overall header. They are defined with the |+ caption. Adding this will count as a |-, but it is convention to put this above the first row so it is clearly caption.
{| class="wikitable"
|+ example caption here
! header 1 !! header 2 || header 3
|-
| row 1, cell 1 || row 1, cell 2 || row 1, cell 3
|-
| row 2, cell 1 || row 2, cell 2
| row 2, cell 3
|}
|
|
Colspan and rowspan[edit source]
Colspan and rowspan are attributes that make a cell span over multiple columns or rows (essentially like merging cells in a normal word processor or spreadsheet program). Mixing many colspans and rowspans is probably one of the more complicated things you can do with a basic table.
Colspan and rowspan are defined in the 'attribute area' of a cell. The previous examples don't use the attribute area, which is by default empty. It is accessed by adding another pipe to the cell definition - between the first and second pipe are attributes, and after the second pipe is the cell contents. (For header cells, between the ! and a pipe.)
That is,
{|
! header cell attributes | header cell contents 1
! header cell contents 2
|-
| cell attributes | cell contents 1
| cell contents 2
|}
When using colspan and rowspan, make sure to skip the cells you are spanning over. e.g. if you have three columns, and in one row a cell has a rowspan of 2, in the next row you only define 2 cells.
Two examples of colspan and rowspan in isolation:
{| class="wikitable"
|+ colspans
! header 1
! header 2
! header 3
|-
| colspan="2" | row 1, cell 1+2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}
|
| |||||||||
{| class="wikitable"
|+ rowspans
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| rowspan="2" | row 1+2, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 3
|}
|
| |||||||||
Here is a complex example with some column and row spans.
{| class="wikitable"
! header 1
! rowspan="3" | header 2 over 3 rows
! colspan="2" | header 3+4
|-
| rowspan="2" | row 1+2, cell 1
| row 1, cell 3
| row 1, cell 4
|-
| colspan="2" | row 2, cell 3+4
|-
| colspan="3" | row 3, cell 1+2+3
| row 3, cell 4
|}
|
| |||||||||||||
Styling[edit source]
All table elements - table, row, header, and cell - can have standard HTML attributes attached to them, particularly class, id, and style. The class attribute will be documented more later, see #Table classes. Here, we are mostly concerned with one-off styling, which is done via the style attribute.
In general, avoid using colour changes in the style attribute - use a class, so that the colours can gracefully change between light and dark mode. In-line styles should generally be limited to one-off alignment changes.
This example demonstrates the three places to put style attributes: in the table opener to apply to the entire table, in the row definition to apply to that row, or in the attribute area of a cell (or header cell) to apply to just that cell. The header cell is made a little wider to make the alignment changes noticeable.
{| class="wikitable" style="text-align:right;"
|+ align right except r2c2 and r3
! header 1 wider
! header 2 wider
! header 3 wider
|-
| r1c1
| r1c2
| r1c3
|-
| r2c1
| style="text-align:center;" | r2c2
| r2c3
|- style="text-align:left;"
| r3c1
| r3c2
| r3c3
|}
|
|
Nesting elements[edit source]
Tables can contain other wikitext, as mentioned before. Be aware that sometimes you will need to provide a new line to ensure the elements work correctly - this is particularly true for lists (* and #), and other tables.
{| class="wikitable"
! header 1
! header 2
! header 3
|-
| row 1, cell 1
|
{| class="wikitable"
|+ inner table
! h1
! h2
|-
| c1
| c2
|}
| row 1, cell 3
|-
| row 2, cell 1
|
* list
* list
* list
|
# enumerated list
# enumerated list
# enumerated list
# enumerated list
|}
|
|
In fact, every example on this page is actually a nested table! Check it out.
Table classes[edit source]
As tables are so central to effectively displaying information on the wiki, we have a large number of helper classes that can improve the functionality of tables. This section discusses most of the ones available for wide use.
In general classes can be combined, but each section below will mention what classes can and cannot be used together.
wikitable[edit source]
The most common class, wikitable applies a standard styling to a table. In general, unless you have a good reason to not want the styling, this should always be used. Wikitable is compatible with all other classes here.
All of the examples on this page use wikitable, so for comparison here is a table without wikitable.
{|
|+ table without wikitable
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}
|
|
Alignment[edit source]
It can be tedious to add style attributes to one cell in every row if you want to change the alignment of an entire column. Thus, we have the following classes to change alignment of entire columns:
align-right-xto align to the right of the cellalign-center-xto align to the center of the cellalign-left-xto align to the left of the cell (default, but will override a table- or row-wide style)
Where x is the index of the column (the leftmost column is index 1). This is currently supported up to and including index 13. Note that header cells do not count toward the column counter. Cell-specific styles will override this, if necessary.
Alignment classes are compatible with everything.
{| class="wikitable align-right-1 align-left-2 align-center-3"
|+ aligned table
! header 1 wider
! header 2 wider
! header 3 wider
|-
| r1c1
| r1c2
| r1c3
|-
| r2c1
| r2c2
| r2c3
|-
| r3c1
| r3c2
| r3c3
|}
|
|
Colour[edit source]
It is not a good idea to define colors in the table - it will probably look bad. Thus, we have predefined a number of class names.
Colors are compatible with everything except:
lighttable- colors override lighttable colors, not recommended to use together extensivelyalternating-x- colors override the alternating color{{N/A}}- N/A overrides colors
All of the supported colors are demonstrated in the following example:
{| class="wikitable"
|+ Colours
! Background classes
! Text classes
|-
| class="table-bg-red" | table-bg-red
| class="text-red" | text-red
|-
| class="table-bg-orange" | table-bg-orange
| class="text-orange" | text-orange
|-
| class="table-bg-yellow" | table-bg-yellow
| class="text-yellow" | text-yellow
|-
| class="table-bg-green" | table-bg-green
| class="text-green" | text-green
|-
| class="table-bg-blue" | table-bg-blue
| class="text-blue" | text-blue
|-
| class="table-bg-purple" | table-bg-purple
| class="text-purple" | text-purple
|-
| class="table-bg-pink" | table-bg-pink
| class="text-pink" | text-pink
|-
| class="table-bg-grey" | table-bg-grey
| class="text-grey" | text-grey
|}
|
|
Alternating[edit source]
The alternating-rows and alternating-cols classes make the table rows or columns alternate in background color each row, to make it easier to see in larger tables. Using both at once is generally not advised.
Alternating is compatible with everything except:
- lighttable - alternation overrides lighttable color, not recommended to use together
- Colors - colors override alternation
- N/A - N/A override alternation
{| class="wikitable alternating-rows"
|+ alternating rows
! header 1
! header 2
! header 3
|-
| r1c1
| r1c2
| r1c3
|-
| r2c1
| r2c2
| r2c3
|-
| r3c1
| r3c2
| r3c3
|-
| r4c1
| r4c2
| r4c3
|-
| r5c1
| r5c2
| r5c3
|-
| r6c1
| r6c2
| r6c3
|}
|
| ||||||||||||||||||||||||||||||||||||||||||
{| class="wikitable alternating-cols"
|+ alternating columns
! header 1
! header 2
! header 3
! header 4
! header 5
! header 6
|-
| r1c1
| r1c2
| r1c3
| r1c4
| r1c5
| r1c6
|-
| r2c1
| r2c2
| r2c3
| r2c4
| r2c5
| r2c6
|-
| r3c1
| r3c2
| r3c3
| r3c4
| r3c5
| r3c6
|}
|
| ||||||||||||||||||||||||||||||||||||||||||
{| class="wikitable alternating-cols alternating-rows"
|+ alternating both
! header 1
! header 2
! header 3
! header 4
! header 5
! header 6
|-
| r1c1
| r1c2
| r1c3
| r1c4
| r1c5
| r1c6
|-
| r2c1
| r2c2
| r2c3
| r2c4
| r2c5
| r2c6
|-
| r3c1
| r3c2
| r3c3
| r3c4
| r3c5
| r3c6
|-
| r4c1
| r4c2
| r4c3
| r4c4
| r4c5
| r4c6
|-
| r5c1
| r5c2
| r5c3
| r5c4
| r5c5
| r5c6
|-
| r6c1
| r6c2
| r6c3
| r6c4
| r6c5
| r6c6
|}
|
|
N/A[edit source]
N/A (not applicable) is a common thing to need to put in a table. The standard styling can be achieved by adding the table-na class to a cell, which handles all of the styling.
Alternatively, one can use {{NA}}. NA will apply the class and add the cell text - if you need other attributes (like colspan), put them before the template but without a pipe between attributes and the template. See Template:NA for additional documentation. In lua modules, one will need to manually construct the template by using the class and adding your own text.
NA is compatible with everything except:
- lighttable - N/A overrides lighttable colours, be careful when used together
- colours - N/A overrides colours
- alternating - N/A overrides alternation
- sortable - make sure to apply a relevant sort value (especially if the rest of the column is prices)
{| class="wikitable"
|+ NA
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| class="table-na" | N/A
| class="table-na" | row 1, cell 3
|-
| {{na}}
| colspan="2" {{na|other text}}
|}
|
| |||||||||
smalllistmargin[edit source]
smalllistmargin reduces the left margin applied to bulleted and numbered lists, significantly reducing the amount of indentation they have. This can make some wide tables much less wide.
{| class="wikitable"
|+ without smalllistmargin
! header 1
! header 2
|-
| row 1, cell 1
|
* bullet 1
* bullet 2
* bullet 3
|-
|
# enum 1
# enum 2
# enum 3
| row 2, cell 2
|}
|
| ||||||
{| class="wikitable smalllistmargin"
|+ with smalllistmargin
! header 1
! header 2
|-
| row 1, cell 1
|
* bullet 1
* bullet 2
* bullet 3
|-
|
# enum 1
# enum 2
# enum 3
| row 2, cell 2
|}
|
|
sortable[edit source]
Headers in sortable tables can be clicked to sort the table by that column. This is a common thing for data tables to use.
{| class="wikitable sortable"
|+ sortable table
! header 1
! header 2
|-
| 100
| 50
|-
| 50
| 10
|-
| 10
| 100
|}
|
|
Sortable has several configuration parameters:
- Adding the
data-sort-type="type"attribute to a header will attempt to force the sorter to parse the contents as that type, rather than letting it auto-detect the type. Supported types are: text, number, IPAddress, currency, url, isoDate, usLongDate, date, time. - Adding
data-sort-value="value"attribute to a cell will override the sort value for that cell with the specified value. This is commonly needed for calculators as formatting numbers with{{Coins}}often breaks sorting. To that end,{{CoinsSort}}was created for use in sortable table cells that require this attribute.- To modify the sort value after a page is loaded (i.e. via JavaScript), use
$(cell).data('sortValue', newValue)(i.e. modify the jQuery data for the cell). The attribute is only read once, when loading the sortable script, so modifying it later does nothing.
- To modify the sort value after a page is loaded (i.e. via JavaScript), use
- Adding
class="unsortable"to a header cell will exclude that column from being sortable. - Adding
class="expand-child"to a row definition will make that row always follow the row just above it. - Adding a header row to the bottom of the table will exclude that row from sorting (e.g. for a totals row). It can also be excluded by adding
class="sortbottom". - Only the bottom-most header row will have the sorter arrows applied - additional header rows above it will not.
- In general, colspans inside the table should be handled well. Rowspans inside the table will be split when first sorted. Col and rowspans in the headers may give strange results and should be avoided.
For full details, see Wikimedia Meta Help:Sorting. Here is an example with several of these configurations at once:
{| class="wikitable sortable"
|+ sortable table
! text
! number
! overridden number
! class="unsortable" | unsortable
|-
| a
| 50
| data-sort-value="1000" | ex1
| can't
|- class="expand-child"
| colspan="4" | following the above
|-
| b
| 10
| data-sort-value="100" | ex2
| sort
|-
| c
| 100
| data-sort-value="1" | ex3
| this
|-
| d
| 75
| data-sort-value="10" | ex4
| col
|-
! bottom
! of
! the
! table
|}
|
| ||||||||||||||||||||||||||||
autosort[edit source]
If you are using a sortable table, you may want it to be automatically sorted by one of the columns. For this, we have the autosort class. The class is defined inside the class attribute as autosort=x,d, where x is the index of the column to sort (the leftmost column is index 1), and d is the direction (a for ascending or d for descending).
Autosort requires the sortable class. It is compatible with everything.
You should find that the resulting table in this example is already sorted on header 2's column, even though it is out of order in the code.
{| class="wikitable sortable autosort=2,a"
|+ sortable table
! header 1
! header 2
|-
| 100
| 50
|-
| 50
| 10
|-
| 10
| 100
|}
|
|
lighttables[edit source]
Lighttables are tables where the rows or cells can be clicked to mark/unmark them. The mark status is stored in the browser's local storage and will persist until it is cleared.
Lighttable is not compatible with:
- Alternation - alternation overrides lighttable colours, not recommended to be used together
- Colors - colors override lighttable colors, avoid using together
- N/A - N/A overrides lighttable colors, be careful when using together
It notably is compatible with sortable (and autosort) tables, and will preserve the correct highlights over reloads, even when the table is sorted before clicking.
{| class="wikitable lighttable"
|+ alternating rows
! header 1
! header 2
! header 3
|-
| r1c1
| r1c2
| r1c3
|-
| r2c1
| r2c2
| r2c3
|-
| r3c1
| r3c2
| r3c3
|-
| r4c1
| r4c2
| r4c3
|-
| r5c1
| r5c2
| r5c3
|-
| r6c1
| r6c2
| r6c3
|}
|
|
To highlight individual cells, add class="individual" to the table class. A cell can be excluded from highlighting by adding class="nohighlight" to that cell.
{| class="wikitable lighttable individual"
|+ table
| r1c1
| r1c2
| r1c3
|-
| r2c1
| class="nohighlight" | not highlight-able
| r2c3
|-
| r3c1
| r3c2
| r3c3
|}
|
|
- Related
Checklists can be created with the checklist class in combination with lighttable, in a div element. This can be simplified by using {{Checklist}}.
<div class="lighttable checklist"> * bullet 1 * bullet 2 * bullet 3 </div> |
|
{{checklist|
* bullet 10
* bullet 20
* bullet 30
}}
|
|
mw-collapsible[edit source]
mw-collapsible makes the table collapsible. Collapsible tables have a clickable toggle that will hide or show the table.
mw-collapsible is compatible with everything.
{| class="wikitable mw-collapsible"
|+ collapsible table
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}
|
|
- Tables with a caption will keep the caption visible and add the button to the caption
- Tables without a caption will keep the first row visible and add the button to the last column of the first row
- Tables can be collapsed by default by adding the
mw-collapsedclass
{| class="wikitable mw-collapsible"
! no caption
! header 2
! header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}
|
| |||||||||
{| class="wikitable mw-collapsible mw-collapsed"
|+ collapsed by default
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}
|
|
Div elements can also be made collapsible, and have extra configuration options. See Manual:Collapsible elements for full details.
floatleft[edit source]
floatleft causes the table to be floated to the left of text.
{|class="wikitable floatleft"
! Header
! Header
|-
| Data
| Data
|-
| Data
| Data
|}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
floatright[edit source]
floatright causes the table to be floated to the right of text.
{|class="wikitable floatright"
! Header
! Header
|-
| Data
| Data
|-
| Data
| Data
|}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Alternative formats[edit source]
One line rows[edit source]
Tables can also be laid out with the rows on one line each. The cells are separated with || (!! or || for headers - the entire row starting with ! is a header). The newline method can also be used, as seen in row 2.
{| class="wikitable"
|+ caption
! header 1 !! header 2 || header 3
|-
| row 1, cell 1 || row 1, cell 2 || row 1, cell 3
|-
| row 2, cell 1 || row 2, cell 2
| row 2, cell 3
|}
|
|
The downsides of this are:
- It is generally harder to read long rows
- You will need to mix methods to have mixed headers and normal cells in one row (e.g. a header in the left column and normal cells in the other columns)
This method should generally be avoided as the multi-line rows are preferred, but is documented here as it is often in use on older articles.
HTML[edit source]
Tables can also be created with HTML tags.
This format generally should not be used on articles as it is, however it is the preferred method of creating tables in lua (via mw.html.create).
<table class="wikitable"> <caption>caption</caption> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> </tr><tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 2, cell 3</td> </tr> </table> |
|
See Also[edit source]
- Tesseract:Theme/Classes for available table cell classes
| Articles | |
|---|---|
| Images | |
| Advanced | |
| Community | |