松永英明: 新しいページ: '以下、wikipedia:wikipedia:表の作り方のパクリ。閾ペディアことのはの記事を見栄えよく作るために、表は非常に便利なものです。...'

2007-02-14T13:29:39Z

新しいページ: '以下、wikipedia:wikipedia:表の作り方のパクリ。閾ペディアことのはの記事を見栄えよく作るために、表は非常に便利なものです。...'

新規ページ

以下、[[wikipedia:wikipedia:表の作り方]]のパクリ。

閾ペディアことのはの記事を見栄えよく作るために、表は非常に便利なものです。あなたが[[HyperText Markup Language|HTML]]を使えるのであれば、そのまま表のコードを記事に書き込めば表を作ることができます。しかし表のマークアップは少々複雑で、特に HTML に馴染みがない人には難しいものでもあります。記事の中には表を使うよりもシンプルに表記した方が分かりやすいような例もないとは言えません。この記事では、どのようにテーブルを作ったら良いのか、またどのような時に表にするのが相応しいのかについての説明を記します。

== 表の例 ==
=== 閾ペディアことのはのコード ===
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em; overflow:auto;">
<pre><nowiki><table border="1" cellpadding="2">
<caption>かけ算の表</caption>
<tr><th>&times;</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></nowiki></pre>
</div>

=== 上記コードの表示 ===
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em;">
<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></div>

この例で重要なことは以下の通りです。

* 表を書くにはまず <code><table ...></code> という開始タグではじめ、最後は必ず<code></table></code> という終了タグで閉じる必要があります。
* '''Caption''' （'''キャプション'''）とは表のタイトルのことです。表についての説明を簡潔に書き、<code><caption></code> と <code></caption></code>で挟み、<code><table></code> の開始タグの次に書きます。
* 表の'''行'''（或いは横一列と言った方が通じるでしょう）を一括りにして書きます。行は <code><tr></code> ではじまり<code></tr></code> で閉じる必要があります（"tr"は、Table Rowの略で、行のことです）。
* '''見出し'''のセル（ます）は中身が見出しの時に用います。<code><th></code> で開始し、<code></th></code> で閉じます（"th"は、Table Headingの略で、見出しのことです）。
* 後のセルには、表の'''データ'''が入ります。<code><td></code> で開始し、<code></td></code> で閉じて下さい（"td"は、Table Dataの略で、データのことです）。

<code><td></code> と <code></td></code>、または <code><th></code> と <code></th></code> で挟まれた要素のことを表計算ソフト等と同じく"セル"、と呼びます。2行分に跨るセルを作らない時には、すべての行に、他の行と同じ数のセルを作らなければなりません。何も書かないセルを作りたいときにはそのセルの中に <code>&nbsp;</code> と書いて中身を埋めてください。これは HTML の用語で non-breaking-space と呼ばれている空欄を書くための記号です。これを埋め込まないと、一部のウェブブラウザではおかしな表示がされてしまいます。

表の表示がうまくいかないときは、すべてのHTMLの要素で開始タグと終了タグがきちんと対応しているかどうか確認してみてください。実際、すべてのタグをきちんと閉じなくても表示してしまうウェブブラウザもあります。きちんとできているかどうかは [http://validator.w3.org/ W3CのHTML確認サービス] を利用するといいでしょう。確認ボックスに [[Uniform Resource Identifier|URI]] を貼付けると、テーブルのどこが悪いのかを表示してくれます（訳注：日本語では閾ペディアことのはのHTMLのコードエラーがいろいろ表示されます）。このサービスは、表が大きくて複雑なとき、表をチェックするのに非常に役に立ちます。なお閾ペディアことのは ([[XHTML]]) では、すべての開始・終了タグは省略を許されません。

HTML に詳しいのであれば、<code>thead</code>、<code>tbody</code>、<code>tfoot</code>、<code>colgroup</code> といった要素もご存知かもしれませんが、これらはまだ閾ペディアことのはでは使用することができません。

== 少し複雑な例 ==
表を作るのに少しオプションを加えて、もう少し複雑な例を示します。これらをマスターすれば設定をいろいろ変えることで様々な表を作ることができるようになるでしょう。ただし、いつでもこれらのテクニックが適切、というわけではありません。例えば、背景の色を指定したりするのは、必ずしもいいアイデアとはいえません。表を作るときにはできるだけそのコードがシンプルに保てるよう注意を払ってください。他の人がその表を編集する可能性があることを忘れないでください。この例は、どんなことが可能なのかを示すものです。

=== 閾ペディアことのはのコード ===
<div style="background-color: white; border: 1px solid black; padding: 1em; margin: 0 3em; overflow: auto;">
<pre><nowiki><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;">[[画像:Wiki2.png]]</td>
<td style="text-align: center; width: 150px;">[[画像:Wiki2.png]]</td>
</tr>
<tr>
<td colspan="2" style="border-color: red; border-width: 1px 1px 2px;border-style: solid; text-align: center;">
閾ペディアことのはのロゴ2つ</td>
</tr>
</table>
</td>
</tr>
</table>
</nowiki></pre>
</div>

=== あなたの環境ではどう見えますか？ ===
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em;">
<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;">[[画像:Wiki2.png]]</td>
<td style="text-align: center; width: 150px;">[[画像:Wiki2.png]]</td>
</tr>
<tr>
<td colspan="2" style="border-color: red; border-width: 1px 1px 2px; border-style: solid; text-align: center;">
閾ペディアことのはのロゴ2つ</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

== 別の方法 ==
HTMLをそのまま書くより少ない字数で書けます。
===例1===
==== 閾ペディアことのはのコード ====
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em; overflow:auto;">
<pre><nowiki>{| border="1" cellpadding="10" 
|- style="text-align: center;" 
!style="background-color: #cccccc;"|名前 
!郵便番号 
!住所!!電話 
|-
|style="background-color: #cccccc;"|あきら 
|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 
|-
|style="background-color: #cccccc;"|えり||999-9904||西町2-4-2||style="background-color: #ff8080;"|66-7236 
|}</nowiki></pre>
</div>

==== 上記コードの表示 ====
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em;">
{| border="1" cellpadding="10" 
|- style="text-align: center;" 
!style="background-color: #cccccc;"|名前 
!郵便番号 
!住所!!電話 
|-
|style="background-color: #cccccc;"|あきら 
|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 
|-
|style="background-color: #cccccc;"|えり||999-9904||西町2-4-2||style="background-color: #ff8080;"|66-7236 
|}
</div>

===例2===
==== 閾ペディアことのはのコード ====
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em; overflow:auto;">
<pre><nowiki>{| 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;" | [[画像:Wiki2.png]]
| style="text-align: center; width: 150px;" | [[画像:Wiki2.png]]
|-
| colspan="2" style="border-color: red; border-width:1px 1px 2px; border-style: solid; text-align: center;" |
閾ペディアことのはのロゴ2つ
|}
|}</nowiki></pre>
</div>

==== 上記コードの表示 ====
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em;">
{| 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;" | [[画像:Wiki2.png]]
| style="text-align: center; width: 150px;" | [[画像:Wiki2.png]]
|-
| colspan="2" style="border-color: red; border-width:1px 1px 2px; border-style: solid; text-align: center;" |
閾ペディアことのはのロゴ2つ
|}
|}
</div>

==CSSの利用==
[[MediaWiki:Common.css]]に、テーブルのための[[Cascading Style Sheets|CSS]]クラスが用意されています。テーブルの冒頭、「border="1"」や「cellpadding="2"」などと並列に、「class="wikitable"」とクラスを指定すると、「border-collapse: collapse」など、いくつかのスタイルを直接指定する手間が省け、複数のテーブルの見た目を容易に統一できます。"wikitable"は"prettytable"でも構いません（全く同じものです）。
===閾ペディアことのはのコード===
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em; overflow:auto;">
<pre>
{| 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;" | [[画像:Wiki2.png]]
| style="text-align: center; width: 150px;" | [[画像:Wiki2.png]]
|-
| colspan="2" style="border-color: red; border-width: 1px 1px 2px; border-style: solid; text-align: center;" |
閾ペディアことのはのロゴ2つ
|}
|}
</pre>
</div>

===上記コードの表示===
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em;">
{| 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;" | [[画像:Wiki2.png]]
| style="text-align: center; width: 150px;" | [[画像:Wiki2.png]]
|-
| colspan="2" style="border-color: red; border-width: 1px 1px 2px; border-style: solid; text-align: center;" |
閾ペディアことのはのロゴ2つ
|}
|}
</div>

== どんなときに表を作成するべきか？ ==
データが予め行と列で表せる形式になっていれば、大抵の場合は表にするのが最もいいやり方です。例えば以下のようなものがあります。

* 数学の表
** かけ算九九の表
** 約数の表
** ルックアップ
* 情報のリスト
** 同じ単語を二つ以上の言語で表記する
** 人、誕生日、居住地リスト
** アーティスト、アルバム、発表年、レーベル

