「ヘルプ:Tables/ja」を編集中

移動先: 案内、 検索

警告: ログインしていません。編集を行うと、あなたの IP アドレスが公開されます。ログインまたはアカウントを作成すれば、あなたの編集はその利用者名とともに表示されるほか、その他の利点もあります。

この編集を取り消せます。 下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 編集中の文章
1行目: 1行目:
−
<languages />
+
{{PD Help Page}}
−
{{TNT|PD Help Page}}
+
:''For MediaWiki's database table structure, see: [[Manual:Database layout]]''
−
:''MediaWiki のデータベース テーブルの構造は、{{ll|Manual:Database layout}} を参照してください''
 
  
−
'''Tables''' may be created in wiki pages.
+
ウィキページ内に'''表''' ('''テーブル''') を作成できます。全般的な規則として、どうしても必要な場合を除いて、テーブルの使用を回避するのが最善です。表のマークアップは、ページの編集を困難にしてしまうことが多いです。<ref>Tables can be created using either XHTML table elements directly, or using wikicode formatting to define the table. XHTML table elements and their use are well described on various web pages and will not be discussed here. The benefit of wikicode is that the table is constructed of character symbols which tend to make it easier to perceive the table structure in the article editing view compared to XHTML table elements.</ref>
−
As a general rule, it is best to avoid using a table unless you need one.
+
== ウィキの表マークアップ概要 ==
−
Table markup often complicates page editing.
 
−
<ref>Tables can be created using either XHTML table elements directly, or using wikicode formatting to define the table.  
 
−
XHTML table elements and their use are well described on various web pages and will not be discussed here.  
 
−
The benefit of wikicode is that the table is constructed of character symbols which tend to make it easier to perceive the table structure in the article editing view compared to XHTML table elements.</ref>
 
