Help:Tables
This article details the use oftables on Nookipedia. Item tables should be formatted usingTemplate:TableTop andTemplate:TableFooter. All other tables should use thestyled class to automatically generate formatting for the appearance of the table.
The code for certain tables is formatted and stored on atemplate page, and then this code is called using the proper template call. These templates can be found atCategory: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 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{|! Item! Amount! Cost|-| Bread| x4| 3.00|-| Butter| x1| 5.00|-! Total|| | 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 wherestyle="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 codestyle="font-weight:bold".
Item tables should be formatted usingTemplate:TableTop andTemplate:TableFooter. All other tables should use thestyled class to automatically generate formatting for the appearance of the table.
Appearance[edit]
Styling[edit]
Different colours can be automatically applied tostyled tables by appending one of the below classes. The chosen color should ideally match theinfobox andnavbox 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 orShoes).
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 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| |-! 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 thestyled class is used.
width andalign 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]
| 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 thesortable class. Some consideration should be made before making a table sortable, however. Also, individual columns can have sorting disabled using theunsortable 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]
Data is clearly separated, columns unsuitable for sorting have been madeunsortable. | 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 | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||

