User:Smurrayinchester/Tutorial/Tables
- This is just a beginners guide. For the technical details, see Help:Tables.
In Wikipedia, a table is a way of arranging data into rows and columns, such as those seen in spreadsheets. They provide an easy and effective way to arrange numbers, lists, pictures, timelines and all the other stuff that won't work in normal prose.
When do I use a table?
[edit]UserBob has just finished his article on Crimblehampstead United FC, a famous (but alas entirely ficticious) football club. The article currently has sections about History, Players, Cup Titles and Stadium, all which are currently nothing but text. He wants to know where he should use a table to arrange this data.
History - Text only
[edit]- "Crimblehampstead United was formed in 1898 by the joining of Crimble Orient and Hampstead Athletic. This allowed a cash strapped CUFC to buy it's now famous Walingtonington Park stadium..."
The History section is mainly long paragraphs of prose, split into subsections. This would make a poor table, as there is only one set of data: the text.
Players - Text and tables
[edit]- "Crimblehampstead has some of the best players in Rutland, many of whom earn in excess of £20 a year. The team plays 4-4-2, with Barry Scott as the team's goalkeeeper, while Neville Longbottom and Jimmy Wales fill the forward roles..."
The Players section likewise consists mainly of text, but the bottom of the section has a list of positions and the players that fill them. This section should remain mostly text, but the bottom of the page could be arranged into a simple table.
Cup Titles - List tables
[edit]- "1921 - Rutland Cup, 1925 - Rutland U25s Cup, 1931 - Rutland Cup, 1941 - Crimblehampstead Borough Champions..."
The Cup Titles section is just a long list of years, and should definitely be made into a table; this is clearer and easier to sort.
Stadium - Infobox
[edit]- "The stadium was built on Walingtonington Park in 1901, and the inaugural match was played on the 25 December 1901, as a part of the Crimbleside Christmas celebrations. The stadium has a capacity of 20,000, which is often reached during the more competitive home games..."
This section is trickier, as there is numbers data mixed in with the prose. As a result, an Infobox can be used. This is perhaps beyond the scope of this tutorial, but a tutorial on infoboxes is pending.
The code
[edit]Wikipedia supports two methods of table layout: <DIV> and {|Curly braces|}. This tutorial will focus on the more intuitive curly braces, but both method are similar.
Firstly, UserBob must rearrange the Cup data.
To start a table, type{|. This tells Wikipedia that all the following data refers to a table. Next, leave a line, and then type |-. This indicator tells Wikipedia that you are now typing a new line. Leave another line, and press |. The pipes shows the start of a new row. Type the cell contents, and then type ||. This starts another cell on the same row.
Using these processes, Bob writes:
- {|
- |-
- | Year || Cup
- |-
- | 1921 || Rutland Cup
- |-
- | 1925 || Rutland Under-25s Cup
- |-
- | 1931 || Rutland Cup
- |-
- | 1941 || Crimblehampstead Borough Champions
- |}
Producing:
| Year | Cup |
| 1921 | Rutland Cup |
| 1925 | Rutland Under-25s Cup |
| 1931 | Rutland Cup |
| 1941 | Crimblehampstead Borough Champions |
This is very basic, and hardly an improvement on the original! To make the text easier to read, the next step is to make the top row into a header row, by replacing | with !, like so:
- {|
- |-
- ! Year !! Cup
- |-
- | 1921 || Rutland Cup
- |-
- | 1925 || Rutland Under-25s Cup
- |-
- | 1931 || Rutland Cup
- |-
- | 1941 || Crimblehampstead Borough Champions
- |}
| Year | Cup |
|---|---|
| 1921 | Rutland Cup |
| 1925 | Rutland Under-25s Cup |
| 1931 | Rutland Cup |
| 1941 | Crimblehampstead Borough Champions |
To add a caption to the table, put |+, followed by the caption.
- {|
- |+ Cups Won
- |-
- ! Year !! Cup
- |-
- | 1921 || Rutland Cup
- |-
- | 1925 || Rutland Under-25s Cup
- |-
- | 1931 || Rutland Cup
- |-
- | 1941 || Crimblehampstead Borough Champions
- |}
| Year | Cup |
|---|---|
| 1921 | Rutland Cup |
| 1925 | Rutland Under-25s Cup |
| 1931 | Rutland Cup |
| 1941 | Crimblehampstead Borough Champions |
It's getting better, but it's still a bit ugly. Luckily, Bob knows a shortcut. The colours of tables can be changed to make the layout simpler, and the easiest way is to use class="wikitable". Wikitable is the Wikipedia standard table, and it's as easy as pie to use. Simply put class="wikitable" straight after the {|, and the table automatically reformats!
- {| class="wikitable"
- |+ Cups Won
- |-
- ! Year !! Cup
- |-
- | 1921 || Rutland Cup
- |-
- | 1925 || Rutland Under-25s Cup
- |-
- | 1931 || Rutland Cup
- |-
- | 1941 || Crimblehampstead Borough Champions
- |}
| Year | Cup |
|---|---|
| 1921 | Rutland Cup |
| 1925 | Rutland Under-25s Cup |
| 1931 | Rutland Cup |
| 1941 | Crimblehampstead Borough Champions |
Now that looks professional!
Summary
[edit]| Symbol | Meaning |
|---|---|
| {| | Start of table |
| |- | New line |
| | | First cell of new row |
| || | New cell |
| ! | Heading cell |
| !! | More heading cells |
| |} | End table |
| |+ | Caption |
Adding formatting with attributes
[edit]To add more advanced options, such as custom colours or sizes for your table, you'll need to add some simple HTML attributes.
HTML table attributes are relatively simple. The three important attributes needed for tables on Wikipedia are Align, Style and Width.
Following is a simple advice guide for these bits of code.
First is "Width".
Suppose UserBob considers his current table looks a bit narrow. Adding a Width parameter, defined by a percentage of the total page width, can improve the table and make it look much better:
- {| class="wikitable" width=70%
- |+ Cups Won
- |-
- ! Year !! Cup
- |-
- | 1921 || Rutland Cup
- |-
- | 1925 || Rutland Under-25s Cup
- |-
- | 1931 || Rutland Cup
- |-
- | 1941 || Crimblehampstead Borough Champions
- |}
| Year | Cup |
|---|---|
| 1921 | Rutland Cup |
| 1925 | Rutland Under-25s Cup |
| 1931 | Rutland Cup |
| 1941 | Crimblehampstead Borough Champions |
Of course, 70% is a bit drastic for such a narrow table; the space could be better filled by text or an image.
Individual columns can also be widened:
- {| class="wikitable"
- |+ Cups Won
- |-
- ! width=70% | Year !! Cup
- |-
- | 1921 || Rutland Cup
- |-
- | 1925 || Rutland Under-25s Cup
- |-
- | 1931 || Rutland Cup
- |-
- | 1941 || Crimblehampstead Borough Champions
- |}
| Year | Cup |
|---|---|
| 1921 | Rutland Cup |
| 1925 | Rutland Under-25s Cup |
| 1931 | Rutland Cup |
| 1941 | Crimblehampstead Borough Champions |
Yikes!
The table can also be moved around on the page with align. Align can have three options: Left, Right and Center (note that British English "Centre" will not work with the table).
| Year | Cup |
|---|---|
| 1921 | Rutland Cup |
| 1925 | Rutland Under-25s Cup |
| 1931 | Rutland Cup |
| 1941 | Crimblehampstead Borough Champions |
- {| class="wikitable" align="right"
- |+ Cups Won
- |-
- ! Year !! Cup
- |-
- | 1921 || Rutland Cup
- |-
- | 1925 || Rutland Under-25s Cup
- |-
- | 1931 || Rutland Cup
- |-
- | 1941 || Crimblehampstead Borough Champions
- |}
UserBob would now like to highlight the Rutland Cup entries on the table in a different colours, as these are considered the most important of all the tournaments in Rutland. As a result, he must now dive into the murky world of Style:
| Year | Cup |
|---|---|
| 1921 | Rutland Cup |
| 1925 | Rutland Under-25s Cup |
| 1931 | Rutland Cup |
| 1941 | Crimblehampstead Borough Champions |
- {| class="wikitable" align="right"
- |+ Colourful
- |-
- ! Year !! Cup
- |- style="background:#00DD77"
- | 1921 || Rutland Cup
- |-
- | 1925 || Rutland Under-25s Cup
- |- style="background:#00DD77"
- | 1931 || Rutland Cup
- |-
- | 1941 || style="background:#7700DD" | Crimblehampstead Borough Champions
- |}
Note that commands which change a Whole row go after the |- (the green ones), while those for a single cell go between the start || and an extra | (the blue ones). For more info on the funny "#7700DD" codes, see web colors, which explain these in great depth. Note that such hideously bright colours are not recommended for normal articles; if colour must be used, try one of the following:
| Reds | LightCoral | DarkSalmon | LightSalmon |
|---|---|---|---|
| Blues | PaleTurquoise | PowderBlue | LightBlue |
| Yellows/Browns | Cornsilk | Bisque | LemonChiffon |
| Greens | PaleGreen | DarkSeaGreen | MediumAquamarine |
| Purples | Plum | Thistle | Lavender |
| Off-Whites | Seashell | FloralWhite | Honeydew |
More help and advice can be found at Help:Tables.
[[Category:Wikipedia how-to]]