Recent changes Random page
GAMING
more wikis
 
Gaming
Entertainment
Science Fiction
Biggest wikis
Hobbies
Music
その他

Help:テーブル

出典: Wikia

テーブルは、データを表示したり、ウィキア上でページをボックス上に作るのに使われます。

Help:HTMLのテーブルタグは現在でもメディアウィキでサポートされているものもありますが、廃止が確約されているわけでもありません。このため、このページで述べられているウィキ文法に従った利用が推奨されます。

ウィキア上でテーブルの文法を使わずにshared templatesを使ってテーブルを作ることもできます。w:Template talk:Topの例を御覧ください。

目次

[編集] 文法

  XHTML Wiki syntax
Table <table></table>
{| params 
|}
キャプション <caption></caption>
|+ キャプション
<tr></tr>
|- params 
データのセル <td>cell1</td>

<td>cell2</td>

| セル1
| セル2
データのセル <td>セル1</td> <td>セル2</td> <td>セル3</td>
|セル1||セル2||セル3
ヘッダのセル <th></th>
! ヘッダ

[編集] テーブルのサンプル

1 2
3 4
XTML Wiki syntax
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>
{| 
| 1 || 2
|- 
| 3 || 4
|}


[編集] 注意点

  • テーブル全体は{|から始まって|}で終わることが要求されます。
  • キャプションは、テーブルについて記述する簡単な方法で、{|の後の|+を含む行で利用できます。
  • テーブルの列は、テーブル内でセルのグループを作るものです。列のひとつは、|-で始まって、次の列で終わります。
  • テーブルヘッダは、ヘッダとなるセルで、太字で表示されます。ヘッダは、!で始まります。ただし、パラメータがあると、|のあるセルと現在のコンテンツが分離するということには、注意してください。
  • テーブルデータのセルは、テーブルの残りを構成するものです。セルのひとつは、|||ではじまり、次のセルで終わります。

それぞれの列は、他の列のセルと同じ数だけなければいけせん。そのため、テーブルの行の数は、(複数の行や列が無い限り)全て一致することになります。ただし、ここでは述べません。空のセルを作るには、普通にセルを表示させるのと同じように、改行せずに空白(&nbsp;)を用いてください。


[編集] 複雑なレイアウト

この込み入った例は、テーブル作成の際のオプションを使っています。その効果を使うのに、テーブル内にオプションを使うこともできます。これらのテクニックが全ての場合において適切とは限りません。例えば、背景に色を塗ったりするようなことは、必ずしも有効ではありません。テーブルは出来るだけシンプルにしましょう。—他の人もそのページを編集するということを考慮してください。


レイアウト例
ヘッダ1 ヘッダ2
上右   右側
左下 左真ん中
Image:Wiki.png Image:Wiki.png
二重都市へようこそ

テーブルのコードは、テーブルの構造を反映します。ひとつのテーブル内で複雑なレイアウトが可能でも、一般的には推奨できません。単純にするためには、小さな単位にテーブルを分割することが有効です。

[編集] 分割

テーブルを入れ子にする。

layout code
レイアウト例
ヘッダ1 ヘッダ2
左上   右側
左下 左真ん中
テーブル内テーブル
Image:Wiki.png Image:Wiki.png
  {| border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse;" width="330"
  |+'''レイアウト例'''
  |-
  ! ヘッダ1
  ! colspan="2" | ヘッダ2
  |-
  | 左上
  |  
  | rowspan=2 | 右側
  |-
  | | 左下
  | | 左真ん中
  |-
  | colspan="3" align="center" |
  {| border="0"
  |+''テーブル内テーブル''
  |-
  || [[Image:Wiki.png]]
  || [[Image:Wiki.png]]
  |}
  |}

テーブルを分割した方が良い例:

layout code
レイアウト例
ヘッダ1 ヘッダ2
左上   右側
左下 左真ん中
Image:Wiki.png Image:Wiki.png
  {| border="1" cellpadding="5" cellspacing="0" width="330" style="border-collapse:collapse;"
  |+'''レイアウト例'''
  |-
  ! ヘッダ1
  ! colspan="2" | ヘッダ2
  |-
  | 左上
  |  
  | rowspan=2 | 右側
  |-
  | | 左下
  | | 左真ん中
  |}

  {| style="border:1px solid; border-top:none; width:330px;"
  |-
  || [[Image:Wiki.png]]
  || [[Image:Wiki.png]]
  |}

[編集] 簡単なボックスにテーブルを使わない

テーブルのコードは、テーブルだけに使ってください。簡単なボックスには、<div></div>を使ってください。例えば、以下のようなものは、このコードで代用できます。

layout code
Image:Wiki.png Image:Wiki.png

二重都市へようこそ

  {| style="border:1px solid; border-top:none; width:330px;"
  |-
  || [[Image:Wiki.png]]
  || [[Image:Wiki.png]]
  |-
  | align="center" colspan="2" style="border-top:1px solid red;"|
  二重都市へようこそ
  |}

こんな風にできます。

layout code
Image:Wiki.png Image:Wiki.png
二重都市へようこそ
  {| style="border:1px solid; border-top:none; width:330px;"
  |-
  || [[Image:Wiki.png]]
  || [[Image:Wiki.png]]
  |-
  | align="center" colspan="2"|
  <div style="border:1px solid red;">二重都市へようこそ</div>
  |}

[編集] 完全なコード

レイアウト例
First header Second header
左上   右側
左下 左真ん中
Image:Wiki.png Image:Wiki.png
二重都市へようこそ
{| border="1" cellpadding="5" cellspacing="0" width="330" style="border-collapse:collapse;"
|+'''レイアウト例'''
|-
! style="background:#efefef;" | ヘッダ1
! colspan="2" style="background:#ffdead;" | ヘッダ2
|-
| 左上
|  
| rowspan=2 | 右側
|-
| | 左下
| | 左真ん中
|}

{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[Image:Wiki.png]]
|| [[Image:Wiki.png]]
|-
| align="center" colspan="2"|
<div style="border:1px solid red;">二重都市へようこそ</div>
|}

[編集] 参考


[編集] External links

.