Difference between revisions of "Help:Tables"
GoalieGuy6 (talk | contribs) m |
PanchamBro (talk | contribs) m (Text replacement - "{{nookipedia}}" to "{{Navbox Nookipedia}}") |
||
(13 intermediate revisions by 9 users not shown) | |||
Line 1: | Line 1: | ||
− | This article | + | {{Help}} |
+ | 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 <code>styled</code> class to automatically generate formatting for the appearance of the table. | ||
− | == | + | The code for certain tables is formatted and stored on a [https://nookipedia.com/wiki/Special:PrefixIndex?prefix=&namespace=10 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. |
− | |||
− | {| style="width: | + | ==Creating tables== |
+ | All tables begin with <code>{|</code> and end with <code>|}</code>. For example: | ||
+ | |||
+ | {| class="styled color-nookipedia" style="width:100%; text-align:center;" | ||
|- | |- | ||
− | ! style="width:50%" | | + | ! style="width:50%" | Wiki source |
− | ! style="width:50%" | | + | ! style="width:50%" | Rendered result |
|- | |- | ||
− | | | + | | style="text-align:left;"| |
<pre> | <pre> | ||
− | {| style="font-size: | + | {| class="wikitable" style="font-size:125%" |
! Item | ! Item | ||
! Amount | ! Amount | ||
! Cost | ! Cost | ||
|- | |- | ||
− | | | + | | Bread |
− | | | + | | x4 |
− | | | + | | 3.00 |
|- | |- | ||
− | + | | Butter | |
− | + | | x1 | |
− | + | | 5.00 | |
− | |||
− | |Butter | ||
− | | | ||
− | |5.00 | ||
|- style="text-decoration:underline" | |- style="text-decoration:underline" | ||
− | !Total | + | ! Total |
| | | | ||
− | | | + | | style="font-weight:bold" | 8.00 |
|} | |} | ||
</pre> | </pre> | ||
| | | | ||
− | {| style="font-size: | + | <div style="display:inline-block;"> |
+ | {| class="wikitable" style="font-size:125%" | ||
! Item | ! Item | ||
! Amount | ! Amount | ||
! Cost | ! Cost | ||
|- | |- | ||
− | | | + | | Bread |
− | | | + | | x4 |
− | | | + | | 3.00 |
+ | |- | ||
+ | | Butter | ||
+ | | x1 | ||
+ | | 5.00 | ||
+ | |- style="text-decoration:underline" | ||
+ | ! Total | ||
+ | | | ||
+ | | style="font-weight:bold" | 8.00 | ||
+ | |}</div> | ||
+ | |} | ||
+ | |||
+ | Each new line starts with the a pipe character <code>|</code> which creates a new cell. A line with with a pipe-dash <code>|-</code> creates a new row. Using <code>!</code> instead of <code>|</code> 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 <code>style="font-size:125%"</code> is added after the opening table tag to style the entire table. <code>style="text-decoration:underline"</code> 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 <code>style="font-weight:bold"</code>. | ||
+ | |||
+ | Item tables should be formatted using [[Template:TableTop]] and [[Template:TableFooter]]. All other tables should use the <code>styled</code> class to automatically generate formatting for the appearance of the table. | ||
+ | |||
+ | ==Appearance== | ||
+ | ===Styling=== | ||
+ | Different colours can be automatically applied to <code>styled</code> tables by appending one of the below classes. The chosen color should ideally match the [[Template:Infobox|infobox]] and [[Template:Navbox|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==== | ||
+ | * <code>color-female</code> | ||
+ | * <code>color-male</code> | ||
+ | |||
+ | ====Colors==== | ||
+ | {{Columns-list|colwidth=300px| | ||
+ | * <code>color-red</code> | ||
+ | * <code>color-orange</code> | ||
+ | * <code>color-yellow</code> | ||
+ | * <code>color-green</code> | ||
+ | * <code>color-aqua</code> | ||
+ | * <code>color-blue</code> | ||
+ | * <code>color-purple</code> | ||
+ | * <code>color-pink</code> | ||
+ | * <code>color-beige</code> | ||
+ | * <code>color-brown</code> | ||
+ | * <code>color-gray</code> | ||
+ | * <code>color-black</code> | ||
+ | * <code>color-white</code> | ||
+ | }} | ||
+ | ====Themes==== | ||
+ | {{Columns-list|colwidth=300px| | ||
+ | * <code>color-civic</code> | ||
+ | * <code>color-cool</code> | ||
+ | * <code>color-cute</code> | ||
+ | * <code>color-elegant</code> | ||
+ | * <code>color-harmonious</code> | ||
+ | * <code>color-hip</code> | ||
+ | * <code>color-historical</code> | ||
+ | * <code>color-modern</code> | ||
+ | * <code>color-natural</code> | ||
+ | * <code>color-rustic</code> | ||
+ | * <code>color-sporty</code> | ||
+ | * <code>color-generic</code> | ||
+ | * <code>color-special</code> | ||
+ | }} | ||
+ | ====Categories==== | ||
+ | {{Columns-list|colwidth=300px| | ||
+ | * <code>color-art</code> | ||
+ | * <code>color-bug</code> | ||
+ | * <code>color-design</code> | ||
+ | * <code>color-event</code> | ||
+ | * <code>color-fashion</code> | ||
+ | * <code>color-film</code> | ||
+ | * <code>color-fish</code> | ||
+ | * <code>color-flora</code> | ||
+ | * <code>color-fossil</code> | ||
+ | * <code>color-furniture</code> | ||
+ | * <code>color-gameplay</code> | ||
+ | * <code>color-geography</code> | ||
+ | * <code>color-image</code> | ||
+ | * <code>color-islander</code> | ||
+ | * <code>color-item</code> | ||
+ | * <code>color-location</code> | ||
+ | * <code>color-manga</code> | ||
+ | * <code>color-merchandise</code> | ||
+ | * <code>color-minigame</code> | ||
+ | * <code>color-museum</code> | ||
+ | * <code>color-music</code> | ||
+ | * <code>color-nookipedia</code> | ||
+ | * <code>color-publication</code> | ||
+ | * <code>color-reaction</code> | ||
+ | * <code>color-realworld</code> | ||
+ | * <code>color-seacreature</code> | ||
+ | * <code>color-special</code> | ||
+ | * <code>color-species</code> | ||
+ | * <code>color-ssb</code> | ||
+ | * <code>color-system</code> | ||
+ | * <code>color-series</code> | ||
+ | * <code>color-tools</code> | ||
+ | * <code>color-town</code> | ||
+ | * <code>color-update</code> | ||
+ | * <code>color-user</code> | ||
+ | * <code>color-villager</code> | ||
+ | * <code>color-season</code> | ||
+ | * <code>color-spring</code> | ||
+ | * <code>color-summer</code> | ||
+ | * <code>color-autumn</code> | ||
+ | * <code>color-winter</code> | ||
+ | }} | ||
+ | |||
+ | ====Example==== | ||
+ | {| class="styled color-nookipedia" style="width:100%; text-align:center;" | ||
+ | |- | ||
+ | ! style="width:50%" | Wiki source | ||
+ | ! style="width:50%" | Rendered result | ||
+ | |- | ||
+ | | style="text-align:left;"| | ||
+ | <pre> | ||
+ | {| class="styled color-red" style="text-align: center;" | ||
+ | |- | ||
+ | ! Header 1 | ||
+ | ! Header 2 | ||
+ | ! Header 3 | ||
+ | |- | ||
+ | | This | ||
+ | | is | ||
+ | | an | ||
+ | |- | ||
+ | | example | ||
+ | | of | ||
+ | | a | ||
+ | |- | ||
+ | | red | ||
+ | | colored | ||
+ | | table | ||
+ | |} | ||
+ | </pre> | ||
+ | | | ||
+ | <div style="display:inline-block;"> | ||
+ | {| class="styled color-red" style="text-align: center;" | ||
+ | |- | ||
+ | !Header 1 | ||
+ | !Header 2 | ||
+ | !Header 3 | ||
+ | |- | ||
+ | | This | ||
+ | | is | ||
+ | | an | ||
+ | |- | ||
+ | | example | ||
+ | | of | ||
+ | | a | ||
+ | |- | ||
+ | | red | ||
+ | | colored | ||
+ | | table | ||
+ | |} | ||
+ | </div> | ||
+ | |} | ||
+ | {{Clear}} | ||
+ | ===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 <code>styled</code> class is used. | ||
+ | |||
+ | <code>width</code> and <code>align</code> attributes are deprecated should not be used. Instead these should be formatted like so: | ||
+ | <code>style="margin: 0 auto; width: <number>%</code> | ||
+ | |||
+ | Individual cells can be given their own distinct background color, but this should generally shouldn't be done without purpose (see example). | ||
+ | |||
+ | ====Example==== | ||
+ | {| class="styled color-nookipedia" style="width:100%; text-align:center;" | ||
+ | |- | ||
+ | ! style="width:50%" | [[File:Checkmark.png|20px|link=]] '''Acceptable''' | ||
+ | ! style="width:50%" | [[File:Crossmark.png|20px|link=]] '''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. | ||
+ | |- | ||
+ | | | ||
+ | <div style="display:inline-block;"> | ||
+ | {| class="styled color-flora" style="text-align: center; width: 100%;" | ||
+ | |- | ||
+ | ! Visitors | ||
+ | ! Production chances | ||
+ | |- | ||
+ | |0 | ||
+ | |style="background-color:#fafffa"|5% | ||
+ | |- | ||
+ | |1 | ||
+ | |style="background-color:#e0ffe0"|25% | ||
+ | |- | ||
+ | |2 | ||
+ | |style="background-color:#c7ffc7"|35% | ||
+ | |- | ||
+ | |3 | ||
+ | |style="background-color:#aeffae"|50% | ||
|- | |- | ||
− | |||
|4 | |4 | ||
− | | | + | |style="background-color:#95ff95"|65% |
|- | |- | ||
− | + | |5+ | |
− | + | |style="background-color:#7cff7c"|80% | |
− | |5 | + | |} |
− | | | + | </div> |
− | |||
| | | | ||
− | | | + | <div style="display:inline-block;"> |
+ | {| class="styled color-flora" style="text-align: center; width: 100%;" | ||
+ | |- | ||
+ | ! Visitors | ||
+ | ! Production chances | ||
+ | |- | ||
+ | |style="background-color:#c7ffc7"|0 | ||
+ | |5% | ||
+ | |- | ||
+ | |style="background-color:#c7ffc7"|1 | ||
+ | ||25% | ||
+ | |- | ||
+ | |2 | ||
+ | |style="background-color:#c7ffc7"|35% | ||
+ | |- | ||
+ | |3 | ||
+ | |50% | ||
+ | |- | ||
+ | |4 | ||
+ | |style="background-color:#95ff95"|65% | ||
+ | |- | ||
+ | |style="background-color:#7cff7c"|5+ | ||
+ | |80% | ||
|} | |} | ||
+ | </div> | ||
|} | |} | ||
+ | {{Clear}} | ||
− | + | ===Sorting data=== | |
+ | A sort functionality can be added to a table using the <code>sortable</code> class. Some consideration should be made before making a table sortable, however. Also, individual columns can have sorting disabled using the <code>unsortable</code> 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 <code>rowspan</code> and <code>colspan</code> 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==== | ||
+ | {| class="styled color-nookipedia" style="width:100%; text-align:center;" | ||
+ | |- | ||
+ | ! style="width:50%" | [[File:Checkmark.png|20px|link=]] '''Acceptable''' | ||
+ | ! style="width:50%" | [[File:Crossmark.png|20px|link=]] '''Not acceptable''' | ||
+ | |- | ||
+ | | Data is clearly separated, columns unsuitable for sorting have been made <code>unsortable</code>. | ||
+ | | Data that could be separated has been put together, columns are sortable even when this serves no practical use. | ||
+ | |- | ||
+ | | | ||
+ | <div style="display:inline-block;"> | ||
+ | {| class="styled sortable color-villager" style="text-align: center; width: 100%;" | ||
+ | |- | ||
+ | ! Name | ||
+ | ! Gender | ||
+ | ! Personality | ||
+ | ! class="unsortable" | 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 | ||
+ | |} | ||
+ | </div> | ||
+ | | | ||
+ | <div style="display:inline-block;"> | ||
+ | {| class="styled sortable color-villager" style="text-align: center; width: 100%;" | ||
+ | |- | ||
+ | ! 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 | ||
+ | |} | ||
+ | </div> | ||
+ | |} | ||
+ | {{Clear}} | ||
− | + | ==Resources== | |
+ | *[[wikibooks:Editing Wikitext/Tables|Editing Wikitext/Tables]] - Extensive guide to generating tables using wikitext. | ||
+ | *[[mw:Help:Tables|Help:Tables]] - Abbreviated guide to table creation. | ||
+ | <br clear=all> | ||
+ | {{Navbox Nookipedia}} | ||
+ | [[Category:Help]] |
Latest revision as of 10:34, February 13, 2023
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-female
color-male
Colors[edit]
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[edit]
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[edit]
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[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]
![]() |
![]() | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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
rowspan
andcolspan
to 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 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 | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|