- このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
- 原文 : 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)[]
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 div
s 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 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;
}
.item {
flex: 1 0 0;
}
References[]
- ↑ 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[]
関連情報[]
- w:c:portability:Table … 元になったページ
その他のヘルプとフィードバック[]
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。