![[10]](https://s.yimg.jp/i/jp/blog/p3/images/paging_back2.gif){kind=small}
この中に表示されているのがそのテーブルで使用したソースになってます。 【テーブル】基本で横方向の結合は説明しました。
||||||||||５つ結合|| ||１−１||１−２||１−３||１−４||１−５|| 普通にテーブルでセルの結合すると５つまでしかできません。
半角の記号を１１個以上続けるとエラーになっちゃうんです。 また結合したセルも勝手にセンタリングされてしまいます。 でも、横方向にセルを結合する「colspan」ですべて解決できます♪ 「colspan=数字」数字で結合するセルの数を調整します。 文字位置は「text-align:位置」で指定します。 「center 中央揃え」「left 左寄せ」「right 右寄せ」です。
||<#FFFFFF'` `|| ||<#66CCFF' colspan=4 style=text-align:center;``３つ結合中央 ||<#FFFFFF'` `|| ||<#FFCC99' colspan=4 style=text-align:left;``３つ結合左 ||<#FFFFFF'` `|| ||<#FFFF66' colspan=4 style=text-align:right;``３つ結合右 ||<#FFFFFF'` `|| ||<#33FF99' ``１−１ ||<#33FF99' ``１−２ ||<#33FF99' ``１−３ ||<#33FF99' ``１−４ ||<#FFFFFF'` `|| 左寄せの場合は位置の指定は省略可能です。
||<#FFFFFF'` `|| ||<#66CCFF' colspan=6 style=text-align:center;``テスト６つ結合 ||<#FFFFFF'` `|| ||<#33FF99' ``１−１ ||<#33FF99' ``１−２ ||<#33FF99' ``１−３ ||<#33FF99' ``１−４ ||<#33FF99' ``１−５ ||<#33FF99' ``１−６ ||<#FFFFFF'` `|| 縦に結合する場合「rowspan=行数」を使用します。 この場合、改行の命令も行数に含まれるので気をつけて下さい。 文字の位置は「vertical-align:位置」で指定します。 「top 上」「middle 中」「bottom 下」
||<#FFFFFF' ``|| ||<#FFCC99' rowspan=3 style=vertical-align:top;``上 ||<#66CCFF' rowspan=3 style=vertical-align:middle;``中 ||<#FFFF66' rowspan=3 style=vertical-align:bottom;``下 ||<#33FF99' ``１−２ ||<#FFFFFF' ``|| ||<#33FF99' ``２−２ ||<#FFFFFF' ``||
||<#FFFFFF'` `|| ||<#66CCFF' colspan=6 style=text-align:center;``横６つ結合 ||<#66CCFF' rowspan=3 style=text-align:center;``縦２つ ||<#FFFFFF'` `|| ||<#33FF99' ``１−１ ||<#33FF99' ``１−２ ||<#33FF99' ``１−３ ||<#33FF99' ``１−４ ||<#33FF99' ``１−５ ||<#33FF99' ``１−６ ||<#FFFFFF'` `|| ||<#33FF99' ``２−１ ||<#33FF99' ``２−２ ||<#33FF99' ``２−３ ||<#FFFFFF' colspan=2 rowspan=3 style=text-align:center;``縦２横２ ||<#66CCFF' colspan=2 style=text-align:right;``横２つ結合 ||<#FFFFFF'` `|| ||<#33FF99' ``３−１ ||<#33FF99' ``３−２ ||<#33FF99' ``３−３ ||<#33FF99' ``３−６ ||<#33FF99' ``３−７ ||<#FFFFFF'` `||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
転載元: 
- >
- Yahoo!サービス
- >
- Yahoo!ブログ
- >
- 練習用
コメント（0）
