Help:表の作り方
無料のエ○本?高画質
動画も対応オススメ!

[Wikipedia|▼Menu]
□記事を途中から表示しています
[最初から表示]


パラメータ

表全体、タイトル、各行、各セルにはパラメータを記述することができます。パラメータの記述により罫線や背景色などを変更できます。
表全体・行
開始記号に続けてパラメータを記述します。
タイトル・セル・見出しセル
開始記号の後にパラメータを記述し、|(パイプ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]。{| border="1"

表タイトル列見出し 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'''| C <!-- 列 1 はセル A に塞がれている -->| D |-|'''行 3'''| E| rowspan="2" colspan="2" | F|-|'''行 4'''| G <!-- 列 2 と 3 はセル F に塞がれている -->|-|'''行 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|}{| 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%" | 幅 50% のセル <!-- 表全体の幅に対する割合 -->| style="width:10em" | 幅 10em のセル| 幅を指定しないセル|}

実際の表示

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

幅を指定するもうひとつの方法に width 属性がありますが、セルに対する width 属性は非推奨です[2]。表全体に対する width 属性は非推奨ではない[1]のですが、混乱を避けるために CSS の width プロパティで置き換えた方が無難でしょう。

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

幅や高さを指定するのに様々な単位を使用できますが、特別な理由[3]がない限り %(表示領域に対するパーセンテージ)か em(1em = 日本語表示環境で漢字1文字分)で指定してください。例えばセルの幅を px(ピクセル単位)で指定した場合、ブラウザの文字サイズを大きく設定してもセルの大きさは変化しないため、たいへん見づらくなるおそれがあります。em であれば基準となる文字サイズに連動してセルのサイズが変化します。


wikitableを利用する際の注意点(IEのスタイル解釈の問題とその対策)

表全体の幅が固定されていない場合において、IE (Internet Explorer, ver.6.0, 7.0 で確認済) では特殊なスタイル解釈により以下のような幅指定が無視される現象が起きるため、正常に表示するために何らかの対策を講じなければならないときがあります。
セル内に幅指定を超える幅の文字列があると折り返すのではなく幅指定が無視される。

結合したセルの中に一定以上の文字数がある場合、結合したセルと同じ列のセルの幅指定が無効になる。

問題の現象の具体例(幅指定に em を用いてセルの幅を固定したい場合)
幅指定によって本来固定されているべき A, B, C, D のセルが、固定されず動く。(IE のウィンドウサイズを横に伸縮させてみて下さい。A のセルについてはブラウザで文字サイズ小にして見ると確認しやすくなります。)

A
指B (幅指定セル)C (幅指定セル)D (幅指定セル)E(幅指定なし)
F (結合セル)
G
10文字文字文字文字
H 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

対策の例
幅指定無効化の原因のセルは G (「10」が幅指定を超えている。上記 1.)と H (結合セル内の文字量が多い。上記 2.)であり(F の結合セルは文字量が少ないので原因にはなっていない)、A のセルの幅指定を 1.5em から 1.6em へと広げ、H の結合セルには個別に style="width:0em" と指定することで他のセルの幅指定に影響を与えないようにでき、問題を解決できます。

A
指B (幅指定セル)C (幅指定セル)D (幅指定セル)E (幅指定なし)
F (結合セル)
G
10文字文字文字文字
H 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字


折り返しの禁止

日本語を含むいくつかの言語では文中のどこでも折り返しが可能であるため、場合によっては見出しセルの短い語が折り返されて表示され非常に見づらくなります。これを防ぐには、CSS の white-space プロパティを設定します。

ウィキマークアップ{| class="wikitable"|+ 見出しが折り返されてしまうかもしれない表! 折り返されそうな見出し| 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助|}{| class="wikitable"|+ 見出しの折り返しを禁止した表! style="white-space:nowrap" | 折り返されそうな見出し| 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助|}

実際の表示

見出しが折り返されてしまうかもしれない表折り返されそうな見出し寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

見出しの折り返しを禁止した表折り返されそうな見出し寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

セルのパラメータに nowrap 属性を使用して同じ効果を得られますが、この属性は非推奨です[2]


★制服でHなバイト★
1日5万円★日払い★

[次ページ]
[オプション/リンク一覧]
[記事の検索]
[おまかせ表示]
[トップページ]
[ニュースをチェック!]
[列車運行情報]
Size:36 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:Mamenoki