ウィキボヤージュ

ヘルプ:表

ここでは、Wikivoyageにおける表について解説します。

基本的な作り方

編集

日本語版Wikivoyageを含めたw:MediaWikiを使用しているサイトでは、パイプ構文によって表を書くことができます。これはHTML5で書くよりも簡単で便利ですが、中にテンプレートや条件文を書く際に、表のものではないパイプ記号を表のものであると認識されて予知しない表示になることがあるなど欠点もあります。その際には、HTML5で表を書いた方が良いですが、そのようなことがない場合、基本的にはパイプ構文で書いてください。

入力内容 
{| 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]

右は編集ツールバーです。これは、ページを編集する際に上に出るものです。ここにある のアイコンをクリックすることで、編集ボックスのカーソルがおいてある所に表を挿入することができます。

パイプ構文

編集

ここでは、パイプ構文による表の書き方を紹介します。パイプ構文は実際にはHTMLを簡略化しただけです。

記号 意味 備考 HTML（参考）
{| 表の記述を開始する <table>
|+ 表のタイトル （省略可） <caption>
|- 新しい行を開始する （1行目では省略可） <tr>
| 通常のセルの開始。|| で区切って、同じラインに次の列のセルを記述することができる <td>
! 見出しセルの開始。!! または || で区切って、同じラインに次の列の見出しセルを記述することができる （省略可） <th>
|} 表の記述を終了する </table>

以下では、「行」は表の横一列、「列」は表の縦一列を指します。構文上、改行記号で区切られる「行」は「ライン」と表記します。

パイプ構文で表を書く際、各種の記号は必ずラインの先頭に書かなくてはなりません。

表は{|で始まり、|}で終わります。

表のタイトルは|+で始まるラインに書きます。これは省略可能です。

表は、行を横に分けることによって構成します。つまり行が1つの単位となっているわけです。|-をラインの初めに書くと、新しい行ができます。各行は、セルを必ず1個以上含みますのでセルを作りましょう。|を書くと新しいセルができます。1行にセルを複数作る場合、改行して|を書くか前のセルに続けて||とパイプ記号を2回書くかの2通りがあります。

入力内容 
{|
|+ 表のタイトル
|-
| セル1A || セル1B || セル1C
|-
| セル2A || セル2B || セル2C
|}
表示結果
表のタイトル
セル1A セル1B セル1C
セル2A セル2B セル2C

パイプの代わりに! (エクスクラメーションマーク) を使用すると見出しセルになります。太字で表示されるなど、目立ちやすくなります。見出しセルを2続けたい場合、通常のセルと同じ要領で!!と!を2つ続けます。

入力内容 
{|
|+ 表のタイトル
! 見出し0 !! 列見出しA !! 列見出しB !! 列見出しC
|-
! 行見出し1
| セル1A || セル1B || セル1C
|-
! 行見出し2
| セル2A || セル2B || セル2C
|}
表示結果
表のタイトル
見出し0 列見出しA 列見出しB 列見出しC
行見出し1 セル1A セル1B セル1C
行見出し2 セル2A セル2B セル2C

パラメータ

編集

表全体と各行・各セルにはパラメータを指定することが可能です。記述する場所は以下のとおりです。 

{| 表全体のパラメータ
|+ タイトルのパラメータ | タイトル
|- 行のパラメータ
! 見出しセル全体のパラメータ | 見出しA || 見出しBのパラメータ | 見出しB
| セル A のパラメータ | セル A || セル B のパラメータ| セル B
|}

パラメータには、HTMLにおける属性を記述することができます。記述方法もHTMLと同じで、xxx="yyy"の形です。Help:CSSなどを参照するといいかも知れません。

枠線をつける