多くの場合、リストはリストとして残すのが一番です。表形式で書くと非常に編集し辛くなりそうな異常に長いリストを含む記事があります。表形式でリストを書き直す前に、行・列を使うことで情報がより明確に伝わるようになるかどうか考えて下さい。もしそうならば、おそらく表で書くのが良い選択なのでしょう。行・列を使うことによる明らかな利点がないならば、表を使うのはおそらく最善の方法ではないのでしょう。

また、表はレイアウトだけのために使うべきではありません。あなたが編集している情報が、表形式で書くべき性質のものでなければ、表形式では書かない方がよいでしょう。写真の下にキャプションを入れたり、リンクのグループを整理したり、その他見栄えを変えるだけのために、表は使わないようにして下さい。他の閾ペディアことのはンにとって記事が編集しにくくなりますし、表の本来の使い方ではありません。

== 表がふさわしくないのはどんなときか ==
=== 非常に長いリスト、または非常に短いリスト ===
リストが非常に長かったり、比較的シンプルな場合には、閾ペディアことのはの標準的なリスト書式を使って下さい。長いリストは、表の中に書かれると保守が大変になりますし、シンプルなリストは、行・列を使って書く必要もないでしょう。ここに、表の代わりにリストを使う方がよいと思われる例を挙げます。

==== 表での表記（悪い例） ====
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em;">
<table border="1">
<tr><th>年</th><th>アルバム</th></tr>
<tr><td>1993</td><td>Janet</td></tr>
<tr><td>1997</td><td>Control</td></tr>
<tr><td>1997</td><td>The belbet robe</td></tr>
<tr><td>2001</td><td>All for you</td></tr>
</table>
</div>

==== 表を使用しない表記（良い例） ====
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em;">
* 1993年 - Janet
* 1997年 - Control
* 1997年 - The belbet robe
* 2001年 - All for you
</div>

=== 単純なテンプレートのレイアウト ===
単純なテンプレートは表を使わなくてもできます。
* 例：[{{fullurl:Template:日本の鉄道史|diff=9838994&oldid=9828860}} Template:日本の鉄道史]

=== 画像のレイアウト ===
多くの場合、記事中の画像の位置は、表レンダリングによって勝手に決められてしまいます。表は画面の左右を指定して配置できますので、画面の特定の場所に画像を表示させるために1セルだけの表を使う手法がよく知られています。これは、古いブラウザに対しては必要な回避策です。[[Cascading Style Sheets]] を適切に扱えないブラウザでも、きちんと表示できるようになるからです。しかし、現在使われているブラウザの大半は、スタイルシートをきちんと扱えます。ですから、現在は、<code>div</code> 要素を使って画像を配置する手法が推奨されています。

詳しくは、[[閾ペディアことのは:画像利用の方針]]と [[:en:閾ペディアことのは:Extended image syntax]] を参照して下さい。簡単な例:

==== 表を使用した表記（悪い例） ====
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em;">
<code><nowiki><table align="right" border="0" cellpadding="0"><tr><td>[[画像:Covalent.png]]</td></tr></table></nowiki></code>
</div>

==== 表を使用しない表記（良い例） ====
<div style="background: white; border: 1px solid black; padding: 1em;margin: 0 3em;">
<code><nowiki>[[画像:Covalent.png|right]]
</nowiki></code>
</div>

==== 見え方 ====
どちらも、結果は本質的には同じです。画像は画面の右側に寄せられ、その周りに文章が配置されます。ここに、あなたのブラウザでどのように見えるかを示します。

<div style="background: white; border: 1px solid black; padding: 1em; width: 70%;margin: 0 3em;">
<div style="float:right; margin: 0 0 1em 1em;">[[画像:Covalent.png]]</div>

共有結合は、どちらの原子も相手の原子から電子を完全に取り除くのに十分なエネルギーがないような、電気陰性度が近い原子同士でよく起こる。イオン結合が二つの金属原子あるいは金属原子と非金属原子間で起こるのに対し、共有結合は非金属原子同士でよく起こります。

共有結合は、イオン結合などの他の結合より強力な傾向があります。また、指向性のないクーロン力でつながれるイオン結合とは違い、共有結合は強い指向性があります。ですから、共有結合分子は、特定の結合角を持ち、比較的少数の特定の形を形成しがちです。
</div>