−
 
 
−
== Wiki table markup summary ==
 
 
{| class="wikitable" style="width:60%"
 
{| class="wikitable" style="width:60%"
 
| style="padding: 10px;"| <big><nowiki>{|</nowiki></big>
 
| style="padding: 10px;"| <big><nowiki>{|</nowiki></big>
−
| style="padding: 5px;"| '''表の開始'''、''必須''
+
| style="padding: 5px;"| '''表の開始''', ''必須''
 
|-
 
|-
 
| style="padding: 10px;"| <big><nowiki>|+</nowiki></big>
 
| style="padding: 10px;"| <big><nowiki>|+</nowiki></big>
−
| style="padding: 5px;" | table '''caption''', ''optional;'' only between '''table start''' and '''table row'''
+
| style="padding: 5px;" | 表の'''題（キャプション）''': ''省略可''。'''表の開始'''記号と最初の'''行'''の間でのみ有効
 
|-
 
|-
 
| style="padding: 10px;"| <big><nowiki>|-</nowiki></big>
 
| style="padding: 10px;"| <big><nowiki>|-</nowiki></big>
−
| style="padding: 5px;" | '''table row''', ''optional on first row''—wiki engine assumes the first row
+
| style="padding: 5px;" | '''行''': ''最初の行は省略可''（MediaWIkiが自動的に補完）。
 
|-
 
|-
 
| style="padding: 10px;"| <big><nowiki>!</nowiki></big>  
 
| style="padding: 10px;"| <big><nowiki>!</nowiki></big>  
−
| style="padding: 5px;" | '''表のヘッダー'''セル、''省略可能。'' Consecutive '''table header''' cells may be added on same line separated by double marks (<code>!!</code>) or start on new lines, each with its own single mark (<code>!</code>).
+
| style="padding: 5px;" | '''見出し'''セル: ''省略可''。連続する見出しセルは、各セルを<code><nowiki>!!</nowiki></code> または <code><nowiki>||</nowiki></code> で区切って同一行に書くか、新規行に <code><nowiki>!</nowiki></code>に続けて書く。
 
|-  
 
|-  
 
| style="padding: 10px;"| <big><nowiki>|</nowiki></big>
 
| style="padding: 10px;"| <big><nowiki>|</nowiki></big>
−
| style="padding: 5px;" | '''表のデータ'''セル、''省略可能''。 Consecutive '''table data''' cells may be added on same line separated by double marks (<code><nowiki>||</nowiki></code>) or start on new lines, each with its own single mark (<code><nowiki>|</nowiki></code>).
+
| style="padding: 5px;" | '''データ'''セル: ''必須!'' 連続するセルは、各セルを <code><nowiki>||</nowiki></code> で区切って同一行に書くか、新規行に <code><nowiki>|</nowiki></code>に続けて書く。
 
|-
 
|-
 
| style="padding: 10px;"| <big><nowiki>|}</nowiki></big>
 
| style="padding: 10px;"| <big><nowiki>|}</nowiki></big>
−
| style="padding: 5px;" | '''表の終了'''、''必須''
+
| style="padding: 5px;" | '''表の終了''', ''必須''  
 
|}
 
|}
−
*The above marks must '''start on a new line''' except the double <code>||</code> and <code>!!</code> for optionally adding consecutive cells to a line. However, blank spaces at the beginning of a line are ignored.
+
*上述の各マークアップは'''新しい行の冒頭に書く必要があります'''。ただしは連続するセルを同一行に書くための二重の<code>||</code>と<code>!!</code>は例外です。また新規行の冒頭にある半角空白は無視されます。
−
*'''XHTML の属性。''' Each mark, except table end, optionally accepts one or more XHTML attributes. Attributes must be on the same line as the mark. Separate attributes from each other with a single space.
+
*'''XHTML属性'''。各マークアップは、表の終了マークアップを除き、XHTML属性を与えることができます。属性はマークアップと同一行に書かなければなりません。各属性の間はシングルスペースで分離してください。
−
+
**セルと題（<code>|</code> または <code>||</code>、 <code>!</code> または <code>!!</code>、 <code>|+</code>）は内容のある部分ですので、中身と属性を区別するためにパイプ記号（<code>|</code>）を使用します。セルの内容は属性と同じ行に書いても、次の行に書いても構いません。
−
**Cells and caption (<code>|</code> or <code>||</code>, <code>!</code> or <code>!!</code>, and <code>|+</code>) hold content. So separate any attributes from content with a single pipe (<code>|</code>). Cell content may follow on same line or on following lines.
+
**表の開始と行の開始のマークアップ（<code>{|</code> と <code>|-</code>）はそれ自身の内容はない部分です。属性指定の後にパイプ記号（<code>|</code>）を'''加えないで'''ください。これらの開始記号のあとに加えられたパイプは、ページの生成時に直前の文字列とともに除去されるため、表が意図通り生成されなくなることがあります。
−
**Table and row marks (<code>{|</code> and <code>|-</code>) do not directly hold content. Do ''not'' add pipe (<code>|</code>) after their optional attributes. If you erroneously add a pipe after attributes for the table mark or row mark the parser will delete it ''and'' your final attribute if it was touching the erroneous pipe!
+
*'''セルの内容'''は（ア）セル開始のマークアップと同一行に書く、（イ）マークアップの次以下の行に書く、のいずれも可能です。行の冒頭に使用しないと有効でないウィキマークアップ（リスト、見出し、入れ子にする表など）をセルの中に入れるためには、新しい行に書く必要があります。
−
*'''Content''' may (a) follow its cell mark on the same line after any optional XHTML attributes or (b) on lines below the cell mark. Content that uses wiki markup that itself needs to start on a new line, such as lists, headings, or nested tables, must be on its own new line.
 
 
**'''Pipe character as content.''' To insert a pipe (<code>|</code>) character into a table, use the &lt;nowiki&gt;<code>|</code>&lt;/nowiki&gt; escaping markup.
 
**'''Pipe character as content.''' To insert a pipe (<code>|</code>) character into a table, use the &lt;nowiki&gt;<code>|</code>&lt;/nowiki&gt; escaping markup.
  
−
==基礎==
+
==基本==
−
The following table lacks borders and good spacing but shows the simplest wiki markup table structure.
+
下記のテーブルには罫線がなく、間隔の取り方もよくありませんが、最も単純なウィキマークアップによる表を示しています。
  
 
{| style="width:100%"
 
{| style="width:100%"
−
! style="width: 50%;"|You type
+
! style="width: 50%;"|入力内容
−
! style="width: 50%;"|You get
+
! style="width: 50%;"|表示結果
 
|-
 
|-
−
| style="padding: 5px;"|
+
|
 
<pre>
 
<pre>
 
{|
 
{|
−
|オレンジ
+
|みかん
 
|りんご
 
|りんご
 
|-
 
|-
 +
|おにぎり
 
|パン
 
|パン
−
|パイ
 
 
|-
 
|-
−
|バター
+
|みそ
−
|アイスクリーム
+
|しょう油
 
|}
 
|}
 
</pre>
 
</pre>
−
| style="padding: 5px;"|
+
|
 
{|
 
{|
−
|オレンジ
+
|みかん
 
|りんご
 
|りんご
 
|-
 
|-
 +
|おにぎり
 
|パン
 
|パン
−
|パイ
 
 
|-
 
|-
−
|バター
+
|みそ
−
|アイスクリーム
+
|しょう油
 
|}
 
|}
 
|}
 
|}
  
−
The cells in the same row can be listed on one line separated by <code>||</code> (two pipe symbols).
+
表中の同一行のセルは、編集テキストの同一行に <code>||</code> (パイプ記号2個) で区切って記述できます。If the text in the cell should contain a line break, use <code><nowiki><br/></nowiki></code> instead.
−
If the text in the cell should contain a line break, use <code><nowiki><br/></nowiki></code> instead.
 
  
 
{| style="width:100%"
 
{| style="width:100%"
−
! style="width: 50%;"|You type
+
! style="width: 50%;"|入力内容
−
! style="width: 50%;"|You get
+
! style="width: 50%;"|表示結果
 
|-
 
|-
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
<pre>
 
<pre>
 
{|
 
{|
−
|オレンジ||りんご||など
+
|Orange||Apple||more
 
|-
 
|-
−
|パン||パイ||など
+
|Bread||Pie||more
 
|-
 
|-
−
|バター||アイス<br />クリーム||and<br />more
+
|Butter||Ice<br/>cream||and<br/>more
 
|}
 
|}
 
</pre>
 
</pre>
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{|
 
{|
−
|オレンジ||りんご||など
+
|Orange||Apple||more
 
|-
 
|-
−
|パン||パイ||など
+
|Bread||Pie||more
 
|-
 
|-
−
|バター||アイス<br />クリーム||and<br />more
+
|Butter||Ice<br/>cream||and<br/>more
 
|}
 
|}
 
|}
 
|}
101行目: 92行目:
  
 
{| style="width:100%"
 
{| style="width:100%"
−
! style="width: 50%;"|You type
+
! style="width: 50%;"|入力内容
−
! style="width: 50%;"|You get
+
! style="width: 50%;"|表示結果
 
|-
 
|-
−
| style="padding: 5px;"|
+
|
 
<pre>
 
<pre>
 
{|
 
{|
−
|  オレンジ || りんご || など
+
|  みかん    ||   りんご   ||   その他
 
|-
 
|-
−
|  パン || パイ || など
+
|  おにぎり    ||   パン    ||   その他
 
|-
 
|-
−
|  バター || アイスクリーム || and more
+
|  みそ  || しょう油 || その他
 
|}
 
|}
 
</pre>
 
</pre>
−
| style="padding: 5px;"|
+
|
 
{|
 
{|
−
|  オレンジ || りんご || など
+
|  みかん    ||   りんご   ||   その他
 
|-
 
|-
−
|  パン || パイ || など
+
|  おにぎり    ||   パン    ||   その他
 
|-
 
|-
−
|  バター || アイスクリーム || and more
+
|  みそ  || しょう油 || その他
 
|}
 
|}
 
|}
 
|}
168行目: 159行目:
 
|}
 
|}
  
