Wikipedia:表の作り方/改定案
![]() | この文書は草案です。まだ公式にリリースされていません。内容に関して「ノートページ」で議論を行っています。 |
編集案内 |
---|
記事内容のルール |
記事を執筆する |
記事のスタイルのルール |
この記事ではどのような場合に表にするべきなのかの方針と表の作成方法について説明します。
どんなときに表を作成するべきか?
編集データが予め行と列で表せる形式になっていれば、大抵の場合は表にするのが最もいいやり方です。例えば以下のようなものがあります。
- 数学の表
- かけ算九九の表
- 約数の表
- ルックアップ
- 情報のリスト
- 同じ単語を二つ以上の言語で表記する
- 人、誕生日、居住地リスト
- アーティスト、アルバム、発表年、レーベル
多くの場合、リストはリストとして残すのが一番です。表形式で書くと非常に編集し辛くなりそうな異常に長いリストを含む記事があります。表形式でリストを書き直す前に、行・列を使うことで情報がより明確に伝わるようになるかどうか考えて下さい。もしそうならば、おそらく表で書くのが良い選択なのでしょう。行・列を使うことによる明らかな利点がないならば、表を使うのはおそらく最善の方法ではないのでしょう。
また、表はレイアウトだけのために使うべきではありません。あなたが編集している情報が、表形式で書くべき性質のものでなければ、表形式では書かない方がよいでしょう。写真の下にキャプションを入れたり、リンクのグループを整理したり、その他見栄えを変えるだけのために、表は使わないようにして下さい。他のウィキペディアンにとって記事が編集しにくくなりますし、表の本来の使い方ではありません。
表がふさわしくないのはどんなときか
編集非常に長いリスト、または非常に短いリスト
編集リストが非常に長かったり、比較的シンプルな場合には、ウィキペディアの標準的なリスト書式を使って下さい。長いリストは、表の中に書かれると保守が大変になりますし、シンプルなリストは、行・列を使って書く必要もないでしょう。ここに、表の代わりにリストを使う方がよいと思われる例を挙げます。
表での表記(悪い例)
編集年 | アルバム |
---|---|
1993 | Janet |
1997 | Control |
1997 | The belbet robe |
2001 | All for you |
表を使用しない表記(良い例)
編集- 1993年 - Janet
- 1997年 - Control
- 1997年 - The belbet robe
- 2001年 - All for you
単純なテンプレートのレイアウト
編集単純なテンプレートは表を使わなくてもできます。
画像のレイアウト
編集多くの場合、記事中の画像の位置は、表レンダリングによって勝手に決められてしまいます。表は画面の左右を指定して配置できますので、画面の特定の場所に画像を表示させるために1セルだけの表を使う手法がよく知られています。これは、古いブラウザに対しては必要な回避策です。Cascading Style Sheets を適切に扱えないブラウザでも、きちんと表示できるようになるからです。しかし、現在使われているブラウザの大半は、スタイルシートをきちんと扱えます。ですから、現在は、div
要素を使って画像を配置する手法が推奨されています。
詳しくは、Wikipedia:画像利用の方針と en:Wikipedia:Extended image syntax を参照して下さい。
表を使用した表記(悪い例)
編集<table align="right" border="0" cellpadding="0"><tr><td>[[画像:Covalent.png]]</td></tr></table>
лорпрп \
表を使用しない表記(良い例)
編集[[画像:Covalent.png|right]]
見え方
編集どちらも、結果は本質的には同じです。画像は画面の右側に寄せられ、その周りに文章が配置されます。ここに、あなたのブラウザでどのように見えるかを示します。
表を使った場合に考えられる問題
編集表を正しく使っていても、面倒なことは他にも起こります。記事で表を使いたくなったら、以下の項目に該当しないか検討してみてください。
- 記事に表があると、自分以外の人には編集しにくくなる可能性があります。特にウィキペディアの初心者にとってはそうです。記事の編集になれていない人が「この記事を編集」をクリックしたとき、表示されるのが(その人にとっては)意味不明のHTMLコードで埋め尽くされたものだったら、編集する気が失せてしまうでしょう。表はできるだけシンプルに、そして表の要素は整頓しておくようにして下さい。編集する人が安心できるように、のようなコメント(記事の編集中にしか見えません)を入れることもできます。
<!-- この記事を編集するときには、表の部分を飛ばして、その後をご覧ください。 -->
- HTMLの経験が豊富な人にとっても、表がすべてのウェブブラウザで(或いは自分がチェックしていないウェブブラウザで)きちんと表示できているか確認するのは困難です。要素にちょっとした綴りのミスがあっただけで、表全体の表示が劇的に変わってしまうこともあります。あなた自身がどんなにそういうことを起こさない自信があったとしても、誰が編集するのかわからないのがウィキペディアです。繰り返しますが、表はできるだけシンプルに、要素を整頓しておいて、そういう問題ができるだけ起こらないようにしましょう。
- たくさんの情報が詰まった、大きな表は、解像度の低い画面では、右側が切れてしまって表示されない可能性があります。これは見る人があらかじめ警告されていれば、許されるでしょう(例:周期表 (表が巨大なバージョン))。もし非常に大きな表を作る必要が生じたら、大きな表がうまく利用できない環境の人用に、シンプルで小さい表もつくることも考えられます(例:周期表には、もっと小さい表のバージョンも用意されています)。
- 表の中に固定幅のテキスト(例えば、HTMLでいうと、
code
、pre
、tt
など)を使う場合、記事の幅が必要以上に横に広げられてしまいます。可能ならば、表の中では固定幅のテキストを使うのは避けましょう。そうすれば、文は自然に詰めて配置されます。同様の問題は、表の中に画像を入れた場合にも起こります(画像は通常固定幅として扱われてしまいます)。 - 表の各セルに大量の情報が収められていると、ブラウザによっては、表示上の問題が起こることがあります。とりわけ、大きな段落が入っていると、Lynxなどのテキストブラウザではフォーマットが乱れます。表を作る目的によっては、大きな段落を入れるのはやむを得ませんが、可能ならば、表のセルに入れる内容量は少なくするようにしてみてください。
表の書き方
編集以下にMediaWikiを使用した、表を作成するための文法について解説します。
早見表
編集{| | 表の始まり |
|+ | 表のタイトル(省略可) |
! | 列の見出し(省略可) !で書き始め、!!で各列の見出しを分けて書きます |
|- | 新しい行の始まり(1行目では省略可) |
! | 行の見出し(省略可) |
| | 表のセル 最初に(|)を書き、その後にセルの内容を記述します。続けて次の列の内容を記述する場合は(||)で各セルを分けます。 |
|} | 表の終わり |
簡単な例
編集{|class="wikitable" |+表のタイトル !見出し0!!列見出しA!!列見出しB!!列見出しC |- !行見出し1 |セル1A||セル1B||セル1C |- !行見出し2 |セル2A||セル2B||セル2C |}
と書くと、次のように表示されます。
見出し0 | 列見出しA | 列見出しB | 列見出しC |
---|---|---|---|
行見出し1 | セル1A | セル1B | セル1C |
行見出し2 | セル2A | セル2B | セル2C |
パイプ形式文法の概要
編集列ヘッダ 1 | 列ヘッダ 2 | 列ヘッダ 3 |
---|---|---|
行ヘッダ 1 | セル 2 | セル 3 |
行ヘッダ A | セル B | セル C |
HTMLテーブル文法も動作するにもかかわらず、特別なwikicodeはテーブルを作成するための簡易な方法として使うことができます。パイプ(バーティカルバー)コード機能は、HTML要素マークアップと正確に同じであり、そのため、HTMLテーブルコードの知識はパイプコードの理解を助けるでしょう。ショートカットは以下のようになります。
- 全てのテーブルは中カッコと縦棒文字(パイプ)によって構成されます。そのため、
{|
を、テーブルの開始に、|}
をテーブルの終了に使います。各々はその固有の行にある必要があります。
{| テーブルコードがここに来る |}
- オプションのテーブルのキャプションは、行の開始時に垂直バーとプラス記号"
|+
"を伴って含まれ、その後にキャプションが続きます。
{|
|+ キャプション
テーブルコードがここに来る
|}
{| |+ テーブルのキャプション |- セルコードがここに来る |- セルコードがここに来る |}
- バーで始まる、次の行中に、各々のテーブルcellのコードを入力します。
{| |+ テーブルのキャプション |- | セルコードがここに来る |- | 次の行中のセルがここに来る | 同じ行のさらなるセルがここに来る |}
- セルは改行か、新しいバーのどちらかか、同じ行中の、二重バー"||"で分離することができます。両者の結果は同じです。
{| |+ テーブルのキャプション |- |セル 1 || セル 2 || セル 3 |- |セル A |セル B |セル C |}
- もしもバーを使っているならば、最初のセルと考えているものは、実際、セルに対して適用される形式変更子であり、残りの"セル"は1つに併合されます。
{| border="1" |- |形式変更子 (非表示)|These all |(including the pipes)|go into |the first cell |- |}
これは、おそらく以下のような期待しているものとは異なります。
These all |(including the pipes)|go into |the first cell |
しかし、形式変更子は便利です。
{| border="1" |- |セル 1 (no modifier - not aligned) |- |align="right" |セル 2 (右寄せ) |- |}
セル 1 (変更子なし - not aligned) |
セル 2 (右寄せ) |
1つの行上に2つ以上の単体のパイプが置けないことを憶えておくこと!
- 列の見出しの行は"|"の代りに"!"を、"||"の代りに"!!"を使うことによって識別されます。ヘッダセルは、ブラウザに依存しますが、通常のセルとは異なって描画されます。それらはしばしばボールド体とセンタリングで表示されます。
{|
|+ テーブルのキャプション
! カラムヘッダ 1 !! カラムヘッダ 2 !! カラムヘッダ 3
|-
|セル 1 || セル 2 || セル 3
|-
|セル A
|セル B
|セル C
|}
- 行の最初のセルは"|"の代りに"!"を使って行を開始することによって、行ヘッダとして識別され、改行の後に引き続いてデータセルが開始されます。
{| |+ テーブルのキャプション ! カラムヘッダ 1 !! カラムヘッダ 2 !! カラムヘッダ 3 |- ! 行ヘッダ 1 | セル 2 || セル 3 |- ! 行ヘッダ A |セル B |セル C |}
- オプションのパラメータはセル、行または全テーブルの作用を変更できます。例えば、テーブルに対して境界を追加できます。
{| border="1"
|+ テーブルのキャプション
! カラムヘッダ 1 !! カラムヘッダ 2 !! カラムヘッダ 3
|-
! 行ヘッダ 1
| セル 2 || セル 3
|-
! 行ヘッダ A
|セル B
|セル C
|}
最後のテーブルは以下のように表示されます。
テーブルのキャプション カラムヘッダ 1 カラムヘッダ 2 カラムヘッダ 3 行ヘッダ 1 セル 2 セル 3 行ヘッダ A セル B セル C
テーブルパラメータとセルパラメータはHTML中では同じです([1]とTable (HTML)を参照)。しかし、 thead
、tbody
、tfoot
、colgroup
、とcol
要素は、現在MediaWikiではサポートされていません。
もしも、セルの内容が1つも無いとしても、テーブルは便利に使えます。例えば、セルの背景色はセルパラメータで変更でき、テーブルをm:Template talk:Square 8x8 pentomino exampleのようなダイアグラムにすることができます。テーブルのフォーム中の“画像”はアップロードされたイメージよりもより編集するのに便利です。
各々の行は他の行として同じ数のセルを持たなければならず、そのため、テーブル中のカラム数は一貫したままです。空白のセルのために、セルが表示されることを確実にする内容として、非ブレークスペース
を使います。セル中で見えるパイプを表示するためには、<nowiki>|</nowiki>か|を使います。
colspanとrowspanを使うセルはいくつかのカラムか行に渡ることができ、以下の例を参照。しかし、これはsortingが正しく動作しないという欠点を持ちます。
例
編集単純な例
編集以下の2つは同じ結果となります。各々のセル中の全部のテキストと各々の行中のセルの数をベースとしたスタイルを選びます。
Wiki マークアップ
{| | A | B |- | C | D |}
{| | A || B |- | C || D |}
上記コードの表示
A B C D
乗算表
編集Wiki マークアップ
{| class="wikitable" style="text-align:center" |+乗算表 |- ! × !! 1 !! 2 !! 3 |- ! 1 | 1 || 2 || 3 |- ! 2 | 2 || 4 || 6 |- ! 3 | 3 || 6 || 9 |- ! 4 | 4 || 8 || 12 |- ! 5 | 5 || 10 || 15 |}
上記コードの表示 (m:Help:User_styleを参照)
乗算表 × 1 2 3 1 1 2 3 2 2 4 6 3 3 6 9 4 4 8 12 5 5 10 15
色の使用
編集1つのセルのためにテキストと背景色の色を指定する方法は以下の通りです。
Wiki マークアップ
{| | style="background:red; color:white" | abc | def |}
上記コードの表示
abc def
他のパラメータのように、色は行全体又はテーブル全体に指定することもできます。テーブルの値を行のパラメータは上書きし、行のものは、セルのものが上書きします。
Wiki マークアップ
{| style="background:yellow; color:green" |- | abc || def || ghi |- style="background:red; color:white" | jkl || mno || pqr |- | stu || style="background:silver" | vwx || yz |}
上記コードの表示
abc def ghi jkl mno pqr stu vwx yz
テーブルを背景に埋め込ませるためには style="background:none"
を使用します。
(注意:style="background:inherit"
は、IE6を含むいくつかのブラウザでは動作しません)
幅と高さ
編集行の高さのように、テーブル全体の幅と高さは指定できます。カラムの幅を指定するために、それの任意のセルの幅を指定できます。もしも全てのカラムの幅が指定されていないか、全ての行の高さが指定されていないならば、そこには若干の曖昧さがあり、表示結果はブラウザに依存します。
Wiki マークアップ
{| style="width:75%; height:200px" border="1" |- | abc || def || ghi |- style="height:100px" | jkl || style="width:200px" |mno || pqr |- | stu || vwx || yz |}
上記コードの表示
abc def ghi jkl mno pqr stu vwx yz
style="
inline CSS"
はいくつかのブラウザでは影響がないことに注意。もしも互換性が重要ならば、より多くのブラウザ上で、width="75%"
のような、より古い同等の指定は動きます。
カラムの幅の指定
編集もしもカラム幅を強制的に指定したいならば、と言うよりは、カラムのセル中で最も幅が広いテキスト要素の幅を受け付けるならば、以下が例になります。テキストのラップアラウンドが強制されることに注意。
{| border="1" cellpadding="2" !width="50"|名前 !width="225"|効果 !width="225"|ゲームに登場 |- |[[モンスターボール]] || 普通のモンスターボール || 全てのバージョン |- |スーパーボール || モンスターボールより良い || 全てのバージョン |}
名前 効果 ゲームに登場 モンスターボール 普通のモンスターボール 全てのバージョン スーパーボール モンスターボールより良い 全てのバージョン
ヘッダなしにテーブル中でカラムの幅をセットするために、以下のように、各々のカラムの最初のセル中で幅を指定します。
{| border="1" cellpadding="2" |- |width="100pt"|このカラムは100ポイントの幅 |width="200pt"|このカラムは200ポイントの幅 |width="300pt"|このカラムは300ポイントの幅 |- |blah || blah || blah |}
このカラムは100ポイントの幅 このカラムは200ポイントの幅 このカラムは300ポイントの幅 blah blah blah
縦方向の配置
編集既定値ではテーブル中のデータは垂直方向では中央揃えされ、その結果は以下のような変わったレイアウトです。
Row heading A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. より短いテキストの断片。 Row heading A longer piece of text.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. より短いテキストの断片。
これを修正するために、行に対して valign="top" 属性を適用します(残念なことに、全ての単一の行に対して明示的に適用することは必要に見える)。以下は例になります。
{| border="1" cellpadding="2" |-valign="top" |width="10%"|'''Row heading''' |width="70%"|A longer piece of text. Lorem ipsum... |width="20%"|より短いテキストの断片。 |-valign="top" |'''Row heading''' |A longer piece of text. Lorem ipsum... |より短いテキストの断片。 |}
Row heading A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. より短いテキストの断片。 Row heading A longer piece of text.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. より短いテキストの断片。
位置決め
編集行中の全てのコンテンツとセル中のコンテンツと、テーブル自身の位置決めをすることができますが、テーブル中の全コンテンツの単一のパラメータはありません。m:Template talk:Table demoを参照。どんな状況でも、テーブルを配置するために"float"を使ってはいけません。これは、大きなフォントサイズの時にページの描画を壊します。
混合書式
編集ここにはより高度な例があり、テーブルをマークアップするために有効な追加のオプションを示します。しかし、それらをcolspanとrowspanと共に使うと、sortingは正しく動作しないことに注意してください。
それらの効果がどのようなものかを見るために固有のテーブル中でそれらの設定を動かしてみることができます。それらの一部のテクニックは、全てのケースにおいて適切かもしれません。例えば、色の付いた背景を追加できますが、それは全ての場合によい手法であるとは限りません。テーブル中でマークアップを相対的に単純に保つようにすることを憶えておきましょう。その記事を他の人々が編集できるようにも考慮します。この例は何ができるかという例を例示します。
Wiki マークアップ
{| border="1" cellpadding="5" cellspacing="0" align="center" |+'''テーブルの例''' |- ! style="background:#efefef;" | 最初のヘッダ ! colspan="2" style="background:#ffdead;" | 2番目のヘッダ |- | 左上 | | rowspan=2 style="border-bottom:3px solid grey;" valign="top" | 右端 |- | style="border-bottom:3px solid grey;" | 左下 | style="border-bottom:3px solid grey;" | 下の真ん中 |- | colspan="3" align="center" | {| border="0" |+''テーブル中のテーブル'' |- | align="center" width="150px" | [[Image:Wiki.png]] | align="center" width="150px" | [[Image:Wiki.png]] |- | align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;" | 2つのWikimediaロゴ |} |}
上記コードの表示
テーブルの例 最初のヘッダ 2番目のヘッダ 左上 右端
左下 左の真ん中
テーブル中のテーブル 2つのWikimediaロゴ
浮動テーブル
編集Wiki マークアップ
このパラグラフはテーブルの前にある。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... {| align="right" border="1" | 列1、行1 |rowspan="2"| 列2、行1(と2) | 列3、行1 |- | 列1、行2 | 列3、行2 |} 浮動テーブルが右にあることに注意。 このパラグラフはテーブルの後にある。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...
上記コードの表示
このパラグラフはテーブルの前にある。This paragraph is before the table. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...
列1、行1 列2、行1(と2) 列3、行1 列1、行2 列3、行2 浮動テーブルが右にあることに注意。
このパラグラフはテーブルの後にある。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...
入れ子になったテーブル
編集ここでは、別のテーブルのセル2の内側に入れ子になった(青の)1つのテーブルを表示します。 入れ子になったテーブルは新しい行上で開始されなければなりません。
Wiki マークアップ
{| border="1"
| α
| align="center" | セル2
{| border="2" style="background-color:#ABCDEF;"
| 入れ子の
|-
| テーブル
|}
| valign="bottom" | 元のテーブル
|}
上記コードの表示
α セル2
入れ子の テーブル 元のテーブル
COLSPANとROWSPANの使用の組み合わせ
編集Wiki マークアップ
{| border="1" cellpadding="5" cellspacing="0" |- ! カラム1 || カラム2 || カラム3 |- | rowspan="2"| A | colspan="2" align="center"| B |- | C <!-- column 1 occupied by cell A --> | D |- | E | rowspan="2" colspan="2" align="center"| F |- | G <!-- column 2+3 occupied by cell F --> |- | colspan="3" align="center"| H |}
上記コードの表示
カラム1 カラム2 カラム3 A B C D E F G H
GとFの下に他の行を得るために、セルGに対して rowspan="2"
をセルFに対してrowspan="3"
と一緒に使うことは動作しない。
なぜならば、全ての(暗黙の)セルは空であるべきだからです。同様に、それら全てのセルが空であれば、完全なカラムは表示されません。非空と空のセルの間の境界線も同様に表示されません(ブラウザに依存します)ので、ダミーの内容を含んでいる空のセルに埋めるために、
を使います。
テーブルのセンタリング
編集テーブルのセンタリングは行なえますが、それは"浮動"にはなりません。すなわち、テキストはどちらのサイドにも現れません。トリックは{| style="margin: 1em auto 1em auto" です。
Wiki マークアップ
{| class="wikitable" style="margin: 1em auto 1em auto" |+ '''セルは左寄せで、テーブルはセンタリング''' ! Duis || aute || irure |- | dolor || in reprehenderit || in voluptate velit |- | esse cillum dolore || eu fugiat nulla || pariatur. |}
上記コードの表示
セルは左寄せで、テーブルはセンタリング Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
パラメータの設定
編集セルの始めにおいて、1つのパイプが後に続いたパラメータを追加します。例としては、 width="300"| はそのセルを300ピクセルに設定します。1つ以上のパラメータを設定するために、各々の間をスペースで離します。
Wikiマークアップ
{| style="color:white" |- | bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2 || bgcolor="green"|cell3 |}
上記コードの表示
cell1 cell2 cell3
小数点の位置揃え
編集小数点の位置で数字を揃えるためには以下の手順で行ないます。
Wikiマークアップ
{| cellpadding="0" cellspacing="0" |align="right"| 432 || .1 |- |align="right"| 43 || .21 |- |align="right"| 4 || .321 |}
上記コードの表示
432 .1 43 .21 4 .321
もしも、数字のカラムがセルのパディングか、セルのスペーシングを伴ってテーブル中にあるならば、中央に見苦しい隙間無しで、小数点を引き続き整列することができます。テーブルを各々の数のセル中に埋め込み、そのカラム幅を指定します。埋め込んだテーブルのカラム幅はカラム中の各々のセルと同じにします(もしも、この方法を使っても、小数点が引き続きうまく整列されないならば、メインのテーブルのカラムは狭すぎるのでしょう。カラム幅を増加させるためにパラメータを追加します)。
Wikiマークアップ
{|border="1" cellpadding="4" cellspacing="2" | {|cellpadding="0" cellspacing="0" width="100%" |align="right" width="50%"| 432 ||width="50%"| .1 |} |- | {|cellpadding="0" cellspacing="0" width="100%" |align="right" width="50%"| 43 ||width="50%"| .21 |} |- | {|cellpadding="0" cellspacing="0" width="100%" |align="right" width="50%"| 4 ||width="50%"| .321 |} |}
上記コードの表示
432 .1
43 .21
4 .321
簡単な場合、テーブル機能を省くことができ、単純にスペースで行を開始し、数字の位置をスペースで調整します。
432.1 43.21 4.321
スタイルクラス
編集テーブルコードの最初の行の中で、"{|"のあと、スタイルを直接指定する代りに、CSSクラスを指定することもできます。このクラスのスタイルは、種々の方法で指定することができます。
- ソフトウェアそれ自身の中で、スキン毎(例として、整列可能なクラス)
- MediaWiki:Common.css中の1つのwikiの全ての利用者の集合的に(例としては、ここといくつかの他のプロジェクトにwikitableクラスがある)
- MediaWiki:Monobook.css中のような、スキン毎に分割。
- 1つのwiki上の利用者のサブページ中で個別に
- 個別に、しかし、利用所のローカルコンピュータ上で、全てのwebページ上にかかわるクラスのテーブルのために共同で。
テーブルパラメータを憶える代りに、{|
の後に、適切なスタイルクラスを含められます。これは一貫したテーブル形式を保つのを助け、問題を解決するか、1回だけそれを使う、全てのテーブルの見え方を拡張するためにクラスを1回で変更することができるようになります。例えば以下のようになります。
{| border="1" cellpadding="2" |+乗算表 |- ! × !! 1 !! 2 !! 3 |- ! 1 | 1 || 2 || 3 |- ! 2 | 2 || 4 || 6 |- ! 3 | 3 || 6 || 9 |- ! 4 | 4 || 8 || 12 |- ! 5 | 5 || 10 || 15 |} |
| |||||||||||||||||||||||||
becomes this: | ||||||||||||||||||||||||||
{| class="wikitable" |+乗算表 |- ! × !! 1 !! 2 !! 3 |- ! 1 | 1 || 2 || 3 |- ! 2 | 2 || 4 || 6 |- ! 3 | 3 || 6 || 9 |- ! 4 | 4 || 8 || 12 |- ! 5 | 5 || 10 || 15 |} |
|
単に、テーブルのためにインラインCSSを置き換えるには、class="wikitable"
とします。これは、沢山のtable.wikitable CSSスタイルルールを含むMediaWiki:Common.css 中のwikitableクラスによるものです。クラスと共にテーブルをマークしたとき、それらは全て1回だけ適用されます。もしも要求されるならば、追加のスタイルを追加してもよい。それらは、クラススタイルをベースとして使い、その上に構築することを認め、クラスのルールを上書きします。
Wiki マークアップ
{| class="wikitable" style="font-style:italic; font-size:120%; border:3px dashed red;" |+乗算表 |- ! × !! 1 !! 2 !! 3 |- ! 1 | 1 || 2 || 3 |- ! 2 | 2 || 4 || 6 |- ! 3 | 3 || 6 || 9 |- ! 4 | 4 || 8 || 12 |- ! 5 | 5 || 10 || 15 |}
上記コードの表示
乗算表 × 1 2 3 1 1 2 3 2 2 4 6 3 3 6 9 4 4 8 12 5 5 10 15
wikitable クラスの灰色の背景がそのテーブルに残っていて、ヘッダが引き続きボールド体でセンタリングされていることに注意。しかし、テキストのフォーマッテイングは、ローカルのスタイル文によって上書きされています。テーブル中の全てのテキストは、イタリックで標準の120%サイズになり、赤い点線の境界線によって、wikitableの境界は置き変わっています。
もちろん、この作業はインラインCSSをサポートしているブラウザのみであり、もしも、それが重要ならば、"font-size:120%"の代りに<big>
のようなXHTMLマークアップか、"font-style:italic"の代りに''text''
のようなWikiマークアップを使います。
整列
編集その他のテーブル文法
編集その他の形式の、Mediawikiがサポートするテーブル文法は以下の様になります。
- XHTML
- HTML と wiki <td> 文法 (使用しない)
全て、Mediawikiによってサポートされるものと有効なHTML出力を(現在)作成するものがここにありますが、パイプ文法が最もシンプルであり、HTMLに親しんでいる人にとってもそうでしょう。また、HTMLとwikiの<td>文法は、近い将来ブラウザのサポートを残したままであるというわけではありません(特にハンドヘルドのインターネットアクセス可能なデバイスにおいては)。
Table (HTML)とHTML element#Tablesを参照。しかし、thead
、tbody
、 tfoot
、colgroup
とcol
要素は、現在MediaWikiでサポートされていないことに注意。
テーブル文法の比較
編集XHTML | HTML & Wiki-td | Wiki-pipe | |||||||
---|---|---|---|---|---|---|---|---|---|
Table | <table></table> | <table></table> | {| |} | ||||||
Caption | <caption>caption</caption> | <caption>caption</caption> | |+ caption | ||||||
行 | <tr></tr> | <tr> | |- | ||||||
データセル |
<td>セル1</td> |
<td>セル1 |
| セル1 | cell2 | ||||||
データセル | <td>セル1</td> <td>セル2</td> <td>セル3</td> | <td>セル1 <td>セル2 <td>セル3 | | セル1 || セル2 || セル3 | ||||||
ヘッダセル | <th>ヘッダ部</th> | <th>ヘッダ部 | ! ヘッダ部 | ||||||
テーブルの例 |
| ||||||||
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> | <table> <tr> <td> 1 <td> 2 <tr> <td> 3 <td> 4 </table> | {| | 1 || 2 |- | 3 || 4 |} | |||||||
テーブルの例 |
| ||||||||
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> | <table> <tr> <td> 1 <td> 2 <tr> <td> 3 <td> 4 <tr> <td> 5 <td> 6 </table> | {| | 1 || 2 |- | 3 || 4 |- | 5 || 6 |} | |||||||
利点 |
|
|
| ||||||
欠点 |
|
|
| ||||||
XHTML | HTML & Wiki-td | Wiki-pipe |
生成されるHTMLに関するパイプ文法
編集Magnus Manskeによって開発されたパイプ文法はHTMLのためにパイプ(|)を代用します。ここ([2])には、htmlテーブルをパイプ文法でのテーブルに変換するオンラインスクリプトがあります。
それらのパイプは、コンテンツを分離するパラメータか、1つの行上でセルを分割するための ||
を使う時を除いて、新しい行の先頭になければなりません。パラメータはオプションです。
テーブル
編集table は
{| ''パラメータ'' |}
のように定義され、
<table ''パラメータ''>フォーマットされていないテキストがここに来る </table>
と同じです。
- 注意:
{|
とパラメータ
の間に空白を挿入しないと、最初のパラメータは無視されます。
行
編集<tr> タグは最初の行のために自動的に生成されます。新しい行を始めるためには、
|-
を使います。その結果は
<tr>
となります。パラメータは、以下のように追加できます。
|- params
その結果は
<tr params>
となります。
注意:
- <tr> タグは最初の<td>と同じように、自動的にオープンします。
- <tr> タグは<tr>と</table>と同じように自動的にクローズします。
セル
編集セルは以下のどれかのように生成されます。
|セル1 |セル2 |セル3
あるいは
|セル1||セル2||セル3
これらは両方とも下記と等しい。
<td>セル1</td><td>セル2</td><td>セル3</td>
すなわち "||" は "改行" + "|"と同じになります。
セル中のパラメータは以下のように使う。
|パラメータ|セル1||パラメータ|セル2||パラメータ|セル3
これは下記のような結果となります。
<td パラメータ>セル1</td> <td パラメータ>セル2</td> <td パラメータ>セル3</td>
ヘッダ
編集機能はTDと同じ方法ですが、最初の"|"の代りに"!"が使われるところが異なります。"!!"は"||"の代りに使うことができます。パラメータは"|"に引き続いて記述します。
!パラメータ|cell1
キャプション
編集A <caption> タグは以下によって生成されます。
|+ キャプション
これは以下を生成します。
<caption>キャプション</caption>
パラメータを使うこともできます。
|+ パラメータ|キャプション
これは以下を生成します。
<caption パラメータ>キャプション</caption>
テーブルを生成するテーブルコードの表示
編集コードボックスの内側でテーブルコードの簡単なwikiマークアップは以下で見ることができます。
{| border="5" cellspacing="5" cellpadding="2" | style="text-align: center;" | [[Image:gnome-system.png]] |- ! コンピュータ |- | プロセッサ処理速度: 1.8 GHz |}
上記のコードは以下のテーブルを生成/表示します。
コンピュータ |
---|
プロセッサ処理速度: 1.8 GHz |
以下のコードは、四角い箱の、青に色がつけられた、三次元の、上記のテーブルのコードボックスのコードそれ自身を生成し、webページと画面上に表示します。
<pre> {| border="5" cellspacing="5" cellpadding="2" | style="text-align: center;" | [[Image:gnome-system.png]] |- ! コンピュータ |- | プロセッサ処理速度: 1.8 GHz |} </pre> |
HTMLタグ<pre>は、上記のコードとコードボックスを表示するために使われます。
テーブルコードを表示するためのその他の代替品
編集ほとんどの場合、webブラウザのWindowsの幅よりもコードの行が長い場合、残りのコードを見るために、ビューワを右端(と左端にも)にスライドするために、スクロールバーが最下部に現れます。そのために、そのテキスト行中で、EOL (CR/LF)と言う、隠れた文字に到達するまで、<pre>タグの使用はコード行を手つかずのままにしておくことを引き起こします。しかし、コード全部を見るために左右にスライド又はスクロールすることは、多くの人にとって、しばしば不快です。この問題を解決するためには、 <p>、<tt>と <br /> HTMLタグを使い、それは<pre>タグを使うよりは好ましく、それはwebブラウザのWindowsの幅と同じに、全てのコードを揃えるために、閲覧するためにスクロールバーを左右に動かす必要がない。HTMLタグ<tt>...</tt>の内側にコードを置くことによって、コードは一定の幅のテキスト/フォントで表示され、(<pre> タグを使うように)可読性が向上します。HTMLタグ<br />は次の行のコードを表示(又は持ってくる)ために使われ、次の行から始まります。そのCSSスタイルプロパティと共に、HTMLタグ<p>はコードの周りの、青色の、三次元の四角い箱(Code box)を生成するために使われます(main.cssスタイルシートファイルからそれらのプロパティを取得します。HTMLタグ<pre> のように)。
長い行を持つテーブルコード例は以下の通りになります。
{| border="5" cellspacing="5" cellpadding="2"
| style="text-align: center;" | [[Image:gnome-system.png]]
|-
! Computer
|-
| style="color: yellow; background-color: green;" | Processor Speed: <span style="color: white;"> 1.8 GHz </span>
|}
以下が生成されます。
コンピュータ |
---|
プロセッサ処理速度: 1.8 GHz |
上記のテーブルのコードボックスは、自動wrapping機能が有効になっています。コード中の長い行(上から6行目)はコードボックス内でwrapされます。このコードボックスとコードは、編集ボックス中で以下のコードを使うことで表示できます。
<p style="padding: 1em; border: 1px dashed #2f6fab; color: Black; background-color: #f9f9f9; line-height: 1.1em;"> <tt>
<nowiki>{|</nowiki> border="5" cellspacing="5" cellpadding="2" <br />
| style="text-align: center;" | <nowiki>[[</nowiki>Image:gnome-system.png]] <br />
|- <br />
! コンピュータ<br />
|- <br />
| style="color: yellow; background-color: green;" | プロセッサ処理速度: <nowiki><span style="color: white;"></nowiki> 1.8 GHz <nowiki></span></nowiki> <br />
<nowiki>|}</nowiki> <br />
</tt> </p>
上記のコードを見ると、注意すべき点として、<nowiki>...</nowiki> タグが、テーブルの始め({|)、テーブルの終わり、(|})、イメージ表示の開始、([[)あるいはハイパーリンクなどに、wikiマークアップコードを無効にするために使われているのが分かります。全てのwiki&HTMLマークアップコードは、<nowiki>...</nowiki> タグの内側で、それらを囲むことによって、無効にする必要があります。もしも、それらのコードが他のテーブル中で表示されたならば、それぞれの、| (pipe) & ! (感嘆符)シンボルも <nowiki> タグ内で囲まれる必要があります。長い行はコードボックス内で、ブラウザのウィンドウの幅にあわせて自動的にwrapされることに注意。
代替として、各々の| (パイプシンボル)文字を| (HTML 10進エントリコード)に、各々の! (感嘆符)を! に、{(左中括弧)を{ に、}(右中括弧)を}に置き換えることができます。 同様に、<(小なり記号あるいは左アングルブラケット)は<数字エンティティコードか、<(HTMLシンボルエンティティコード)に置き換えできます。さらなるHTML十進又は16進数字エンティティコードについては、w:Windows Alt codesを参照のこと。 wikiイメージマークアップコードを表示するためには、 [付きの[(左大括弧)と[付きの](右大括弧)に置き換えることができます。文字を数字エンティティコードに置き換えるとき、それらの通常の機能を真に無効にするので、webページ上にそれらを表示することができます。
上記のパラグラフ中で説明された、数字エンティティコードを使うことで、以下のコードはもう一つの別の(よりよい)方法でコードボックスの上に表示することができます。長い行は、下記のコードボックス内で、ブラウザのWindowsの幅を拡張しないで、自動的にwrapされることに注意。 |
|
<p style="padding: 1em; border: 1px dashed #2f6fab; color: Black; background-color: #f9f9f9; line-height: 1.1em;"> <tt>
{| border="5" cellspacing="5" cellpadding="2" <br />
| style="text-align: center;" | [[Image:gnome-system.png]] <br />
|- <br />
! コンピュータ <br />
|- <br />
| style="color: yellow; background-color: green;" | プロセッサ処理速度: <span style="color: red;"> 1.8 GHz </span> <br />
|} <br />
</tt> </p>
Wikipedia:編集の仕方も参照。
例1
編集Wikipediaのコード
編集{| border="1" cellpadding="10" <!--table要素のオプション {|のあとにスペースが必要!--> |- style="text-align: center;" <!--tr要素のオプション--> !style="background-color: #cccccc;"|名前 <!--th要素とそのオプション--> !郵便番号 <!--オプションがない場合--> !住所!!電話 <!--1行に続けて書くときは!!とします--> |- |style="background-color: #cccccc;"|あきら <!--td要素とそのオプション--> |999-9901 |中町3-2 <!--オプションがない場合--> |22-2233 |- |style="background-color: #cccccc;"|いさく |999-9901 |北町1-2 |33-4422 |- |style="background-color: #cccccc;"|うたこ||999-9903||南町6-6||55-6633 <!--1行に続けて書くときは||とします--> |- |style="background-color: #cccccc;"|えり||999-9904||西町2-4-2||style="background-color: #ff8080;"|66-7236 <!--1行の途中のオプション--> |}
上記コードの表示
編集名前 | 郵便番号 | 住所 | 電話 |
---|---|---|---|
あきら | 999-9901 | 中町3-2 | 22-2233 |
いさく | 999-9901 | 北町1-2 | 33-4422 |
うたこ | 999-9903 | 南町6-6 | 55-6633 |
えり | 999-9904 | 西町2-4-2 | 66-7236 |
例2
編集Wikipediaのコード
編集{| border="1" cellpadding="5" cellspacing="0" style="margin-left: auto; margin-right: auto;" |+'''表の例''' |- ! style="background:#efefef;" | 1つめのヘッダ ! colspan="2" style="background-color: #ffdead;" | 2つめのヘッダ |- | 左上 | | rowspan="2" style="border-bottom:3px solid gray; vertical-align: top;" | 右脇 |- | style="border-bottom:3px solid gray;" | 左下 | style="border-bottom:3px solid gray;" | 中央下 |- | colspan="3" style="text-align: center;" | {| border="0" |+''表中表'' |- | style="text-align: center; width: 150px;" | [[画像:Wiki2logo.png]] | style="text-align: center; width: 150px;" | [[画像:Wiki2logo.png]] |- | colspan="2" style="border-color: red; border-width:1px 1px 2px; border-style: solid; text-align: center;" | ウィキペディアのロゴ2つ |} |}
上記コードの表示
編集CSSの利用
編集MediaWiki:Common.cssに、テーブルのCSSクラスが用意されています。テーブルの冒頭、「border="1"」や「cellpadding="2"」などと並列に、「class="wikitable"」とクラスを指定すると、「border-collapse: collapse」など、いくつかのスタイルを直接指定する手間が省け、複数のテーブルの見た目を容易に統一できます。
Wikipediaのコード
編集{| class="wikitable" border="1" cellpadding="5" cellspacing="0" style="margin: auto;" |+ class="wikitable"を使った表の例 |- ! style="background-color: #efefef;" | 1つめのヘッダ ! colspan="2" style="background-color: #ffdead;" | 2つめのヘッダ |- | 左上 | | rowspan="2" style="border-bottom:3px solid gray; vertical-align: top;" | 右脇 |- | style="border-bottom:3px solid gray;" | 左下 | style="border-bottom:3px solid gray;" | 中央下 |- | colspan="3" style="text-align: center;" | {| border="0" |+''表中表'' |- | style="text-align: center; width: 150px;" | [[画像:Wiki2logo.png]] | style="text-align: center; width: 150px;" | [[画像:Wiki2logo.png]] |- | colspan="2" style="border-color: red; border-width: 1px 1px 2px; border-style: solid; text-align: center;" | ウィキペディアのロゴ2つ |} |}
上記コードの表示
編集HTMLによる表の書き方
編集簡単な例
編集Wikipediaのコード
編集<table border="1" cellpadding="2"> <caption>かけ算の表</caption> <tr><th>×</th><th>1</th><th>2</th><th>3</th></tr> <tr><th>1</th><td>1</td><td>2</td><td>3</td></tr> <tr><th>2</th><td>2</td><td>4</td><td>6</td></tr> <tr><th>3</th><td>3</td><td>6</td><td>9</td></tr> <tr><th>4</th><td>4</td><td>8</td><td>12</td></tr> <tr><th>5</th><td>5</td><td>10</td><td>15</td></tr> </table>
上記コードの表示
編集× | 1 | 2 | 3 |
---|---|---|---|
1 | 1 | 2 | 3 |
2 | 2 | 4 | 6 |
3 | 3 | 6 | 9 |
4 | 4 | 8 | 12 |
5 | 5 | 10 | 15 |
この例で重要なことは以下の通りです。
- 表を書くにはまず
<table ...>
という開始タグではじめ、最後は必ず</table>
という終了タグで閉じる必要があります。 - Caption (キャプション)とは表のタイトルのことです。表についての説明を簡潔に書き、
<caption>
と</caption>
で挟み、<table>
の開始タグの次に書きます。 - 表の行(或いは横一列と言った方が通じるでしょう)を一括りにして書きます。行は
<tr>
ではじまり</tr>
で閉じる必要があります("tr"は、Table Rowの略で、行のことです)。 - 見出しのセル(ます)は中身が見出しの時に用います。
<th>
で開始し、</th>
で閉じます("th"は、Table Headingの略で、見出しのことです)。 - 後のセルには、表のデータが入ります。
<td>
で開始し、</td>
で閉じて下さい("td"は、Table Dataの略で、データのことです)。
<td>
と </td>
、または <th>
と </th>
で挟まれた要素のことを表計算ソフト等と同じく"セル"、と呼びます。2行分に跨るセルを作らない時には、すべての行に、他の行と同じ数のセルを作らなければなりません。何も書かないセルを作りたいときにはそのセルの中に
と書いて中身を埋めてください。これは HTML の用語で non-breaking-space と呼ばれている空欄を書くための記号です。これを埋め込まないと、一部のウェブブラウザではおかしな表示がされてしまいます。
表の表示がうまくいかないときは、すべてのHTMLの要素で開始タグと終了タグがきちんと対応しているかどうか確認してみてください。実際、すべてのタグをきちんと閉じなくても表示してしまうウェブブラウザもあります。きちんとできているかどうかは W3CのHTML確認サービス を利用するといいでしょう。確認ボックスに URI を貼付けると、テーブルのどこが悪いのかを表示してくれます(訳注:日本語ではWikipediaのHTMLのコードエラーがいろいろ表示されます)。このサービスは、表が大きくて複雑なとき、表をチェックするのに非常に役に立ちます。なおWikipedia (XHTML) では、すべての開始・終了タグは省略を許されません。
HTML に詳しいのであれば、thead
、tbody
、tfoot
、colgroup
といった要素もご存知かもしれませんが、これらはまだ Wikipediaでは使用することができません。
HTMLでの少し複雑な例
編集表を作るのに少しオプションを加えて、もう少し複雑な例を示します。これらをマスターすれば設定をいろいろ変えることで様々な表を作ることができるようになるでしょう。ただし、いつでもこれらのテクニックが適切、というわけではありません。例えば、背景の色を指定したりするのは、必ずしもいいアイデアとはいえません。表を作るときにはできるだけそのコードがシンプルに保てるよう注意を払ってください。他の人がその表を編集する可能性があることを忘れないでください。この例は、どんなことが可能なのかを示すものです。
Wikipediaのコード
編集<table border="1" cellpadding="5" cellspacing="0" style="margin-left: auto; margin-right: auto;"> <caption>'''表の例'''</caption> <tr> <th style="background-color: #efefef;">ヘッダ1</th> <th colspan="2" style="background-color: #ffdead;">ヘッダ2</th> </tr> <tr> <td>左上</td> <td> </td> <td rowspan="2" style="border-bottom:3px solid gray; vertical-align: top;">右上</td> </tr> <tr> <td style="border-bottom:3px solid gray;">左下</td> <td style="border-bottom:3px solid gray;">下中央</td> </tr> <tr> <td colspan="3" style="text-align: center;"> <table border="0"> <caption>''表内の表''</caption> <tr> <td style="text-align: center; width: 150px;">[[画像:Wiki2logo.png]]</td> <td style="text-align: center; width: 150px;">[[画像:Wiki2logo.png]]</td> </tr> <tr> <td colspan="2" style="border-color: red; border-width: 1px 1px 2px;border-style: solid; text-align: center;"> Wikipediaのロゴ2つ</td> </tr> </table> </td> </tr> </table>
あなたの環境ではどう見えますか?
編集表の具体例
編集シリーズもの
編集- プロジェクト:テンプレート集
- en:Wikipedia:Infobox - 英語版ウィキペディアのテンプレート集
個別記事
編集シンプルな表:
少し複雑な表:
複雑な表:
参照
編集外部リンク
編集- The Table Sampler - 表の様々な例