Help:表の作り方
[Wikipedia|▼Menu]
各種の記号は必ずラインの先頭に書かねばならず、空白などを手前に入れてはいけません。

{。で開始し、 |} で終了するまでがひとつの表になります。開始記号と表の内容、終了記号はそれぞれ独立したラインに書く必要があります。これは <table></table> に相当します。{。|+ (パイプとプラス記号)に続けて書いた内容は、表のタイトルになります。これは省略可能です。 <caption></caption> に相当します。表は、行をひとつの単位として記述します。 |- (パイプとマイナス記号)だけを独立したラインに記述すると、そこから新しい行を開始します。表中最初の行に限って、 |- を省略することができます。 <tr> に相当します。各行は、表の最小構成要素であるセルを1個以上含みます。セルは |(パイプ1個)で開始し、続けて同じラインにセルの内容を記述します。 <td> に相当します。{||+ 表タイトル|-。セル 1|-。セル 2|}

1行にセルを2個以上含める場合は、新しいラインに記述するか、既存のセルと同じラインに続けて |。(パイプ2個)で区切って次のセルの内容を記述します。以下の2つの行の表示結果は全く同じになります。{||+ 表タイトル|-。セル 1。セル 2。セル 3|-。セル 1 |。セル 2 |。セル 3|}

パイプの代わりに ! (感嘆符)を使うことで、見出しセルを記述できます。使用するブラウザにもよりますが大抵はセル内でセンタリングされ、太字で表示されます。 ! で始まるラインに続けて書いたセルはすべて見出しセルとして扱われるので、通常のセルは新しいラインから書く必要があります。見出しセル同士の区切りは !! でも |。でも可能ですが、分かりやすさのために !! を使用した方がいいでしょう。 <th> に相当します。{||+ 表タイトル|-! 列見出し 1?!! 列見出し 2?!! 列見出し 3|-! 行見出し 1。セル 1-2。セル 1-3|-! 行見出し 2。セル 2-2 |。セル 2-3|}

最後の例は、以下のように表示されます。表タイトル列見出し 1列見出し 2列見出し 3
行見出し 1セル 1-2セル 1-3
行見出し 2セル 2-2セル 2-3

この例は必要最低限の記述しかしていないので、見た目が寂しいかもしれません。次の節で解説するパラメータを指定することにより、罫線など見た目を調整することが可能になります。
パラメータ

表全体、タイトル、各行、各セルにはパラメータを記述することができます。パラメータの記述により罫線や背景色などを変更できます。
表全体・行
開始記号に続けてパラメータを記述します。
タイトル・セル・見出しセル
開始記号の後にパラメータを記述し、 。(パイプ1個)で区切って内容を記述します。{。(表全体のパラメータ)|+ (タイトルのパラメータ) 。タイトル|- (行のパラメータ)! (見出しセルのパラメータ) 。見出し。(セル A のパラメータ) 。セル A |。(セル B のパラメータ) 。セル B|}

パラメータはHTML要素の属性に対応し、例えば表全体に対する指定 {。style="color:red;" ... |} は <table style="color:red;"> ... </table> として出力されます。

一部を除いて、ほとんどのパラメータはセルの結合(後述)と style 属性にインライン CSS で記述することになります。より詳しい解説は専門書や入門サイトなどに譲り、ここでは単純なものやよく使われるものに限って解説します。
罫線

テーブル全体に罫線を表示するのはとても簡単です。表全体のパラメータに、{。class="wikitable"

と指定するだけです。先の例に適用すると、以下のように表示されます。

表タイトル列見出し 1列見出し 2列見出し 3
行見出し 1セル 1-2セル 1-3
行見出し 2セル 2-2セル 2-3

別の方法として border 属性を使用することができます。これはスタイルシートを理解しないブラウザで罫線を表示するための方法です。ただし、日本語版ウィキペディアでは、スタイルシートを理解しないブラウザに対応するためのガイドラインはありません。原則としては上記指定を用いて外観を統一してください[注 1][注 2]

ウィキマークアップ実際の表示
{。border="1"

表タイトル列見出し 1列見出し 2列見出し 3
行見出し 1セル 1-2セル 1-3
行見出し 2セル 2-2セル 2-3

また、表全体の罫線を非表示にする場合は、何も指定する必要はありません。

ウィキマークアップ実際の表示
{|

表タイトル列見出し 1列見出し 2列見出し 3
行見出し 1セル 1-2セル 1-3
行見出し 2セル 2-2セル 2-3

表の一部にだけ罫線が必要な場合は、上記のように罫線を非表示にし、個々のセルの境界線を CSS で指定します。本ページ「#その他の CSS の利用」の節を参照してください。
セルの結合

セルの一部を結合して1つのセルのように扱うには、セルのパラメータに rowspan 属性または colspan 属性を指定します。

ウィキマークアップ実際の表示
{。class="wikitable" style="text-align:center;"|-! |。列1 |。列2 |。列3|-。'''行 1'''。rowspan="2" 。A。colspan="2" 。B|-。'''行 2'''。D |-。'''行 3'''。E。rowspan="2" colspan="2" 。F|-。'''行 4'''。'''行 5'''。colspan="3" 。H|}

列1列2列3
行 1AB
行 2CD
行 3EF
行 4G
行 5H

rowspan 属性を指定するとセルを縦に結合します。 colspan 属性を指定するとセルを横に結合します。

rowspan 属性、 colspan 属性ともに属性値を指定する事により指定された個数のセルを結合します。
幅と高さの調整

表全体の幅を指定するには、表全体のパラメータに CSS の width プロパティを設定します。
ウィキマークアップ
{。class="wikitable" style="width:100%"|+ 幅 100% の表。セル1 |。セル2 |。セル3|}{。class="wikitable" style="width:80%;"|+ 幅 80% の表。セル1 |。セル2 |。セル3|}<ref(?: name="(.*?)")?>((?:.|\n)*?)<\/ref>{。class="wikitable" style="width:50%;"|+ 幅 50% の表。セル1 |。セル2 |。セル3|}
実際の表示

幅 100% の表セル1セル2セル3

幅 80% の表セル1セル2セル3

幅 50% の表セル1セル2セル3

列の幅を個別に指定するには、セルのパラメータにやはり width プロパティを設定します。1箇所で設定すれば、他の行の同じ列にも適用されます。
ウィキマークアップ
{。class="wikitable" style="width:80%;"|+ 表全体の幅は 80%。style="width:50%;" 。style="width:10em;" 。幅 10em のセル。幅を指定しないセル|}
実際の表示

表全体の幅は 80%幅 50% のセル幅 10em のセル幅を指定しないセル

幅を指定するもうひとつの方法に width 属性がありましたが、セルに対する width 属性は廃止されました[注 3]。インライン CSS の width プロパティで置き換える必要があります。

表の左右の余白の幅を指定することで間接的に表の幅を指定する方法もあります。その場合は、 div 要素を用います。表の幅とは関係なく単に余白を設けたい場合や、左右に空けたスペースに記事などを入れたい場合は#表の配置を参照してください。
ウィキマークアップ
class="wikitable" style="width:100%"|+ 左に 4em 、右に 2em の余白を設け、残り全部が表全体の幅。style="width:50%;" 。style="width:10em;" 。幅 10em のセル。幅を指定しないセル|}</div><div style="text-align:right">元のテキストエリアの右端→</div>
実際の表示

←元のテキストエリアの左端

左に 4em 、右に 2em の余白を設け、残り全部が表全体の幅幅 50% のセル幅 10em のセル幅を指定しないセル
元のテキストエリアの右端→

表の高さを指定するには CSS の height プロパティ(line-height プロパティ)を設定します。表全体および行に対する設定が可能ですが列の幅と違い折り返しの発生などで行や表全体の高さは動的に変化するので、あえて設定することはあまりありません。


次ページ
記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:44 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef