Help:Tables
This article details the use of tables on Nookipedia. Item tables should be formatted using Template:TableTop and Template:TableFooter. All other tables should use the styled class to automatically generate formatting for the appearance of the table.
The code for certain tables is formatted and stored on a template page, and then this code is called using the proper template call. These templates can be found at Category:Table templates. Tables should only be stored as templates if they are intended to be adapted or transcluded on multiple pages.
Creating tables[edit]
All tables begin with {| and end with |}. For example:
| Wiki source | Rendered result | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class="wikitable" style="font-size:125%"
! Item
! Amount
! Cost
|-
| Bread
| x4
| 3.00
|-
| Butter
| x1
| 5.00
|- style="text-decoration:underline"
! Total
|
| style="font-weight:bold" | 8.00
|}
|
|
Each new line starts with the a pipe character | which creates a new cell. A line with with a pipe-dash |- creates a new row. Using ! instead of | to start a line creates bold, centered text. Note that these symbols will only generate a table if they are placed at the beginning of a line.
CSS can be used style tables, rows, and cells. An example can be seen in the above table where style="font-size:125%" is added after the opening table tag to style the entire table. style="text-decoration:underline" is added after a new row tag to style that specific row. A method to style an existing cell can be seen in the bottom right cell where the total of 15.00 is bolded by using the code style="font-weight:bold".
Item tables should be formatted using Template:TableTop and Template:TableFooter. All other tables should use the styled class to automatically generate formatting for the appearance of the table.
Appearance[edit]
Styling[edit]
Different colours can be automatically applied to styled tables by appending one of the below classes. The chosen color should ideally match the infobox and navbox color used on the page. It is acceptable to use different colors on pages with lots of tables, or different categories where having distinguishing colors may serve a practical purpose (e.g. Nook Miles or Shoes).
Genders[edit]
color-femalecolor-male
Colors[edit]
color-redcolor-orangecolor-yellowcolor-greencolor-aquacolor-bluecolor-purplecolor-pinkcolor-beigecolor-browncolor-graycolor-blackcolor-white
Themes[edit]
color-civiccolor-coolcolor-cutecolor-elegantcolor-harmoniouscolor-hipcolor-historicalcolor-moderncolor-naturalcolor-rusticcolor-sportycolor-genericcolor-special
Categories[edit]
color-artcolor-bugcolor-designcolor-eventcolor-fashioncolor-filmcolor-fishcolor-floracolor-fossilcolor-furniturecolor-gameplaycolor-geographycolor-imagecolor-islandercolor-itemcolor-locationcolor-mangacolor-merchandisecolor-minigamecolor-museumcolor-musiccolor-nookipediacolor-publicationcolor-reactioncolor-realworldcolor-seacreaturecolor-specialcolor-speciescolor-ssbcolor-systemcolor-seriescolor-toolscolor-towncolor-updatecolor-usercolor-villagercolor-seasoncolor-springcolor-summercolor-autumncolor-winter
Example[edit]
| Wiki source | Rendered result | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class="styled color-red" style="text-align: center;"
|-
! Header 1
! Header 2
! Header 3
|-
| This
| is
| an
|-
| example
| of
| a
|-
| red
| colored
| table
|}
|
|
Formatting[edit]
Only minimal custom formatting should be used on tables, in order to maintain a consistent appearance across the wiki. It is not necessary to format the appearance of a table to have rounded borders or white-colored cells when the styled class is used.
width and align attributes are deprecated should not be used. Instead these should be formatted like so:
style="margin: 0 auto; width: <number>%
Individual cells can be given their own distinct background color, but this should generally shouldn't be done without purpose (see example).
Example[edit]
 Acceptable
|
 Not acceptable
| ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Green colors are used to reflect the positive strength of each probability. | Colors are used without any clear purpose and don't help to convey or emphasize information. | ||||||||||||||||||||||||||||
|
|
Sorting data[edit]
A sort functionality can be added to a table using the sortable class. Some consideration should be made before making a table sortable, however. Also, individual columns can have sorting disabled using the unsortable class for that column's header.
- Data should be in a clear, singular format. Cells with multiple values are not practical for clear sorting of data and should be avoided.
- Consider splitting data into individual cells and expanding other cells using
rowspanandcolspanto group it.
- Consider splitting data into individual cells and expanding other cells using
- Cells with lots of text, such as descriptions, and cells with images should never be made sortable.
- Tables with only one valid column for sorting should not be made sortable, as there is only a single way to arrange data therefore making the sorting functionality practically useless.
Example[edit]
| Acceptable
|
Not acceptable
|
|---|---|
Data is clearly separated, columns unsuitable for sorting have been made unsortable.
|
Data that could be separated has been put together, columns are sortable even when this serves no practical use. |
Resources[edit]
- Editing Wikitext/Tables - Extensive guide to generating tables using wikitext.
- Help:Tables - Abbreviated guide to table creation.
| Nookipedia | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