枠線をつけるのは極めて簡単です。表全体に影響するパラメータの部分 (つまり{|の後の部分) にclass="wikitable"と記入します。実際にやってみると以下のようになります :

入力内容 
{| 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

ただし、これではデフォルトの枠線とスタイルしかつかず、自分の思う色や太さにかえられません。その場合は、HTMLのborder属性を使用することで、カスタマイズが可能です。ただし、通常特に理由がない場合、class="wikitable"の外観に統一してください。

border属性にボーダーのスタイルと太さと色を入力することで枠ができます。スタイルには以下の種類があります。

  • solid - 線1本
  • double - 線2本
  • dashed - 破線
  • dotted - 点線
  • groove - くぼんだ線
  • ridge - 盛り上がった線
  • inset -
  • outset -

太さはem、pxまたはexの単位をつけて指定するか、thin、medium、thickから選ぶことができます。thinは細い、thickは太い、mediumは普通です。 色はCSSの#から始まる数字で指定します。

入力内容 
{| style="border: 1em solid #000000;"
|+ 表のタイトル
! 見出し0 !! 列見出しA !! 列見出しB !! 列見出しC
|-
! 行見出し1
| セル1A || セル1B || セル1C
|-
! 行見出し2
| セル2A || セル2B || セル2C
|}
表示結果
表のタイトル
見出し0 列見出しA 列見出しB 列見出しC
行見出し1 セル1A セル1B セル1C
行見出し2 セル2A セル2B セル2C
セルの結合

セルを結合するには、結合したいセルに対してrowspan属性またはcolspan属性を指定します。rowspan属性は縦に、colspan属性は横にそれぞれセルを結合します。

入力内容 表示結果 
{| class="wikitable"
|-
! || 列1 || 列2 || 列3
|-
| '''行1'''
| rowspan="2" | A
| colspan="2" | B
|-
| '''行2'''
| C <!-- 列1 はセルAに塞がれている -->
| D 
|-
| '''行3'''
| E
| rowspan="2" colspan="2" | F
|-
| '''行4'''
| G <!-- 列2と3はセルFに塞がれている -->
|-
| '''行5'''
| colspan="3" | H
|}
列1 列2 列3
行1 A B
行2 C D
行3 E F
行4 G
行5 H
表の形の修正

表はしばしばとても小さくなったり歪な形をしたりします。これを修正するには、CSSのwidthプロパティとheightプロパティを使用します。widthプロパティは幅を、heightプロパティは高さをそれぞれ指定できます。主な指定の方法は以下のとおりです。

  • その表の上位要素の何%かで指定する。つまり、パーセンテージで表示する。
  • emなどの単位をつけて指定する。

この指定方法はwidthプロパティとheightプロパティのどちらにも有用です。

入力内容 
{| class="wikitable" style="width:100%;"
|+ 幅 100% の表
| セル1 || セル2 || セル3
|}
{| class="wikitable" style="width:80%;"
|+ 幅 80% の表
| セル1 || セル2 || セル3
|}
{| class="wikitable" style="width:50%;"
|+ 幅 50% の表
| セル1 || セル2 || セル3
|}
表示結果
幅 100% の表
セル1 セル2 セル3
幅 80% の表
セル1 セル2 セル3
幅 50% の表
セル1 セル2 セル3

しかし、これでは表全体の幅や高さは変えられますが、個々のセルごとの長さが指定できません。個々のセルごとに指定したい場合、この表にある「セル A のパラメータ」や「セル B のパラメータ」にwidthプロパティまたはheightプロパティを指定することで幅または高さを指定することができます。

入力内容 
{| class="wikitable" style="width:80%;"
|+ 表全体の幅は 80%
| style="width:50%;" | 幅 50% のセル <!-- 表全体の幅に対する割合 -->
| style="width:10em;" | 幅 10em のセル
| 幅を指定しないセル
|}
表示結果
表全体の幅は 80%
幅 50% のセル 幅 10em のセル 幅を指定しないセル
文字寄せ

セル内で文字を横方向に右寄せ・中央寄せ等したい場合はCSSでtext-alignを指定します。text-align: right;で右寄せ、text-align: center;で中央寄せ、text-align: left;で左寄せができます。

入力内容 
{| class="wikitable"
! 左寄せ !! 中央寄せ !! 右寄せ 
|-
| style="text-align: left;" | 左寄せテキスト || style="text-align: center;" | 中央寄せテキスト || style="text-align: right;" | 右寄せテキスト
|}
表示結果
左寄せ 中央寄せ 右寄せ
左寄せテキスト 中央寄せテキスト 右寄せテキスト

縦方向に文字寄せしたい場合は、text-alignの代わりにvertical-alignを指定します。

入力内容 
{| class="wikitable"
! 上寄せ !! 中央寄せ !! 下寄せ 
|-
| style="vertical-align:top;" | 上寄せテキスト || style="vertical-align:middle;" | 中央寄せテキスト || style="vertical-align:bottom;" | 下寄せテキスト
|}
表示結果
上寄せ 中央寄せ 下寄せ
上寄せテキスト 中央寄せテキスト 下寄せテキスト
配置

表自体を左寄せ・中央寄せ・右寄せにしたい場合、以下のようにしてください。

入力内容 
左寄せの表の前の文字列です。
{| class="floatleft wikitable"
| 左寄せの表
|}
左寄せの表の後、中央寄せの表の前の文字列です。
{| class="wikitable" style="margin:0 auto;"
| 中央寄せの表
|}
中央寄せの表の後、右寄せの表の前の文字列です。
{| class="floatright wikitable"
| 右寄せの表
|}
右寄せの表の後の文字列です。
表示結果

左寄せの表の前の文字列です。

左寄せの表

左寄せの表の後、中央寄せの表の前の文字列です。

中央寄せの表

中央寄せの表の後、右寄せの表の前の文字列です。

右寄せの表

右寄せの表の後の文字列です。

脚注

編集

引用元

編集
  1. ↑ 日本語版ウィキペディア, Help:編集ツールバーより
「https://ja.wikivoyage.org/w/index.php?title=ヘルプ:表&oldid=45928」から取得