−
=== 表のヘッダー ===
+
===見出しセル===
−
Table headers can be created by using "<code>!</code>" (exclamation mark) instead of "<code>|</code>" (pipe symbol).
+
<code>|</code>の代わりに "<code>!</code>" を使うと見出しセルになります。見出しはデフォルトではボールド体・中央揃えで表示されます。
−
Headers usually show up bold and centered by default.
 
  
−
{| style="width:100%"
+
{| cellspacing="0" border="1"
−
! style="width: 50%;"|You type
+
!style="width:50%"|入力内容
−
! style="width: 50%;"|You get
+
!style="width:50%"|表示結果
 
|-
 
|-
−
| style="padding: 5px;"|
+
|
 
<pre>
 
<pre>
 
{|
 
{|
−
! style="text-align:left;"| Item
+
! style="text-align:left;"| 項目
−
! 個数
+
! 数量
−
! 価格
+
! 値段
 
|-
 
|-
−
|オレンジ
+
|みかん
 
|10
 
|10
−
|7.00
+
|700
 
|-
 
|-
−
|パン
+
|おにぎり
 
|4
 
|4
−
|3.00
+
|300
 
|-
 
|-
−
|バター
+
|みそ
 
|1
 
|1
−
|5.00
+
|500
 
|-
 
|-
 
!合計
 
!合計
 
|
 
|
−
|15.00
+
|1500
 
|}
 
|}
 
</pre>
 
</pre>
−
| style="padding: 5px;"|
+
|
 
{|
 
{|
−
! style="text-align:left;"| Item
+
! style="text-align:left;"| 項目
−
! 個数
+
! 数量
−
! 価格
+
! 値段
 
|-
 
|-
−
|オレンジ
+
|みかん
 
|10
 
|10
−
|7.00
+
|700
 
|-
 
|-
−
|パン
+
|おにぎり
 
|4
 
|4
−
|3.00
+
|300
 
|-
 
|-
−
|バター
+
|みそ
 
|1
 
|1
−
|5.00
+
|500
 
|-
 
|-
 
!合計
 
!合計
 
|
 
|
−
|15.00
+
|1500
 
|}
 
|}
 
|}
 
|}
  
−
'''Note:''' When using attributes as in the heading 'Item' a vertical bar '|' is used for separation.
+
'''注意:''' 見出しの '項目' に属性を付ける場合は、セパレータとして バーティカルバー '|' を使います。  '!'ではありません.
−
Not an exclamation character '!'.
 
  
−
===キャプション===
+
===表の題===
−
A '''table caption''' can be added to the top of any table as follows.
+
'''表の題'''は次のように加えることができます。
  
 
{| style="width:100%"
 
{| style="width:100%"
−
! style="width: 50%;"|You type
+
! style="width: 50%;"|入力内容
−
! style="width: 50%;"|You get
+
! style="width: 50%;"|表示結果
 
|-
 
|-
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
<pre>
 
<pre>
 
{|
 
{|
−
|+Food complements
+
|+食べものリスト
 
|-
 
|-
−
|オレンジ
+
|みかん
 
|りんご
 
|りんご
 
|-
 
|-
 +
|おにぎり
 
|パン
 
|パン
−
|パイ
 
 
|-
 
|-
−
|バター
+
|みそ
−
|アイスクリーム
+
|しょう油
 
|}
 
|}
 
</pre>
 
</pre>
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{|
 
{|
−
|+ Food complements
+
|+食べものリスト
 
|-
 
|-
−
|オレンジ
+
|みかん
 
|りんご
 
|りんご
 
|-
 
|-
 +
|おにぎり
 
|パン
 
|パン
−
|パイ
 
 
|-
 
|-
−
|バター
+
|みそ
−
|アイスクリーム
+
|しょう油
 
|}
 
|}
 
|}
 
|}
  
−
=== class="wikitable" ===
+
===class="wikitable"===
−
 
+
class="wikitable"を指定すると、基本スタイルとして (light gray background, borders, padding and align left) の属性が付加されます。
−
Basic styling (light gray background, borders, padding and align left) can be achieved by adding class="wikitable".
 
  
 
{| style="width:100%"
 
{| style="width:100%"
−
! style="width: 50%;"|You type
+
! style="width: 50%;"|入力内容
−
! style="width: 50%;"|You get
+
! style="width: 50%;"|表示結果
 
|-
 
|-
−
| style="padding: 5px;"|
+
|
 
<pre>
 
<pre>
 
{| class="wikitable"
 
{| class="wikitable"
−
|+Food complements
+
|+食べものリスト
 
|-
 
|-
−
|オレンジ
+
|みかん
 
|りんご
 
|りんご
 
|-
 
|-
 +
|おにぎり
 
|パン
 
|パン
−
|パイ
 
 
|-
 
|-
−
|バター
+
|みそ
−
|アイスクリーム
+
|しょう油
 
|}
 
|}
 
</pre>
 
</pre>
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{| class="wikitable"
 
{| class="wikitable"
−
|+ Food complements
+
|+ 食べものリスト
 
|-
 
|-
−
|オレンジ
+
|みかん
 
|りんご
 
|りんご
 
|-
 
|-
 +
|おにぎり
 
|パン
 
|パン
−
|パイ
 
 
|-
 
|-
−
|バター
+
|みそ
−
|アイスクリーム
+
|しょう油
 
|}
 
|}
 
|}
 
|}
  
−
===HTML の colspan と rowspan===
+
===HTML colspan / rowspan===
  
−
You can use HTML '''colspan''' and '''rowspan''' attributes on cells for advanced layout.
+
セルに HTML の colspan / rowspan を使うとセルを連結できます。 それぞれ横 / 縦に連結します。
  
 
{| style="width:100%"
 
{| style="width:100%"
−
! style="width: 50%;"|You type
+
! style="width: 50%;"|入力内容
−
! style="width: 50%;"|You get
+
! style="width: 50%;"|表示結果
 
|-
 
|-
−
| style="padding: 5px;"|
+
|
 
<pre>
 
<pre>
 
{| class="wikitable"
 
{| class="wikitable"
−
!colspan="6"|Shopping List
+
!colspan="6"|買い物リスト
 
|-
 
|-
−
|rowspan="2"|Bread & Butter
+
|rowspan="2"|パンとバター
 
|パイ
 
|パイ
−
|Buns
+
|バンズ
−
|Danish
+
|デニッシュ
 
|colspan="2"|クロワッサン
 
|colspan="2"|クロワッサン
 
|-
 
|-
327行目: 315行目:
 
|}
 
|}
 
</pre>
 
</pre>
−
| style="padding: 5px;"|
+
|
 
{| class="wikitable"
 
{| class="wikitable"
−
!colspan="6"|Shopping List
+
!colspan="6"|買い物リスト
 
|-
 
|-
−
|rowspan="2"|Bread & Butter
+
|rowspan="2"|パンとバター
 
|パイ
 
|パイ
−
|Buns
+
|バンズ
−
|Danish
+
|デニッシュ
 
|colspan="2"|クロワッサン
 
|colspan="2"|クロワッサン
 
|-
 
|-
344行目: 332行目:
 
|}
 
|}
  
−
== XHTML の属性 ==
+
== XHTML属性 ==
−
You can add XHTML attributes to tables.
+
表にはXHTML属性を付加できます。XHTML属性についてもっとも信頼できる記述については、[http://www.w3.org/TR/REC-html40/struct/tables.html W3C の配布する HTML 4.01 仕様書の表の項目]を参照してください。
−
For the authoritative source on these, see [http://www.w3.org/TR/REC-html40/struct/tables.html the W3C's HTML 4.01 Specification page on tables].
 
  
−
=== 表の属性 ===
+
=== 表全体の属性 ===
−
Placing attributes after the table start tag (<code>{|</code>) applies attributes to the entire table.
+
表の開始マークアップ（<code>{|</code>）に続けて付加された属性は表全体に適用されます。
  
 
{| style="width:100%"
 
{| style="width:100%"
−
! style="width: 50%;"| You type
+
! style="width: 50%;"| 入力内容
−
! style="width: 50%;"| You get
+
! style="width: 50%;"| 表示結果
 
|-
 
|-
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
<pre>
 
<pre>
 
{| class="wikitable" style="text-align: center; color: green;"
 
{| class="wikitable" style="text-align: center; color: green;"
−
|オレンジ
+
|みかん
 
|りんご
 
|りんご
 
|12,333.00
 
|12,333.00
 
|-
 
|-
 +
|おにぎり
 
|パン
 
|パン
−
|パイ
 
 
|500.00
 
|500.00
 
|-
 
|-
−
|バター
+
|みそ
−
|アイスクリーム
+
|しょう油
 
|1.00
 
|1.00
 
|}
 
|}
373行目: 360行目:
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{| class="wikitable" style="text-align: center; color: green;"
 
{| class="wikitable" style="text-align: center; color: green;"
−
|オレンジ
+
|みかん
 
|りんご
 
|りんご
 
|12,333.00
 
|12,333.00
 
|-
 
|-
 +
|おにぎり
 
|パン
 
|パン
−
|パイ
 
 
|500.00
 
|500.00
 
|-
 
|-
−
|バター
+
|みそ
−
|アイスクリーム
+
|しょう油
 
|1.00
 
|1.00
 
|}
 
|}
388行目: 375行目:
  
 
=== セルの属性 ===
 
=== セルの属性 ===
−
You can put attributes on individual '''cells'''.
+
各'''セル'''にも属性を付加できます。例えば、数値は右寄せの方が見やすいかもしれません。
−
For example, numbers may look better aligned right.
 
  
 
{| style="width:100%"
 
{| style="width:100%"
−
! style="width: 50%;"| You type
+
! style="width: 50%;"| 入力内容
−
! style="width: 50%;"| You get
+
! style="width: 50%;"| 表示結果
 
|-
 
|-
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
<pre>
 
<pre>
 
{| class="wikitable"
 
{| class="wikitable"
−
| オレンジ
+
| みかん
 
| りんご
 
| りんご
 
| style="text-align:right;" | 12,333.00
 
| style="text-align:right;" | 12,333.00
 
|-
 
|-
 +
| おにぎり
 
| パン
 
| パン
−
| パイ
 
 
| style="text-align:right;" | 500.00
 
| style="text-align:right;" | 500.00
 
|-
 
|-
−
| バター
+
| みそ
−
| アイスクリーム
+
| しょう油
 
| style="text-align:right;" | 1.00
 
| style="text-align:right;" | 1.00
 
|}
 
|}
413行目: 399行目:
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{| class="wikitable" style="text-align:center"
 
{| class="wikitable" style="text-align:center"
−
| オレンジ
+
|みかん
−
| りんご
+
|りんご
 
| style="text-align:right;" | 12,333.00
 
| style="text-align:right;" | 12,333.00
 
|-
 
|-
−
| パン
+
|おにぎり
−
| パイ
+
|パン
 
| style="text-align:right;" | 500.00
 
| style="text-align:right;" | 500.00
 
|-
 
|-
−
| バター
+
|みそ
−
| アイスクリーム
+
|しょう油
 
| style="text-align:right;" | 1.00
 
| style="text-align:right;" | 1.00
 
|}
 
|}
 
|}
 
|}
  
−
You can also use '''cell''' attributes when you are listing multiple '''cells''' on a single line.  
+
You can also use '''cell''' attributes when you are listing multiple '''cells''' on a single line. Note that the '''cells''' are separated by <code>||</code>, and within each '''cell''' the attribute(s) and value are separated by <code>|</code>.
−
Note that the '''cells''' are separated by <code>||</code>, and within each '''cell''' the attribute(s) and value are separated by <code>|</code>.
 
  
 
{| style="width:100%"
 
{| style="width:100%"
437行目: 422行目:
 
<pre>
 
<pre>
 
{| class="wikitable"
 
{| class="wikitable"
−
| オレンジ || りんご     || style="text-align:right;" | 12,333.00
+
| Orange || Apple     || style="text-align:right;" | 12,333.00
 
|-
 
|-
−
| パン || パイ       || style="text-align:right;" | 500.00
+
| Bread  || Pie       || style="text-align:right;" | 500.00
 
|-
 
|-
−
| バター || アイスクリーム || style="text-align:right;" | 1.00
+
| Butter || Ice cream || style="text-align:right;" | 1.00
 
|}
 
|}
 
</pre>
 
</pre>
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{| class="wikitable"
 
{| class="wikitable"
−
| オレンジ || りんご     || style="text-align:right;" | 12,333.00
+
| Orange || Apple     || style="text-align:right;" | 12,333.00
 
|-
 
|-
−
| パン || パイ       || style="text-align:right;" | 500.00
+
| Bread  || Pie       || style="text-align:right;" | 500.00
 
|-
 
|-
−
| バター || アイスクリーム || style="text-align:right;" | 1.00
+
| Butter || Ice cream || style="text-align:right;" | 1.00
 
|}
 
|}
 
|}
 
|}
  
 
===行の属性===
 
===行の属性===
−
You can put attributes on individual '''rows''', too.
+
個々の'''行'''にも属性を設定することができます。
  
 
{| style="width:100%"
 
{| style="width:100%"
−
! style="width: 50%;"|You type
+
! style="width: 50%;"|入力内容
−
! style="width: 50%;"|You get
+
! style="width: 50%;"|表示結果
 
|-
 
|-
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
<pre>
 
<pre>
 
{| class="wikitable"
 
{| class="wikitable"
−
| オレンジ
+
| みかん
 
| りんご
 
| りんご
 
| style="text-align:right;"| 12,333.00
 
| style="text-align:right;"| 12,333.00
 
|-
 
|-
 +
| おにぎり
 
| パン
 
| パン
−
| パイ
 
 
| style="text-align:right;"| 500.00
 
| style="text-align:right;"| 500.00
 
|- style="font-style: italic; color: green;"
 
|- style="font-style: italic; color: green;"
−
| バター
+
|みそ
−
| アイスクリーム
+
|しょう油
 
| style="text-align:right;"| 1.00
 
| style="text-align:right;"| 1.00
 
|}
 
|}
479行目: 464行目:
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{| class="wikitable"
 
{| class="wikitable"
−
| オレンジ
+
|みかん
−
| りんご
+
|りんご
 
| style="text-align:right;"| 12,333.00
 
| style="text-align:right;"| 12,333.00
 
|-
 
|-
−
| パン
+
|おにぎり
−
| パイ
+
|パン
 
| style="text-align:right;"| 500.00
 
| style="text-align:right;"| 500.00
 
|- style="font-style: italic; color: green;"
 
|- style="font-style: italic; color: green;"
−
| バター
+
|みそ
−
| アイスクリーム
+
|しょう油
 
| style="text-align:right;"| 1.00
 
| style="text-align:right;"| 1.00
 
|}
 
|}
504行目: 489行目:
 
<pre style="font-size: 80%">
 
<pre style="font-size: 80%">
 
{| border="1" style="border-collapse:collapse"
 
{| border="1" style="border-collapse:collapse"
−
| オレンジ
+
| Orange
−
| りんご
+
| Apple
 
|-
 
|-
−
| パン
+
| Bread
−
| パイ
+
| Pie
 
|}
 
|}
 
</pre>
 
</pre>
 
| style="padding: 20px;"|
 
| style="padding: 20px;"|
 
{| border="1" style="border-collapse:collapse"
 
{| border="1" style="border-collapse:collapse"
−
| オレンジ
+
| Orange
−
| りんご
+
| Apple
 
|-
 
|-
−
| パン
+
| Bread
−
| パイ
+
| Pie
 
|}
 
|}
 
|}
 
|}
  
 
===Border width===
 
===Border width===
−
If "border-width:" has only one number, it is for all four border sides:
+
"border-width:" の後に数値を一つだけ書いた場合は、四方に対する指定となります。
 
{| style="width:100%"
 
{| style="width:100%"
 
|-
 
|-
−
! style="width:50%" | You type
+
! style="width:50%" | 入力内容
−
! style="width:50%" | You get
+
! style="width:50%" | 表示結果
 
|-
 
|-
 
| style="padding: 5px;" |
 
| style="padding: 5px;" |
542行目: 527行目:
 
|}
 
|}
  
−
If "border-width:" has more than one number, the four numbers are for '''top, right, bottom, left (REMEMBER this order)''':
+
"border-width:" の後に一つ以上の数値を書いた場合、四つの数値は '''上, 右, 下, 左''' に対する指定となります。
  
 
{| style="width:100%"
 
{| style="width:100%"
 
|-
 
|-
−
! style="width:50%" | You type
+
! style="width:50%" | 入力内容
−
! style="width:50%" | You get
+
! style="width:50%" | 表示結果
 
|-
 
|-
 
| style="padding: 5px;" |
 
| style="padding: 5px;" |
563行目: 548行目:
 
|}
 
|}
  
−
:When there are fewer than 4 values, the value for left takes its default from the value for right, the value for bottom takes its default from the value for top, and the value for right takes its default from the value for top.
+
:四つ未満の数値を書いた場合、 左を指定する数値は右の値、下を指定する数値は上の値、右を指定する数値は上ををデフォルトとします。
  
−
Another method to define the widths of the four sides of a cell is to use ''"border-left", "border-right", "border-top" and "border-bottom"'':
+
四方の幅を指定する別の方法に ''"border-left"、 "border-right"、 "border-top" 、 "border-bottom"'' があります。
 
<div style="width: 100%; overflow:auto;">
 
<div style="width: 100%; overflow:auto;">
 
{| style="width:100%"
 
{| style="width:100%"
 
|-
 
|-
−
! style="width:50%" | You type
+
! style="width:50%" | 入力内容
−
! style="width:50%" | You get
+
! style="width:50%" | 表示結果
 
|-
 
|-
−
| style="padding: 5px;" |
+
|
 
<pre>
 
<pre>
 
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;font-size:90%;font-size:90%;" align="center"  
 
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;font-size:90%;font-size:90%;" align="center"  
587行目: 572行目:
 
</div>
 
</div>
  
−
Notes :
+
注意 :
−
* The HTML attributes (such as "width=", "border=", "cellspacing=", "cellpadding=") do not need any length unit (the pixel unit is assumed).
+
* HTML 属性 (例えば "width=", "border=", "cellspacing=", "cellpadding=") 長さの単位指定を必要としません。 (ピクセル単位として扱われます) HTML属性を上書きするCSS スタイルプロパティは、ピクセルの意味の "px" のような単位指定が必要です。
−
The CSS style properties (which override the HTML attributes) require an explicit length unit (if the value is not 0) such as "px" for the pixel.
 
  
 
===With HTML attributes and CSS styles===
 
===With HTML attributes and CSS styles===
−
[[Special:MyLanuage/Manual:CSS|CSS]] style attributes can be added with or without other HTML attributes.
+
[[Manual:CSS|CSS]] style attributes can be added with or without other HTML attributes.
  
 
{| style="width:100%"
 
{| style="width:100%"
601行目: 585行目:
 
<pre>
 
<pre>
 
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"
 
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"
−
|オレンジ
+
|Orange
−
|りんご
+
|Apple
 
|-
 
|-
−
|パン
+
|Bread
−
|パイ
+
|Pie
 
|-
 
|-
−
|バター
+
|Butter
−
|アイスクリーム
+
|Ice cream
 
|}
 
|}
 
</pre>
 
</pre>
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"  
 
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"  
−
|オレンジ
+
|Orange
−
|りんご
+
|Apple
 
|-
 
|-
−
|パン
+
|Bread
−
|パイ
+
|Pie
 
|-
 
|-
−
|バター
+
|Butter
−
|アイスクリーム
+
|Ice cream
 
|}
 
|}
 
|}
 
|}
  
−
====属性====
+
====Attributes====
 
'''Attributes''' can be added to the caption and headers as follows.
 
'''Attributes''' can be added to the caption and headers as follows.
  
636行目: 620行目:
 
|+ style="caption-side:bottom; color:#e76700;"|''Food complements''
 
|+ style="caption-side:bottom; color:#e76700;"|''Food complements''
 
|-
 
|-
−
|オレンジ
+
|Orange
−
|りんご
+
|Apple
 
|-
 
|-
−
|パン
+
|Bread
−
|パイ
+
|Pie
 
|-
 
|-
−
|バター
+
|Butter
−
|アイスクリーム
+
|Ice cream
 
|}
 
|}
 
</pre>
 
</pre>
650行目: 634行目:
 
|+ style="caption-side:bottom; color:#e76700;"|''Food complements''
 
|+ style="caption-side:bottom; color:#e76700;"|''Food complements''
 
|-
 
|-
−
|オレンジ
+
|Orange
−
|りんご
+
|Apple
 
|-
 
|-
−
|パン
+
|Bread
−
|パイ
+
|Pie
 
|-
 
|-
−
|バター
+
|Butter
−
|アイスクリーム
+
|Ice cream
 
|}
 
|}
 
|}
 
|}
  
