Help:Tables

Tables are commonly used to organize information and anyone who has spent time working with HTML to any degree will be well aware (perhaps painfully so) of their flexibility and limitations. This page will provide an overview of using tables on Lotro-Wiki, with plenty of examples to get you started building them quickly and easily. A future article will focus on the more in-depth topics of customizing table styles.

Tables in HTML and MediaWiki

In the Hypertext Markup Language of the World Wide Web, tables are created on a webpage through the use of opening and closing tags, <table> ... </table>, inside of which are included one or more rows. Each of these rows will have one or more cells, so that ultimately a grid layout is formed, with rows and columns that can be used to present data in a logical and orderly form.

A table lays out a grid for data

The table to the left, for example, has nine cells organized into three rows. It's not very exciting to look at with no content inside, but it provides a good visual for how a table lays out information.

Although the MediaWiki software supports HTML-style tables, it's strongly recommended to use MediaWiki markup to build your tables whenever possible. Thus, instead of the <table> ... </table> tags, we'll be using {| to start our tables and |} to end them (that's a left and right curly brace, respectively followed or following a pipe character).

Table Rows

While it might be helpful think of tables in terms of grids - rows and columns - they are actually built using rows only. HTML has some ways for dealing with information in columns, but these are awkward and not supported by MediaWiki. For this reason, it's often easier to "grow" a table down (by adding more rows) than it is to add an additional vertical layer of data. We'll see how the latter can be done in just a moment, but let's start with rows:

Correct

{|
|-
|-
|-
...
|}

Incorrect

{| |-
|- |- ... |}

We already have our basic table tags, {| and |}. Inside of these we can add as many rows as we like using |-. It's important to note here that each of these markup tags must be on a new line (see examples to the right). You might also notice that there's no closing tag for a table row, like there is for a table. Once you start a row, any cells you add (next section) will go on that row until you start a new row. This is different from HTML where you can (and sometimes need to) use </tr> to explicitly end a table row.

Table Cells

If you're adventurous and impatient, you might have already tried making a table with the tags we've seen so far, and found that it doesn't work. What gives?! Unfortunately, you can't put data directly into a table row - you need to have at least one "cell" into which to write information. Fortunately, table cells are the easiest to make - all you need is a pipe character (|) on a new line. Then you can finally start filling in your table!

Code

{|
|-
| A cell
| Another cell
|-
| A new row
| two more cells
|}

Result

A cell	Another cell
A new row	two more cells

Quick Reference

Markup code	Function	HTML equivalent
`{\| ... \|}`	Open/close a table	`<table> ... </table>`
`\|+`	Include a table caption	`<caption> ... </caption>`
`\|-`	Start a new table row	`<tr> ... </tr>`
`!` or `!!`	Start a new table header cell	`<th> ... </th>`
`\|` or `\|\|`	Start a new table cell	`<td> ... </td>`

Other Resources

Colours

Lotro-Wiki Standard colours are defined in MediaWiki:Common.css and MediaWiki:Common.js

The LOTRO Wiki default or standard colour scheme is "purple" for general articles and tables.

altRowsMed2

Background: transparent / Lettering: Black / Good Link: Blue / Bad-Link: Red

::::{| class="altRowsMed2" style="text-align:left; padding-left: 2em; width:400px; border: 1px solid black;"

mptable -- Monster Play articles are Orange and Black.

Background: Black / Lettering: moccasin / Good Link: lightgreen / Bad-Link: linegreen / Headers: Orange

::::{| class="mptable" style="text-align:left; padding-left: 2em; width:400px;"

altRowsMP -- Alt Rows Monster Play

Background: Black / Lettering: moccasin / Good Link: lightgreen / Bad-Link: linegreen / Headers: Orange

::::{| class="altRowsMP" style="text-align:left; padding-left: 2em; width:400px;"

Standard LOTRO (Turbine) colour usages:

Colors used to indicate Quality

Quality
	White	Common
	Yellow	Uncommon
	Purple	Rare
	Cyan	Incomparable
	Orange	Epic

Colors used to indicate Level
(Relative to yourself)

Grey	9 or more levels below
Green	6-8 levels below
Turquoise	3-5 levels below
Blue	1-2 levels below
White	Same level as yourself
Yellow	1 level above
Orange	2-4 levels above
Red	5-7 levels above
Purple	8 levels above

Tables defined in CSS

Standard General Purpose Tables

class="wikitable"
class="stocktable"
class="altRows"
class="altRowsMed"
class="altRowsMed2"

Tables for Monster Play

class="darktable"
class="mptable"
class="altRowsMP"
class="WBMTable" for Warband Maneuver Tables

Collapsible Tables

Sorting Tables

see also Sorting Tables
see also Wiki Sorting

Tables can be made sortable by adding class="sortable". Since this can be very useful, it is wise to keep the possibilities and limitations of this feature in mind when designing a table. For example:

Do not divide a table into sections by subheaders spanning several rows. Instead, an extra column can be made showing the content of these headers on each row, in a short form.
Do not have elements spanning several columns; instead, again, repeat the content on each row, in a short form.
In a column of numbers, do not put text such as "ca." before or after a number – it will break numerical sorting. Do not put any text or alphabetical characters in any cell of a column to be sorted numerically. Try not to put a range of numbers (it does not affect the sorting position for numeric sorting mode, and in the case of a range, the first number determines the position, but if, possibly after sorting this or another column, the element is at the top, it will induce alphabetic sorting mode). Instead, put these texts in a separate column. Alternatively, for the greatest flexibility, alphabetic sorting mode with hidden sortkeys can be used.

A long form of abbreviated content can be put as legend outside the table.

Example:

{| class="wikitable sortable" border="1"
|+ Sortable table
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}

Gives:

Sortable table
Alphabetic	Numeric	Date	Unsortable
d	20	2008-11-24	This
b	8	2004-03-01	column
a	6	1979-07-23	cannot
c	4	1492-12-08	be
e	0	1601-08-13	sorted.

Sorting and Collapsing Tables

It is possible to collapse a sortable table. To do so, you need to use the code {| class="wikitable sortable collapsible". If you want the table to default to collapsed state, use the code {| class="wikitable sortable collapsible collapsed" in place of {| class="wikitable sortable collapsible". Taking the above table and making it collapsible gives you this: