Help:Tables

From Nookipedia, the Animal Crossing wiki
Revision as of 20:42, May 2, 2022 by PanchamBro (talk | contribs) (→‎Resources: converting to interwiki links)

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

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
|}
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 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

Styling

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

  • color-female
  • color-male

Colors

  • color-red
  • color-orange
  • color-yellow
  • color-green
  • color-aqua
  • color-blue
  • color-purple
  • color-pink
  • color-beige
  • color-brown
  • color-gray
  • color-black
  • color-white

Themes

  • color-civic
  • color-cool
  • color-cute
  • color-elegant
  • color-harmonious
  • color-hip
  • color-historical
  • color-modern
  • color-natural
  • color-rustic
  • color-sporty
  • color-generic
  • color-special

Categories

  • color-art
  • color-bug
  • color-design
  • color-event
  • color-fashion
  • color-film
  • color-fish
  • color-flora
  • color-fossil
  • color-furniture
  • color-gameplay
  • color-geography
  • color-image
  • color-islander
  • color-item
  • color-location
  • color-manga
  • color-merchandise
  • color-minigame
  • color-museum
  • color-music
  • color-nookipedia
  • color-publication
  • color-reaction
  • color-realworld
  • color-seacreature
  • color-special
  • color-species
  • color-ssb
  • color-system
  • color-series
  • color-tools
  • color-town
  • color-update
  • color-user
  • color-villager
  • color-season
  • color-spring
  • color-summer
  • color-autumn
  • color-winter

Example

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
|}
Header 1 Header 2 Header 3
This is an
example of a
red colored table

Formatting

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

Checkmark.png Acceptable Crossmark.png 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.
Visitors Production chances
0 5%
1 25%
2 35%
3 50%
4 65%
5+ 80%
Visitors Production chances
0 5%
1 25%
2 35%
3 50%
4 65%
5+ 80%

Sorting data

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 rowspan and colspan to group it.
  • 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

Checkmark.png Acceptable Crossmark.png 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.
Name Gender Personality Description
Filbert Male Lazy Blue squirrel villager
Toby Male Smug Yellow rabbit villager
Vivian Female Snooty Beige wolf villager
Tangy Female Peppy Orange cat villager
Name Gender and personality Description
Filbert Male lazy Blue squirrel villager
Toby Male smug Yellow rabbit villager
Vivian Female snooty Beige wolf villager
Tangy Female peppy Orange cat villager

Resources