StrategyWiki:Guide/Advanced tables

If you want to make more advanced tables, a full understanding of the options in the {{prettytable}} template, and a little HTML and CSS knowledge is necessary. Tables should be authored in wiki pages using wikicode formatting to define the table, with styles and other attributes added as necessary.

A good general rule of thumb is to avoid using a table unless you need to. Table markup often complicates page editing.

Wiki table markup summary[edit source]

• The above marks must start on a new line except the double || and !! for optionally adding consecutive cells to a line.
• XHTML attributes. Each mark, except table end, optionally accepts one or more XHTML attributes. Attributes must be on the same line as the mark. Separate attributes from each other with a single space.
  • Cells and caption (| or ||, ! or !!, and |+) hold content. So separate any attributes from content with a single pipe (|). Cell content may follow on same line or on following lines.
  • Table and row marks ({| and |-) do not directly hold content. Do not add pipe (|) after their optional attributes. If you erroneously add a pipe after attributes for the table mark or row mark the parser will delete it and your final attribute if it was touching the erroneous pipe!
• Content may (a) follow its cell mark on the same line after any optional XHTML attributes or (b) on lines below the cell mark. Content that uses wiki markup that itself needs to start on a new line, such as lists or nested tables, must of course be on its own new line.

Wiki markup[edit source]

The following table uses the standard {{prettytable}} template and no captions.

{| {{prettytable}}
! Header Cell 1
! Header Cell 2
|-
| Cell 1-1
| Cell 1-2
|-
| Cell 2-1
| Cell 2-2
|-
| Cell 3-1
| Cell 3-2
|}

For more table-ish looking wiki markup, cells can be listed on one line separated by double pipes (||) or double exclamation marks (!!). This does not scale well for longer cell content such as paragraphs. It works well for short bits of content however, such as this example table. Extra spaces within cells in the wiki markup can be added, as have been added in the wiki markup below, to make the wiki markup itself look better, but they do not effect the actual table rendering.

HTML attributes can be added to this table following the examples in other tables on this page but have been left out of the following example for simplicity.

{| {{prettytable}}
! Header Cell 1 !! Header Cell 2 !! Header Cell 3
|-
|   Cell 1-1    ||    Cell 1-2   ||   Cell 1-3
|-
|   Cell 2-1    ||    Cell 2-2   ||   Cell 2-3
|-
|   Cell 3-1    ||    Cell 3-2   ||   Cell 3-3
|}

Table alignment[edit source]

Tables default to block elements on the left side of the page, meaning text will stop at a table and continue below it instead of wrapping around. Using the float=left and float=right parameters in the {{prettytable}} template, you can move a table to the left or right side of the page and allow other contents to flow around it. Floating a table automatically collapses the size, meaning the table will attempt to be as small as it can without breaking its cell contents into multiple lines. If the content is small, as in the above examples, the tables won't be full width across the page.

Along with left and right floats, you can also add CSS to the style= parameter to make the table centered on the page. Unless the notwide=1 parameter is also set, making the table collapse to its narrowest size, the table will be full width and centering it will have no effect (essentially is is centered, albeit with no margins no either side).

{| {{prettytable|float=left}}
! Float left
|-
| table contents
|}

Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left. Table floating left.

{| {{prettytable|float=right}}
! Float right
|-
| table contents
|}

Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right. Table floating right.

Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered.

{| {{prettytable|notwide=1|style=margin:auto}}
! Centered
|-
| table contents
|}

Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered. Table centered.

Table sorting[edit source]

Using JavaScript, a sorting icon can be added to a table's header row which will dynamically rewrite the table to move the rows in alphabetic order of the column being sorted on. To make a table sortable, simply add the sortable=1 parameter to the {{prettytable}} template. This adds the "sortable" class to the table, which, along with a header row, is what the JavaScript is looking for.

Sometimes it is necessary to suppress sorting for some columns, where it would either have no effect, or would add no benefit. An example of a column by which you cannot sort is one consisting solely of images. The sorting works mainly on rendered text, so images aren't sorted, even by their alternate text. The only way to get around this, is by putting text somewhere else in the cell, which may or may not be desired. To stop a column from being sorted, the "unsortable" class must be added. Use class="unsortable" to accomplish this.

Below is an example of a sortable table with its middle column set to unsortable. For more information on methods for adding attributes to cells, see the Cell attributes section. Note that if you are using rowspan or colspan attributes in your table, sorting will most likely not work.

{| {{prettytable|class=sortable}}
! Header Cell 1 !!class="unsortable"| Header Cell 2 !! Header Cell 3
|-
| 1 || One || Uno
|-
| 2 || Two || Dos
|-
| 3 || Three || Tres
|-
| 4 || Four || Quatro
|-
| 5 || Five || Cinco
|}

Table attributes[edit source]

Table attributes affect the whole table, and some of them are in turn picked up by the caption, rows and cells within the table. Setting the "color" style, which changes the font color, will change the color for all text within the cell. Setting the "width", will only affect the table's width, except for the obvious affect that shrinking or enlarging a table would have on the contents within. (Setting the table width to 50% doesn't change cell widths, except that they now take up whatever width they're set at of a smaller table.)

All table attributes can be set through the style= parameter of the {{prettytable}} template, and should be except in rare circumstances. The following examples show setting a table's width both inside and outside the {{prettytable}} template. Note that outside the template, you must surround the value of the attribute with double quotes (") and if you are modifying a style set in the template, you need to put it after the template, as styles are set in order.

{| {{prettytable}} style="width:50%"
! Header Cell 1 !! Header Cell 2 !! Header Cell 3
|-
| Cell 1-1 || Cell 1-2 || Cell 1-3
|-
| Cell 2-1 || Cell 2-2 || Cell 2-3
|}

{| {{prettytable|style=width:50%}}
! Header Cell 1 !! Header Cell 2 !! Header Cell 3
|-
| Cell 1-1 || Cell 1-2 || Cell 1-3
|-
| Cell 2-1 || Cell 2-2 || Cell 2-3
|}

Row attributes[edit source]

You can put attributes on individual rows to affect all cells in the row. In general, the options in {{prettytable}} along with proper use of header and normal cells should be enough to distinguish information. However, sometimes it may be necessary to set a row apart from the others in a different way, such as to denote optional content or something of importance. To affect the entire row, you'll want to use the style attribute, but unlike in the {{prettytable}} template, you'll need to surround the styles with double quotes ("). The examples below are intended to show the method for modifying a row's styles through use of the style attribute, but knowing which styles to use and how to use them is outside of this page's scope.

Note that multiple styles can be set for a single row, although only one per row is used here. Also, the first "table row" markup (|-) is optional.

{| {{prettytable}}
|-
! Normal row
| Cell 1-1 || Cell 1-2 || Cell 1-3
|- style="font-style:italic"
! Italicized row
| Cell 2-1 || Cell 2-2 || Cell 2-3
|- style="font-color:red"
! Red font row
| Cell 3-1 || Cell 3-2 || Cell 3-3
|}

Cell attributes[edit source]

Cell attributes go between the pipe or pipes starting the cell and an ending pipe showing the end of the attribute declarations. You can use the cell attributes to modify the structure inside the table as well as the style of an individual cell. StrategyWiki has certain cell formatting templates for common cell markup. These templates insert the closing pipe after themselves, so any other modifications to cell attributes you are making need to go before them.

The following example shows how to use cell attributes with and without the templates. These are to show the structure for modifying cell styles, and is not meant to be a comprehensive list of every style that can be applied to a cell. Note that attribute values must be surrounded by double quote ("), unlike in the style= parameter of the {{prettytable}} template.

{| {{prettytable}}
! Header cell 1 !! Header Cell 2 !! Header Cell 3
|-
| {{n/a}} || {{n/a}} || Cell 1-3
|-
|style="color:red"| Cell 2-1 ||style="color:red"| Cell 2-2 || Cell 2-3
|-
|style="color:red" {{n/a}} ||style="color:red" {{n/a}} || Cell 3-3
|}

Header and normal cells[edit source]

A table without a header row or column is either a list, or confusing to anyone looking at it. In the former case, wiki markup for lists should be used (* or #). The header cell lets readers know what the cells below or to the side of it all have in common. For instance, if there is a table for character stat comparisons, the "Character" header cell in the header row tells someone that all normal cells below it are character names, while the "Strength" header cell let's them know that column is each character's strength. This is a simple and intuitive system that makes tables very useful for displaying a lot of comparable data.

The difference between making a header or normal cell is using either the ! or | markup, respectively. For rows in which all cells are put on the same row, the starting cell is the only one that matters for rendering purposes. That means if you want the first cell in a row to be a header cell, but not the others, you have to put the normal cells on their own line, because using || on the same line has the same effect as using !!. Likewise if you want to start a row with a normal cell and then make the next ones headers (not recommended), trying to use !! will break the table. The {{prettytable}} template ensures that header cells get additional styling, which includes centering and bolding the text, as well as making the background color slightly darker. Always use the standard markup for header cells rather than creating your own. Below is an example of a header row, a header column and the unintended consequence of mixing up the markup in a table.

{| {{prettytable}}
! Header Cell 1 !! Header Cell 2 !! Header Cell 3
|-
| Normal cell 1-1 || Normal cell 1-2 || Normal cell 1-3
|}

{| {{prettytable}}
! Header Cell 1
| Normal cell 1-1 || Normal cell 1-2
|-
! Header Cell 2
| Normal cell 2-1 || Normal cell 2-2
|}

{| {{prettytable}}
! Header Cell 1 || Normal cell 1-2 || Normal cell 1-3
|-
| Normal cell 2-1 !! Header Cell 2 !! Header Cell 3
|}

rowspan and colspan[edit source]

These special attributes change the structure of the table. Using these, a single cell can span multiple rows, columns or both. Another way to think of it, is merging cells together, as on a spreadsheet. The purpose of spanning rows or columns varies, but it can be quite useful in certain circumstances. Keep in mind that using these attributes significantly increases the complexity of the table, so other editors, or even yourself later on, may be confused on how to properly edit it. Properly using rowspan and colspan means carefully analyzing how the table is put together. Also note that spanning any cells will render sortable tables inoperable in most cases.

The rowspan property makes a cell cover more rows than the one it starts on, effectively lengthening it. The colspan property on the other hand makes a cell cover more columns than the one it starts on, effectively widening it. They both accept as values a number that can be no greater the number of rows or cells in the table, and should be more than 1 (it's already spanning its own row and column). The number includes its own row or column, so to have a cell take up two spaces in a row, you would use colspan="2". That tells the table to render no cell divider between that cell and the cell to its immediate right, and to spread any content for that cell out across the width of both columns.

Because you are effectively reducing the number of cells in the table when using these attributes, it effects how the rest of the table is laid out. Spanning columns is easier to conceptualize, as you just count the colspan cell as however many cell it's spanning, then add the rest. The rowspan property may be more confusing, because it affects a different line of wiki markup. In the case of rowspan, you'll need to omit a cell from each row below that the cell is spanning. Tables with multiple cells spanning multiple columns and rows can quickly get very complicated, so use these attributes with caution. Below are examples of each property in use to better illustrate how they work.

{| {{prettytable}}
! Header Cell 1 !! Header Cell 2 !! Header Cell 3
|-
|colspan="2"| Cell spanning 1-1 and 1-2 || Cell 1-3
|-
| Cell 2-1 || Cell 2-2 || Cell 2-3
|}

{| {{prettytable}}
! Header Cell 1 !! Header Cell 2 !! Header Cell 3
|-
|rowspan="2"| Cell spanning 1-1 and 2-1 || Cell 1-2 || Cell 1-3
|-
| Cell 2-2 || Cell 2-3
|}

Caption[edit source]

A table caption can be added to the top of any table as follows:

{| {{prettytable}}
|+ Table caption
|-
! Header Cell 1 !! Header Cell 2 !! Header Cell 3
|-
| Cell 1-1 || Cell 1-2 || Cell 1-3
|}

Attributes can be added to the caption as follows:

{| {{prettytable}}
|+ align="bottom" style="color:red"| Table caption
|-
! Header Cell 1 !! Header Cell 2 !! Header Cell 3
|-
| Cell 1-1 || Cell 1-2 || Cell 1-3
|}