Revision as of 2010-03-08 12:06:44
  Older version (diff) | current version (diff) | Newer version (diff)

Help:Wiki Table Style Guide  

ZAM Network
Wikibase™
Guides
Change skin to: www.ZAMAionEQ1EQ2FFXIFFXIVFree RealmsLoNWARWoW
No wiki styling! - DAoCEQOAEVELotROSWG

This page is an attempt to give some direction and information about available classes that can be applied to tables in the wiki. Some of them are game-specific and are always prefaced with the gameid, such as sto-panel or aion-q0.

A table with no class and no styling is invisible and is used to containerize output.

If you are familiar with MediaWiki the "datatable class here is roughly equivalent to "wikitable".

A class can be applied to a table in HTML or wiki-code. Here are two examples of the common classes, "datatable autowidth", which is defined in every game skin. (This used to be called "infobox", which is DEPRECATED and should no longer be used)

HTML table with .datatable and .autowidth
<table class="datatable autowidth">
 <tr>
  <th>Header One</th>
  <th>Header Two</th>
 </tr>
 <tr>
  <td>Cell One</td>
  <td>Cell Two</td>
 </tr>
</table>
Header One Header Two
Cell One Cell Two
Wikicode table with .datatable and .autowidth
{| class="datatable autowidth"
!Header One
!Header Two
|-
|Cell One
|Cell Two
|}
Header OneHeader Two
Cell OneCell Two

The following are other common ways of using datatable.

datatable
Header OneHeader Two
Cell OneCell Two
datatable sortable
Header OneHeader Two
27
14
39
datatable using .lr and .dr
.lr and .dr are classes that are applied to the rows as follows:
|- class="lr"
Header OneHeader Two
27
14
39

Notes

  • datatable sets width to 100% by default. To make a datatable that is not set to 100% add autowidth to the class. class="datatable autowidth".
  • To make a box that hangs on the right side, add '''style="float:right;" after the class element
  • To make text flow around a table try style="float:left;"
  • To apply styling to a cell you add it after the | (pipe), and another | following the styling. (i.e. |colspan="2"|This is a 2-column cell )
    • On a header cell you still use | following the styling, not ! (i.e. !colspan="2"|This is a 2-column header )

Ordered and Unordered Lists

By default all lists have a top and bottom margin which can cause some spacing issues with lists inside tables. Fortunately, this can be over-ridden! You can either do the list manually in HTML and use, for instance, <ul style="margin:0;"> or you can apply a class to the cell that disables the margins.

with marginswithout margins
list title line
  • list item 1
  • list item 2
  • list item 3
list title line
  • list item 1
  • list item 2
  • list item 3
You can also apply this technique outside of a table using a <span> tag to wrap the list and add the class to the span tag.

CodeOutput
<span class="no-margin-lists">
list title line
* list item 1
* list item 2
* list item 3 </span>
list title line
  • list item 1
  • list item 2
  • list item 3

Game-Specific Classes

This list will probably never be up-to-date as new classes are added as the need arises, but here is a good starting point. Also, there will be some classes that were defined ONLY to be in a specific template for a single object and are not listed here.

Aion

  • aion-q0 to aion-q5: used to colorize item links by quality
  • aion-quest: The main table styling for Aion Quest

EverQuest II

  • eq2-quest: The main table styling for EQ2 Quest
  • eq2-mob: The main table styling for EQ2 Mob
  • eq2-item: The main table styling for EQ2 Item

Star Trek Online

  • sto-panel: Table styling for most boxes in the STO Wiki. Intended to mimic in-game colors.
  • sto-q0 to sto-q5: used to colorize item links by quality
  • sto-lcars: sto-panel with LCARS flavoring (Library Computer Access and Retrieval System)

This is a work in progress as I need to comb through all the .css files to find all the major classes.

This page last modified 2010-03-08 12:06:44.