−
====列の幅====
+
====Column width====
 
'''Column width''' can be added as follows.
 
'''Column width''' can be added as follows.
  
 
You type:
 
You type:
 
<pre>
 
<pre>
−
{| style="color: black; background-color: #ffffcc; width: 85%;"
+
{| style="color: black; background-color: #ffffcc;" width="85%"
 
| colspan="2" | This column width is 85% of the screen width (and has a background color)
 
| colspan="2" | This column width is 85% of the screen width (and has a background color)
 
|-
 
|-
677行目: 661行目:
  
 
You get:
 
You get:
−
{| style="color: black; background-color: #ffffcc; width: 85%;"
+
{| style="color: black; background-color: #ffffcc;" width="85%"  
 
| colspan="2" | This column width is 85% of the screen width (and has a background color)
 
| colspan="2" | This column width is 85% of the screen width (and has a background color)
 
|-
 
|-
685行目: 669行目:
  
 
===Accessibility of table header cells===
 
===Accessibility of table header cells===
−
Table header cells do not explicitly specify which table data cells they apply to (those on their right on the same row, or those below them on the same column).  
+
Table header cells do not explicitly specify which table data cells they apply to (those on their right on the same row, or those below them on the same column). When the table is rendered in a visual 2D environment, this is usually easy to infer.
−
When the table is rendered in a visual 2D environment, this is usually easy to infer.
 
  
−
However when tables are rendered on non-visual media, you can help the browser to determine which table header cell applies to the description of any selected cell (in order to repeat its content in some accessibility helper) using a scope="row" or scope="col" attribute on table header cells.  
+
However when tables are rendered on non-visual media, you can help the browser to determine which table header cell applies to the description of any selected cell (in order to repeat its content in some accessibility helper) using a scope="row" or scope="col" attribute on table header cells. In most cases with simple tables, you'll use scope="col" on all header cells of the first row, and scope="row" on the first cell of the following rows:
−
In most cases with simple tables, you'll use scope="col" on all header cells of the first row, and scope="row" on the first cell of the following rows:
 
  
 
{| style="width:100%"
 
{| style="width:100%"
700行目: 682行目:
 
|-
 
|-
 
! scope="col"| Item
 
! scope="col"| Item
−
! scope="col"| 重量
+
! scope="col"| Quantity
−
! scope="col"| 価格
+
! scope="col"| Price
 
|-
 
|-
−
! scope="row"| パン
+
! scope="row"| Bread
 
| 0.3 kg
 
| 0.3 kg
 
| $0.65
 
| $0.65
 
|-
 
|-
−
! scope="row"| バター
+
! scope="row"| Butter
 
| 0.125 kg
 
| 0.125 kg
 
| $1.25
 
| $1.25
 
|-
 
|-
−
! scope="row" colspan="2"| 合計
+
! scope="row" colspan="2"| Total
 
| $1.90
 
| $1.90
 
|}
 
|}
719行目: 701行目:
 
|-
 
|-
 
! scope="col"| Item
 
! scope="col"| Item
−
! scope="col"| 重量
+
! scope="col"| Quantity
−
! scope="col"| 価格
+
! scope="col"| Price
 
|-
 
|-
−
! scope="row"| パン
+
! scope="row"| Bread
 
| 0.3 kg
 
| 0.3 kg
 
| $0.65
 
| $0.65
 
|-
 
|-
−
! scope="row"| バター
+
! scope="row"| Butter
 
| 0.125 kg
 
| 0.125 kg
 
| $1.25
 
| $1.25
 
|-
 
|-
−
! scope="row" colspan="2"| 合計
+
! scope="row" colspan="2"| Total
 
| $1.90
 
| $1.90
 
|}
 
|}
 
|}
 
|}
  
