記事本文を飾り付けてみよう「（その２６）Wiki超入門１６」

今回はそのテーブルのセルを結合させる方法をご紹介します。
いつも書いていますが、あまり使い勝手は良くありません。いろいろ工夫してみてくださいね。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

||||
||<#色の値' width=横幅 height=高さ colspan=右方向へ結合するセル数 rowspan=下方向へ結合するセル数 ``表の文

です。

・"|"は縦棒です（何て言うのか判りません）。私のキーボードでは右上の"\"キーをShiftと一緒に押すと出てきます。
・色の値の次にあるのは['](シングルクォーテーション)です。私のキーボードでは"7"キーをShiftと一緒に押すと出てきます。
・表の文の前にあるのは[`](何て言うのか判りません)。私のキーボードでは右側の"@"とshiftを一緒に押すと出てきます。

■テーブルのセルを横に結合する（colspan属性）

文法）
||||
||<#ccffff' width=100 height=50 ``１：結合なし
||<#ccffff' width=100 height=50 ``２：結合なし
||<#ccffff' width=100 height=50 ``３：結合なし
||||
||<#ccffff' width=100 height=50 colspan=2 ``１と２を結合
||<#ccffff' width=100 height=50 ``３：結合なし
||||
||<#ccffff' width=100 height=50 colspan=3 ``１と２と３を結合

※補足　結合をするとその分だけセルの数が減りますので、設定するセルの数も減っていきます。

結果）

１：結合なし	２：結合なし	３：結合なし
１と２を結合		３：結合なし
１と２と３を結合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルのセル縦に結合する（rowspan属性）

文法）
||||
||<#ccffff' width=100 height=50 rowspan=5 ``１列目を３つ結合
||<#ccffff' width=100 height=50 rowspan=3 ``２列目を２つ結合
||<#ccffff' width=100 height=50 ``３：結合なし
||||
||<#ccffff' width=100 height=50 ``３：結合なし
||||
||<#ccffff' width=100 height=50 ``２：結合なし
||<#ccffff' width=100 height=50 ``３：結合なし

※補足　ここでrowspanの値に注目して頂きたいのですが、３つのセルを結合するときは"5"、２つのセルを結合する時には"3"に設定しています。これは何故かというと、実は縦のセルとセルの間に小さなセルが挟まれています。これも含めて結合しなくてはいけない為に、この様な設定になります。

結果）

１列目を結合	２列目を結合	３：結合なし
		３：結合なし
	２：結合なし	３：結合なし

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしょうか？
今回は少し複雑だったかも知れませんね。テーブルを作る際に紙に書いて、何処と何処を結合するかを確認しながらやると良いかもしれませんね。

ちなみに、これまで説明してきた方法だとテーブルの一番上と、縦に並ぶセルの間に線のようなものが入ってしまいます。これは上の補足でも説明したように、間に小さなセルが入っているからなのです。
もしも、気になるようでしたら以下のように設定してください。

||||　→　||<#ffffff' ``||

こうすれば、間のセルの色が背景の白と同じになります。

例）
||<#ffffff' ``||
||<#ccffff' width=100 height=50 ``こんにちは
||<#ccffff' width=100 height=50 ``さようなら
||<#ffffff' ``||
||<#ccffff' width=100 height=50 ``こんばんわ
||<#ccffff' width=100 height=50 ``おやすみなさい

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。