Portability Hub
Register
Advertisement

How to create beautiful portable tables? Glad you asked!

What is a table?[]

Just like regular tables around the web, a table on a wiki is a rectangular, HTML structure with columns and rows. Of course, there are many variations that can make them far more complicated (captions, headers, columns spanning cells, row spanning cells, etc.), but this is what they are at their base. In Fandom wikis, tables can be constructed with via a GUI-based editor (classic editor or visual editor) or source editor (also source editing mode in classic editor or source editing mode in visual editor) in HTML or wikitext.

Guidelines[]

Use tables only for displaying tabular information[]

Tables should not be used for positioning and design.[1] Tables force a rigid layout on your page elements, when they need to be flexible to adapt to different screen sizes.

Avoid in-line styles and custom classes[]

Instead, use the article-table class like so in this wikitext example:

{| class="article-table"
! Header
|-
| Cell
<!-- ... -->
|}

Classes allowed in tables[]

The classes listed below won't affect the community's portability:

  • article-table
  • WikiaTable
  • wikitable
  • sortable
  • mw-collapsible
  • mw-collapsed

Avoid nested tables or tables within tables[]

These may cause wide tables that require a lot of unnecessary scrolling in some devices.

Example[]

Good table[]

This table is easy to read and has a reasonable amount of rows and columns.

Wielder Sword Residence Notes
King Arthur Excalibur Camelot A legendary king
Arthas the Lich King Froustmourne Icecrown Citadel Used to be a paladin

Bad table (too wide)[]

Very wide table

This table easily goes beyond the border of a standard A4 page, making it cumbersome to read on both the desktop and mobile devices.

Alternatives for tables[]

To control the layout of an article in a portable manner you can use divs with CSS to achieve columns. There are three options:

  • the float CSS property with percentage widths, which are good containers.
<div style="float:left; width:50%">
I'm the left one!
</div>
<div style="float:left; width:50%">
And I'm the right one!
</div>
  • multi-column layout properties, mainly well-suited to large bodies of text.
<div style="column-count:2; column-rule:1px dotted #ccc;">
This text will appear in the first column. That might depend on the quantity of text used inside the container. The latter portion of the text will overflow into the second column. This does depend on the number of columns you have as well.
</div>
  • flexbox properties, which also support horizontal and vertical alignment.
<div class="flex container">
    <div class="flex item">1</div>
    <div class="flex item">2</div>
</div>
.flex {
    display: flex;
}
.container {
    flex-direction: row;
}
.item {
    flex: 1 0 0;
}

References[]

  1. HTML Techniques for Web Content Accessibility Guidelines 1.0 . Retrieved from http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables. Access date: 11-12-2015

See also[]

External links[]

Advertisement