原文 : w:c:portability:Table

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.jpeg

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 style="float:left; width:50%">
And I'm the right one!
  • 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.
  • 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>
.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 Access date: 11-12-2015

See also 編集

External links 編集

関連情報 編集

その他のヘルプとフィードバック 編集

特に記載のない限り、コミュニティのコンテンツはCC-BY-SA ライセンスの下で利用可能です。