−
== 配置 ==
+
== Alignment ==
  
−
=== 表の配置 ===
+
=== Table alignment ===
  
−
Table alignment is achieved by using CSS.  
+
Table alignment is achieved by using CSS. The table alignment is controlled by margins. A fixed margin on one side will make the table to be aligned to that side, if on the opposite side the margin is defined as ''auto''. To have a table center aligned, you should set both margins to ''auto''
−
The table alignment is controlled by margins.  
 
−
A fixed margin on one side will make the table to be aligned to that side, if on the opposite side the margin is defined as ''auto''.  
 
−
To have a table center aligned, you should set both margins to ''auto''
 
  
 
For example, a right-aligned table:
 
For example, a right-aligned table:
753行目: 732行目:
 
<pre>
 
<pre>
 
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
 
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
−
| オレンジ
+
| Orange
−
| りんご
+
| Apple
 
|-
 
|-
−
| パン
+
| Bread
−
| パイ
+
| Pie
 
|-
 
|-
−
| バター
+
| Butter
−
| アイスクリーム
+
| Ice cream
 
|}
 
|}
 
</pre>
 
</pre>
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
 
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
−
| オレンジ
+
| Orange
−
| りんご
+
| Apple
 
|-
 
|-
−
| パン
+
| Bread
−
| パイ
+
| Pie
 
