このページの本文へ移動
色合い 標準 青 黄 黒
文字サイズ 標準 拡大 縮小
RSS
Since 00370896
Monthly 00001925

行事カレンダー

2024年4月
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 1 2 3 4
トップCMSマニュアル> 38.表のセルを使った技

38.表のセルを使った技

 【資料室】 

表のセルを使った技 

 

  • 表の回りに文字を回り込ませるには?
  • 表の線色を変更するには?
  • 表の枠を結合するには?

 

 

表の回りに文字を回り込ませるには?

 

 コンテンツ編集の画面で表ツールを利用して表を挿入しておきます

1.コンテンツ編集の画面で,表ツールを利用して表を挿入しておきます。

 


 HTML表示に切り替えて表のタグに回りこませる文字列の位置情報を追加する 

 

表の右側に文字列を回り込ませる場合 align=left (right)を追加します

 

2.HTML表示に切り替えて,表のタグ(TABLEタグ)に回り込ませる文字列の位置情報を追加します。

 

 (例)

 表の右側に文字列を回り込ませる場合,align=left (right)を追加します。

  <TABLE border=1 cellSpacing=1 cellPadding=5 align=left>

 


>> ページの先頭へ

 

 

表の線色を変更するには?

 

 コンテンツ編集の画面で 表ツールを利用して表を挿入しておきます 3.コンテンツ編集の画面で,表ツールを利用して表を挿入しておきます。

 HTML表示に切り替えて,表のタグ(TABLEタグ)に bgcolor=#003399(色コード)を追加して表の枠線を取ります 

 

 イメージへ戻った時の画像

 

4.HTML表示に切り替えて,表のタグ(TABLEタグ)に、bgcolor=#003399(色コード)を追加して表の枠線を取ります。

各セル<TD>タグの中に、bgcolor=#ffffffを追加します。(表全体を濃い色、枠内を白にするという意味)

 

 

 (例)細い線の表を作成する場合

 <TABLE border=0 cellSpacing=1 cellPadding=5 bgcolor=#003399>
 <TBODY>
 <TR>
 <TD bgcolor=#ffffff>あいうえお</TD>

 

あいうえお 123
かきくけこ

456


 各セルの色設定(白色)については イメージ表示に切り替えて 表ツールの[背景色]を白に設定すると簡単にできる 

 

 背景色

 

5.各セルの色設定(白色)については,イメージ表示に切り替えて,表ツールの[背景色]を白に設定すると簡単にできる。


>> ページの先頭へ

 

 

表の枠を結合するには?

 コンテンツ編集の画面で,表ツールを利用して表を挿入しておきます 6.コンテンツ編集の画面で,表ツールを利用して表を挿入しておきます。

セルタグ<TD>の中に、<TD rowspan="2"> 縦への結合(結合セル数)を入れます 

 

 イメージへ戻った時の画像

 

 

 

7.セルタグ<TD>の中に、<TD rowspan="2"> 縦への結合(結合セル数)を入れます。

 

(例)

<TABLE border=1 cellSpacing=1 cellPadding=5>
<TBODY>
<TR>
<TD>あいうえお</TD>
<TD rowspan="2">123</TD></TR> 
<TR>
<TD>かきくけこ</TD>
</TR></TBODY></TABLE>

 

あいうえお 123
かきくけこ

 

 ※2行目の<TD></TD>セルを表すタグを1つ分削除する。

 


セルタグ<TD>の中に <TD rowspan="2"> 縦への結合(結合セル数)を入れます 

 

 HTMLタグ画面

 

 イメージ画面

 

8. セルタグ<TD>の中に、<TD rowspan="2"> 縦への結合(結合セル数)を入れます。

 

(例)

<TABLE border=1 cellSpacing=1 cellPadding=5>
<TBODY>
<TR>
<TD colspan="2" >あいうえお123</TD></TR> 
<TR>
<TD>かきくけこ</TD>

<TD>456</TD>
</TR></TBODY></TABLE>

 

あいうえお123
かきくけこ 456

 

※1行目の<TD></TD>セルを表すタグを1つ分削除する。


>> ページの先頭へ

 

 

>> WEBマニュアル目次へ

 


掲載日 平成25年3月27日 更新日 平成25年3月29日
アクセス数
オプション