Fandom

Infobox Wikia

Table

219pages on
this wiki
Add New Page
Comments2 Share

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 small one!
</div>
<div style="float:left; width:50%">
And I'm the big 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 horizonal 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;
    flex: 2 0 0;
}
.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

Start a Discussion Discussions about Table

  • [Solved] Managing tables

    8 messages
    • I don't think so. In my opinion, using '''em''' as width unit for table has its own problem. Using smaller f...
    • Granted, it works better if you have CSS styles in place and consistent font settings for your table headers and cells.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.