|-
 
|-
−
| バター
+
| Butter
−
| アイスクリーム
+
| Ice cream
 
|}
 
|}
 
|}
 
|}
785行目: 764行目:
 
<pre>
 
<pre>
 
{| class="wikitable" style="margin: auto;"
 
{| class="wikitable" style="margin: auto;"
−
| オレンジ
+
| Orange
−
| りんご
+
| Apple
 
|-
 
|-
−
| パン
+
| Bread
−
| パイ
+
| Pie
 
|-
 
|-
−
| バター
+
| Butter
−
| アイスクリーム
+
| Ice cream
 
|}
 
|}
 
</pre>
 
</pre>
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{| class="wikitable" style="margin: auto;"
 
{| class="wikitable" style="margin: auto;"
−
| オレンジ
+
| Orange
−
| りんご
+
| Apple
 
|-
 
|-
−
| パン
+
| Bread
−
| パイ
+
| Pie
 
|-
 
|-
−
| バター
+
| Butter
−
| アイスクリーム
+
| Ice cream
 
|}
 
|}
 
|}
 
|}
810行目: 789行目:
 
=== Table floating around text ===
 
=== Table floating around text ===
  
−
If you align a table to the right or the left side of the page, the text that comes after the table starts at the end of it, leaving an empty space around the table.  
+
If you align a table to the right or the left side of the page, the text that comes after the table starts at the end of it, leaving an empty space around the table. You can make the text to be wrapped around the table by making the table to ''float'' around the text instead of just aligning it. This can be achieved using the <code>float</code> CSS attribute, which can specify where the table floats to the right side or to the left. When using ''float'', margins doesn't control table alignment and can be used to specify the margin between the table and the surrounding text.
−
You can make the text to be wrapped around the table by making the table to ''float'' around the text instead of just aligning it.  
 
−
This can be achieved using the <code>float</code> CSS attribute, which can specify where the table floats to the right side or to the left.  
 
−
When using ''float'', margins doesn't control table alignment and can be used to specify the margin between the table and the surrounding text.
 
  
 
{| style="width:100%"
 
{| style="width:100%"
822行目: 798行目:
 
<pre>
 
<pre>
 
{| class="wikitable" style="float:right; margin-left: 10px;"
 
{| class="wikitable" style="float:right; margin-left: 10px;"
−
| オレンジ
+
| Orange
−
| りんご
+
| Apple
 
|-
 
|-
−
| パン
+
| Bread
−
| パイ
+
| Pie
 
|-
 
|-
−
| バター
+
| Butter
−
| アイスクリーム
+
| Ice cream
 
|}
 
|}
  
846行目: 822行目:
 
| style="padding: 5px;"|
 
| style="padding: 5px;"|
 
{| class="wikitable" style="float:right; margin-left: 10px;"
 
{| class="wikitable" style="float:right; margin-left: 10px;"
−
| オレンジ
+
| Orange
−
| りんご
+
| Apple
 
|-
 
|-
−
| パン
+
| Bread
−
| パイ
+
| Pie
 
|-
 
|-
−
| バター
+
| Butter
−
| アイスクリーム
+
| Ice cream
 
|}
 
|}
  
869行目: 845行目:
 
|}
 
|}
  