== 他に考えられる問題 ==
表を正しく使っていても、面倒なことは他にも起こります。記事で表を使いたくなったら、以下の項目に該当しないか検討してみてください。
* 記事に表があると、自分以外の人には編集しにくくなる可能性があります。特に閾ペディアことのはの初心者にとってはそうです。記事の編集になれていない人が「この記事を編集」をクリックしたとき、表示されるのが（その人にとっては）意味不明のHTMLコードで埋め尽くされたものだったら、編集する気が失せてしまうでしょう。表はできるだけシンプルに、そして表の要素は整頓しておくようにして下さい。編集する人が安心できるように、<div style="margin:0.5em;padding:1em;background:#eee;"></div>のようなコメント（記事の編集中にしか見えません）を入れることもできます。
* HTMLの経験が豊富な人にとっても、表がすべてのウェブブラウザで（或いは自分がチェックしていないウェブブラウザで）きちんと表示できているか確認するのは困難です。要素にちょっとした綴りのミスがあっただけで、表全体の表示が劇的に変わってしまうこともあります。あなた自身がどんなにそういうことを起こさない自信があったとしても、誰が編集するのかわからないのが閾ペディアことのはです。繰り返しますが、表はできるだけシンプルに、要素を整頓しておいて、そういう問題ができるだけ起こらないようにしましょう。
* たくさんの情報が詰まった、大きな表は、解像度の低い画面では、右側が切れてしまって表示されない可能性があります。これは見る人があらかじめ警告されていれば、許されるでしょう（例：[[:en:Periodic table (huge)|周期表 (表が巨大なバージョン)]]）。もし非常に大きな表を作る必要が生じたら、大きな表がうまく利用できない環境の人用に、シンプルで小さい表もつくることも考えられます（例：周期表には、[[:en:Periodic table|もっと小さい表のバージョン]]も用意されています）。
* 表の中に固定幅のテキスト（例えば、HTMLでいうと、<code>code</code>、<code>pre</code>、<code>tt</code>など）を使う場合、記事の幅が必要以上に横に広げられてしまいます。可能ならば、表の中では固定幅のテキストを使うのは避けましょう。そうすれば、文は自然に詰めて配置されます。同様の問題は、表の中に画像を入れた場合にも起こります（画像は通常固定幅として扱われてしまいます）。
* 表の各セルに大量の情報が収められていると、ブラウザによっては、表示上の問題が起こることがあります。とりわけ、大きな段落が入っていると、[[Lynx (Webブラウザ)|Lynx]]などのテキストブラウザではフォーマットが乱れます。表を作る目的によっては、大きな段落を入れるのはやむを得ませんが、可能ならば、表のセルに入れる内容量は少なくするようにしてみてください。

== 表の具体例 ==
=== シリーズもの ===
*[[wikipedia:wikipedia:ウィキプロジェクトテンプレート集]]
**[[wikipedia:wikipedia:ウィキプロジェクト生物]]
**[[wikipedia:wikipedia:ウィキプロジェクト国]]
**[[wikipedia:wikipedia:ウィキプロジェクト日本の市町村]]
**[[wikipedia:wikipedia:ウィキプロジェクト山]]
**[[wikipedia:wikipedia:ウィキプロジェクト河川]]
**[[wikipedia:wikipedia:ウィキプロジェクト天体]]
**[[wikipedia:ノート:イタリア共和国の州]]
*[[wikipedia:en:wikipedia:Infobox]] - 英語版wikipedia:wikipediaのテンプレート集

*[[wikipedia:将棋]]、[[wikipedia:玉将]]、[[wikipedia:飛車]]、[[wikipedia:角行]]、[[wikipedia:金将]]……
*[[wikipedia:麻雀]]、[[wikipedia:麻雀牌]]、[[wikipedia:麻雀の得点計算]]
*[[wikipedia:365日]][[wikipedia:1月]]……

=== 個別記事 ===
シンプルな表：
*[[wikipedia:戸籍]]、[[wikipedia:モールス信号]]

少し複雑な表：
*[[wikipedia:九星]]、[[wikipedia:ラテン語の文法]]、[[wikipedia:日本海海戦]]、[[wikipedia:年表]]

複雑な表：
*[[wikipedia:周期表]]
*[[wikipedia:国際音声記号]]
*[[wikipedia:加茂郡 (岐阜県)]]

== 外部リンク ==
*[http://wp.netscape.com/assist/net_sites/table_sample.html The Table Sampler] - 表の様々な例

[[Category:スタイルガイドライン|ひようのつくりかた]]
[[Category:閾ペディアことのは how-to|ひようのつくりかた]]

閾ペディアことのは:表の作り方 - 版の履歴

松永英明: 新しいページ: '以下、wikipedia:wikipedia:表の作り方のパクリ。 閾ペディアことのはの記事を見栄えよく作るために、表は非常に便利なものです。...'

松永英明: 新しいページ: '以下、wikipedia:wikipedia:表の作り方のパクリ。閾ペディアことのはの記事を見栄えよく作るために、表は非常に便利なものです。...'