Help:Table: Difference between revisions
![]() RodRedlineM1 (talk | contribs) (Created page with "This is an introduction to '''tables,''' the most versatile invention since Tow Cap Hitch Protectors. No matter what size your needs, there's a table for you! Tables are your second-best friend for neatly displaying all kinds of things. The potential they offer is practically limitless, and you'll find them crammed into every possible corner of this wiki. Read on for a basic how-to in formatting, coding, and styling your very own table! ==Basic formatting== Tables...") |
![]() ChickenChaff (talk | contribs) |
||
Line 1: | Line 1: | ||
This is an introduction to '''tables,''' the most versatile invention since [[Tow Cap]] Hitch Protectors. No matter what size | This is an introduction to '''tables,''' the most versatile invention since [[Tow Cap]] Hitch Protectors. No matter what size you need, there's a table for you! | ||
Tables are your second-best friend for neatly displaying all kinds of things. The potential they offer is practically limitless, and you'll find them crammed into every possible corner of this wiki. Read on for a basic how-to in formatting, coding, and styling your very own table! | Tables are your second-best friend for neatly displaying all kinds of things. The potential they offer is practically limitless, and you'll find them crammed into every possible corner of this wiki. Read on for a basic how-to in formatting, coding, and styling your very own table! |
Revision as of 06:46, 7 November 2023
This is an introduction to tables, the most versatile invention since Tow Cap Hitch Protectors. No matter what size you need, there's a table for you!
Tables are your second-best friend for neatly displaying all kinds of things. The potential they offer is practically limitless, and you'll find them crammed into every possible corner of this wiki. Read on for a basic how-to in formatting, coding, and styling your very own table!
Basic formatting
Tables start and end with white curly brackets; in order to be recognized, they each must be the first two characters on their respective lines.
{| |}
The rest of the table code goes between them. Before we fill in the cells, it's useful to know that you can add a title by starting the second line with |+
.
{| |+ Name of My Table |}
Otherwise, your second line will be a |-
. This is what distinguishes the end and beginning of two consecutive rows.
Rows and columns are of course made up of cells, of which there are two different kinds. You can start a new line with !
or |
to create either...
! A title cell | Or a normal cell.
Any cell anywhere in a table can be assigned either value; if you're looking to make a two-way table, you would start the first cell after each break with !
, and all others on the same line with |
.
Usage
Now, what does it all look like together? Using a very basic example:
{| class="wikitable" |+ Name of My Table ! Header 1 ! Header 2 |- | Data 1 | Data 2 |- | Data 3 | Data 4 |}
Gives you...
Header 1 | Header 2 |
---|---|
Data 1 | Data 2 |
Data 3 | Data 4 |
Pretty cool, huh?
Styling
Once you have the basic skeleton in place, you'll most likely want to adjust the styling of your table. This may include changing the background color, border size, font type, or virtually anything you could want: It's done, appropriately enough, using the style=
attribute.
To apply styling to an entire table, you'll put it on the same line as the starting {|
.
{| class="wikitable" style="text-align:center" |+Name of My Table !Header 1 !Header 2 |- |Data 1 |Data 2 |}
However, each cell can also be styled individually. To do so, place it after the respective |
or !
.
{| class="wikitable" style="text-align:center" |+Name of My Table !Header 1 !Header 2 |- |Data 1 |style="text-align:right"|Data 2 |}
Header 1 | Header 2 |
---|---|
Data 1 | Data 2 |
What you designate there will take priority over what the overall table is telling the cell to do - as you can see from our sample output, the text in the Data 2 cell is aligned to the right, even though the table itself is center-aligned.
You also have the option to style an entire row at once. If you've picked up on the pattern, to do this you would place the style=
right after the line-break starting that row.
{| class="wikitable" style="text-align:center" |+ |Row 1 |Row 2 |- style="text-align:right" |}
Besides customizing your own style set, you can also choose from a handful of pre-made design classes using the class=
attribute. This is especially important to know here on Fandom, where when you don't specify a class, it is automatically given class="fandomtable"
when published. For most articles on our wiki, class="wikitable"
is often the go-to.
Examples
Here are a few example tables, drawing from some of the more common uses you'll encounter here. Below each output is a copy of its code.
Language | Name | Meaning |
---|---|---|
Ukrainian | Буст | Bust |
A very straightforward example, typically with 3 columns and a handful of rows.
{| class="wikitable" |- ! Language ! Name ! Meaning |- | Ukrainian | Буст | Bust |}
Col. # | Name | Series | Notes/variations | Model image | Packaging image |
---|---|---|---|---|---|
74 | Tank Coat Pitty | Race O Rama (2008-09) | – | ![]() |
![]() |
To accommodate the highly popular but dauntingly complex die-cast toy line, we commonly use tables to concisely document many variables at once.
{| class="wikitable" width="100%" style="text-align:center" |- ! style="width:5%" | Col. # ! style="width:15%" | Name ! style="width:20%" | Series ! style="width:40%" | Notes/variations ! style="width:10%" | Model image ! style="width:10%" | Packaging image |- | [[List of die-casts by collector number|74]] | [[Jerry Drivechain|Tank Coat Pitty]] | [[Race O Rama Series|Race O Rama]] <small>(2008-09)</small> | – | [[File:Tank coat pitty.jpg|100px]] | [[File:Tcp09.jpg|80px]] |}
Advanced
Here are a few advanced techniques that, when mastered, are highly rewarding!
- Sortable headers - Each column can be given sortable arrows by changing the table
class=
to includesortable
(i.e.class="wikitable sortable plainrowheaders"
). By default, that will apply it to all columns - To make one unsortable again, simply addclass="unsortable"
before the respective header cell. - Rowspan and colspan - These allow you to extend one specific cell over more than one row and/or column, like can be seen here. Crucially, after you specify this on a line, skip over that row/column (in the proceeding ones) the corresponding number of times.
See also
- Help:Table on Wikipedia
- Help:Tables on MediaWiki
Help pages |
---|
Account |
Account services • Notifications • Preferences • Profile |
Editing |
Basic editing • Manual of Style Categories • Citations • Images • Links • Redirects • Tables • Cargo |
Writing |
Writing tips |
Directory... |