Help:Tables

From Lotro-Wiki.com
Jump to navigation Jump to search

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

  • 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;"


Background: Black / Lettering: moccasin / Good Link: lightgreen / Bad-Link: linegreen / Headers: Orange
::::{| class="mptable" style="text-align:left; padding-left: 2em; width:400px;"
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

see also Collapsible Tables

Classes can also be used to collapse tables, so they are hidden by default. Use the style 'collapsible' to enable collapsing behaviour. By default, a collapsible table will begin expanded. To change this, include the additional class 'collapsed' or 'autocollapse' (i.e. only collapse if 3 other collapsible tables are present). You must include a header row, where the 'hide' option will be displayed. 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".

  • class="wikitable collapsible collapsed"
  • class="stocktable collapsible collapsed"
  • class="altRows collapsible collapsed"
  • class="altRowsMed collapsible collapsed"


Example:

{| class="wikitable collapsible collapsed"
|-
! Header
|-
| Content which starts hidden
|-
| more hidden content
|}

Gives:

Sorting Tables

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:

Example:

{| class="wikitable sortable collapsible" border="1"
|+ Sortable and collapsible 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.2 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}

Gives:

Sortable and collapsible 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.2 1492-12-08 be
e 0 1601-08-13 sorted.

More examples

To create a box (table) to outline a quote use:
style="border: 1px solid black;"