Difference between revisions of "Help:Tables"

From Nookipedia, the Animal Crossing wiki
(Adding resources.)
m (Text replacement - "{{nookipedia}}" to "{{Navbox Nookipedia}}")
 
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{Help}}
 
{{Help}}
−
This article is all about using '''tables''' on '''Nookipedia'''. It will teach you how to create tables in various articles.
+
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.
  
−
==Creating Tables==
+
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.
−
To create a table you first need to begin with <code>{|</code> and end with <code>|}</code>. An example is below
 
  
−
{| style="width:50%" border="1"
+
==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%" | You type
+
! style="width:50%" | Wiki source
−
! style="width:50%" | You get
+
! style="width:50%" | Rendered result
 
|-
 
|-
−
|
+
| style="text-align:left;"|
 
<pre>
 
<pre>
−
{| style="font-size:15px"
+
{| class="wikitable" style="font-size:125%"
 
! Item
 
! Item
 
! Amount
 
! Amount
 
! Cost
 
! Cost
 
|-
 
|-
−
|Orange
+
| Bread
−
|10
+
| x4
−
|7.00
+
| 3.00
 
|-
 
|-
−
|Bread
+
| Butter
−
|4
+
| x1
−
|3.00
+
| 5.00
−
|-
 
−
|Butter
 
−
|1
 
−
|5.00
 
 
|- style="text-decoration:underline"
 
|- style="text-decoration:underline"
−
!Total
+
! Total
 
|
 
|
−
| style="font-weight:bold" | 15.00
+
| style="font-weight:bold" | 8.00
 
|}
 
|}
 
</pre>
 
</pre>
 
|
 
|
−
{| style="font-size:15px"
+
<div style="display:inline-block;">
 +
{| class="wikitable" style="font-size:125%"
 
! Item
 
! Item
 
! Amount
 
! Amount
 
! Cost
 
! Cost
 
|-
 
|-
−
|Orange
+
| Bread
−
|10
+
| x4
−
|7.00
+
| 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%
 
|-
 
|-
−
|Bread
 
 
|4
 
|4
−
|3.00
+
|style="background-color:#95ff95"|65%
 
|-
 
|-
−
|Butter
+
|5+
−
|1
+
|style="background-color:#7cff7c"|80%
−
|5.00
+
|}
−
|- style="text-decoration:underline"
+
</div>
−
! Total
 
 
|
 
|
−
| style="font-weight:bold" | 15.00
+
<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}}
  
−
As you can see, each new line starting with <code>|</code> creates a new cell and a line with <code>|-</code> creates a new row. Using <code>!</code> instead of <code>|</code> to start a line creates bold, centered text.
+
===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.
  
−
CSS can be used style tables, rows, and cells. An example can be seen in the above table where style="font-size:15px" is added after the opening table tag, and where style="text-decoration:underline" is added after a new row tag to style that specific row.  One method to style an existing cell can be seen in the bottom right cell where the total of 15.00 is bolded.
+
* 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==
 
==Resources==
−
*[http://en.wikibooks.org/wiki/Editing_Wikitext/Tables Editing Wikitext/Tables] - Extensive guide to generating tables using wikitext.
+
*[[wikibooks:Editing Wikitext/Tables|Editing Wikitext/Tables]] - Extensive guide to generating tables using wikitext.
−
*[http://www.mediawiki.org/wiki/Help:Tables Help:Tables] - Abbreviated guide to table creation.
+
*[[mw:Help:Tables|Help:Tables]] - Abbreviated guide to table creation.
 
<br clear=all>
 
<br clear=all>
−
{{nookipedia}}
+
{{Navbox Nookipedia}}
 
[[Category:Help]]
 
[[Category:Help]]

Latest revision as of 10:34, February 13, 2023

Help topics

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

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[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 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[edit]

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[edit]


Nookipedia
Main Main Page • Contents • About • General disclaimer • Nookipedia Tasks • Social media • Image Requests • Sandbox • Userboxes • Featured Articles • Featured Fanart • Golden Leaf Award • Maintenance • Resource Program • Stubs • Assets • Polls • April Fools' Nookipedia.png
Discussions The Roost • Proposals • Staff Noticeboard • Discord
Tech & Gadgets Nookipedia API • Development • Lua • AutoWikiBrowser • HotCat • Regular expressions
Policy General policy • Block policy • Deletion policy • Personal information • Privacy policy • Protection policy • Signature policy • Upload policy
Help pages Manual of Style • Intro to Wikitext • Getting started • Nookipedia Tasks • Citing sources • Categories • Images • Interwiki links • Tables • Templates • Two-factor authentication • Apply for staff
User Levels Users • Autoconfirmed users • Honored Members (retired) • Trustees • Lead Editors (retired) • Patrollers • Administrators • Bureaucrats • Directors • Bots • Interface administrators • Cargo Technicians
Projects Clean-Up • Database • Images • Interface • Items • Merchandise • Museum • Music • Pocket Camp • Town (Inactive) • Villager
Category
Retrieved from "https://nookipedia.com/w/index.php?title=Help:Tables&oldid=1091872"