−
=== セルの内容の配置 ===
+
=== Cell contents alignment ===
  
−
The alignment of cell contents can be controlled with 2 different CSS properties: <code>text-align</code> and <code>vertical-align</code>.  
+
The alignment of cell contents can be controlled with 2 different CSS properties: <code>text-align</code> and <code>vertical-align</code>. <code>text-align</code> can be specified at the table, row or individual cells, while <code>vertical-align</code> only can be specified at individual rows or cells.
−
<code>text-align</code> can be specified at the table, row or individual cells, while <code>vertical-align</code> only can be specified at individual rows or cells.
 
  
 
{| style="width:100%"
 
{| style="width:100%"
914行目: 889行目:
 
==Caveats==
 
==Caveats==
  
−
===負の数値===
+
===Negative numbers===
−
If you start a cell on a new line with a negative number with a minus sign (or a parameter that evaluates to a negative number), your table can get broken, because the characters <code>|-</code> will be parsed as the wiki markup for table row, not table cell.  
+
If you start a cell on a new line with a negative number with a minus sign (or a parameter that evaluates to a negative number), your table can get broken, because the characters <code>|-</code> will be parsed as the wiki markup for table row, not table cell. To avoid this, insert a space before the value (<code>| -6</code>) or use in-line cell markup (<code>|| -6</code>).
−
To avoid this, insert a space before the value (<code>| -6</code>) or use in-line cell markup (<code>|| -6</code>).
 
  
−
===CSS と属性===
+
===CSS vs attributes===
 
Table borders specified through CSS rather than the border attribute will render incorrectly in a small subset of text browsers.
 
Table borders specified through CSS rather than the border attribute will render incorrectly in a small subset of text browsers.
  
 
===Common attributes for columns, column groups and row groups===
 
===Common attributes for columns, column groups and row groups===
−
The MediaWiki syntax for tables currently offers no support for specifying common attributes for columns (with the HTML element <code><nowiki><col /></nowiki></code>), column groups (HTML element <code><nowiki><colgroup></colgroup></nowiki></code>) and row groups (HTML elements <code><nowiki><thead></thead></nowiki></code>, <code><nowiki><tbody></tbody></nowiki><code> and <code><nowiki><tfoot></tfoot></nowiki></code>).  
+
The MediaWiki syntax for tables currently offers no support for specifying common attributes for columns (with the HTML element <code><nowiki><col /></nowiki></code>), column groups (HTML element <code><nowiki><colgroup></colgroup></nowiki></code>) and row groups (HTML elements <code><nowiki><thead></thead></nowiki></code>, <code><nowiki><tbody></tbody></nowiki><code> and <code><nowiki><tfoot></tfoot></nowiki></code>). Those standard HTML elements are not accepted even in their HTML or XHTML syntax.
−
Those standard HTML elements are not accepted even in their HTML or XHTML syntax.
 
  
 
All the rows and cells (header or data) of the table are rendered within a single implicit row group (HTML element <code><nowiki><tbody></tbody></nowiki></code>) without any attributes or styles.
 
All the rows and cells (header or data) of the table are rendered within a single implicit row group (HTML element <code><nowiki><tbody></tbody></nowiki></code>) without any attributes or styles.
  
−
==関連項目==
+
==注意事項==
−
* [[Special:MyLanguage/Help:Sorting#Sorting rows of a table|Sorting rows of a table]]
+
===負の値===
 +
新しい行の冒頭にマイナス記号を持つ負の数値（または負の数値を返す引数）があると、表が崩れてしまうことがあります。これは<code>|-</code>の記号が新しい表の列を開始するマークアップだからです。これを避けるためには、マイナス記号の前にスペースを挿入する（<code>| -6</code>）か、前のセルと同じ行に続けて <code>|| -6</code> のように記述してください。
 +
 
 +
==See also==
 +
* [[Help:Sorting#Sorting rows of a table|Sorting rows of a table]]
 
* {{mediawiki|meta:Help:Sorting}}
 
* {{mediawiki|meta:Help:Sorting}}
 
* {{mediawiki|wikipedia:Help:Tables}}
 
* {{mediawiki|wikipedia:Help:Tables}}
−
* [http://www.tablesgenerator.com/mediawiki_tables Easy tool that helps generating tables]
+
==Notes==
−
* {{mediawiki|wikipedia:Template:Horizontal TOC}}. Good for country lists in table format.
+
{{reflist}}
−
 
 
−
==注記==
 
−
 
 
−
<references/>
 
  
−
[[Category:Help{{#translation:}}|Tables]]
+
{{Languages}}
 +
[[Category:Help/ja|{{PAGENAME}}]]
 +
[[Category:Tables/ja]]

ひつじ小屋別館２代目への投稿はすべて、他の投稿者によって編集、変更、除去される場合があります。 自分が書いたものが他の人に容赦なく編集されるのを望まない場合は、ここに投稿しないでください。
また、投稿するのは、自分で書いたものか、パブリック ドメインまたはそれに類するフリーな資料からの複製であることを約束してください（詳細はひつじ小屋別館２代目:著作権を参照）。 著作権保護されている作品は、許諾なしに投稿しないでください！

このページを編集するには、下記の確認用の質問に回答してください (詳細):

取り消し | 編集の仕方 (新しいウィンドウで開きます)

このページで使用されているテンプレート:

「http://littleprincess.sakura.ne.jp/mediawiki/index.php?title=ヘルプ:Tables/ja」から取得