きなこの 愉快な 楽天日記枠&miniタグ講座

きなこの 愉快な 楽天日記枠&miniタグ講座

■テーブル 2



☆テーブルを作ろうNO2☆


■ テーブルアレンジ 1 ROWSPAN ■

★見本 1★



<TABLE BORDER> <TR><TD>Cell 1</TD><TD ROWSPAN=2 >Cell 2</TD><TD>Cell 3</TD></TR><TR><TD>Cell 4</TD><TD>Cell 5</TD></TR></TABLE>





Cell 1
Cell 2
Cell 3
Cell 4
Cell 5



★見本 2★




<TABLE BORDER> <TR><TD>Cell 1</TD><TD ROWSPAN=3 >Cell 2</TD><TD>Cell 3</TD></TR><TR><TD>Cell 4</TD><TD>Cell 5</TD></TR><TR><TD>Cell 6</TD><TD>Cell 7</TD></TR></TABLE>





Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7



●基本の所でも書きましたが

< TABLE BORDER > だけの時は < TABLE BORDER=1 > と同じです。



★補足★


<TABLE> <TR><TD>Cell 1</TD><TD ROWSPAN=2>Cell 2</TD><TD>Cell 3</TD></TR><TR><TD>Cell 4</TD><TD>Cell 5</TD></TR></TABLE>







Cell 1
Cell 2
Cell 3
Cell 4
Cell 5


< TABLE > だけの時は < TABLE BORDER=0 > と同じです。

だから、枠は表示されませんよ~。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


★見本 3★


<TABLE BORDER=3><TR><TD ROWSPAN=2 >Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD><TD>Cell 4</TD></TR><TR><TD>Cell 5</TD><TD>Cell 6</TD><TD>Cell 7</TD></TR></TABLE>





Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7



★見本 4★

<TABLE BORDER=3><TR><TD ROWSPAN=4 >Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD><TD>Cell 4</TD></TR><TR><TD>Cell 5</TD><TD>Cell 6</TD><TD>Cell 7</TD></TR><TD>Cell 8</TD><TD>Cell 9</TD><TD>Cell 10</TD></TR><TR><TD>Cell 11</TD>
<TD>Cell 12</TD><TD>Cell 13</TD></TR></TABLE>





Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
Cell 13


。。。。。。。。。。。。。。。。。。。。。。。

★結果★


ROWSPAN
 とは を連結するために使います。


2行を1つのセルにするにはrowspan=2にします。


3行を1つのセルにするにはrowspan=3にします。


4行を1つのセルにするにはrowspan=4にします。


この様に、行は幾らでも増やす事が出来ます。





。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。



■ テーブルアレンジ 2 COLSPAN ■


●2列を1つのセルにした場合

★ 見本 1 ★



<TABLE BORDER=3><TR><TD>Cell 1</TD><TD COLSPAN=2 >Cell 2</TD></TR><TR><TD>Cell 3</TD><TD>Cell 4</TD><TD>Cell 5</TD></TR></TABLE>


Cell 1
Cell 2
Cell 3
Cell 4
Cell 5



★ 見本 2 ★



<TABLE BORDER=3><TR><TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD></TR><TR><TD COLSPAN=2 >Cell 4</TD><TD>Cell 5</TD></TR></TABLE>


Cell 1
Cell 2
Cell 3
Cell 4
Cell 5



● 3列を1つのセルにした場合。



<TABLE BORDER=3> <TR><TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD></TR><TR> <TD COLSPAN=3 >Cell 4</TD></TR></TABLE>



Cell 1
Cell 2
Cell 3
Cell 4



............................................................

★結果★



今度は  COLSPAN
 です。 を連結するために使います。


2列を1つのセルにするにはcolspan=2にします。


3列を1つのセルにするにはcolspan=3にします。




。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

■ ROWSPAN & COLSPANの応用 ■




<TABLE BORDER=1><TR><TD ALIGN=center ROWSPAN=2 COLSPAN=2 >ABC</TD><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR><TR><TD ALIGN=center>DEF</TD><TD>GHI</TD><TD ALIGN=center COLSPAN=2>JKF</TD></TR></TABLE>



rowspan  と  colspan
を同時に使用しています。


2行2列を連結するとこんな感じです。


ABC
1
2
3
4
DEF
GHI
JKF




。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。




■ 見出しを作ってみよう ■
★ 見本 1 ★

<TABLE BORDER=1><TR> <TH> 見出し1 </TH> <TH> 見出し2 </TH> <TH> 見出し3 </TH> </TR><TR><TD>A</TD><TD>B</TD><TD>C</TD></TR><TR><TD>D</TD><TD>E</TD><TD>F</TD></TR></TABLE>



見出し1 見出し2 見出し3
A
B C
D
E F



★ 見本 2 ★

<table border=1><tr> <th colspan=2> 見出し1 </th> <th colspan=2> 見出し2 </th> </tr><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr><tr><td>E</td><td>F</td><td>G</td><td>H</td></tr></table>


見出し1
見出し2
A
B
C
D
E
F
G
H





< TD > の代わりに < TH > を使うと見出しを作ることが出来ます。


< TH > を設定すると見出しの 文字は
太字に
なり
文字は中央に 表示されます。


見本1と見本2を見比べて下さい。

見本1ではタグは大文字で書いています。

見本2ではタグは小文字で書いています。

タグをどちらで書いても同じように表示されます。




私は、その時作るものによって

< TD > タグを使わず、全て < TH > タグでテーブルを作る時があります。

文字が < B > タグを使わなくても太字になっているのと

文字が < CENTER > 設定になっているからです。



。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。




■ タイトルを作ってみよう ■
★ 見本 1 ★

<TABLE BORDER> <CAPTION ALIGN=top> タイトル </CAPTION> <TR><TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD></TR></TABLE>




タイトル
Cell 1 Cell 2 Cell 3



★ 見本 2 ★

<TABLE BORDER> <CAPTION ALIGN=bottom> タイトル </CAPTION> <TR><TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD></TR></TABLE>







タイトル
Cell 1 Cell 2 Cell 3






caption  とは 表のタイトル です。


align=top でテーブルの上に表示され、
align=bottom で下に表示されます。



。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


■ cellpadding & cellspacing  ■

★ cellpadding ★


<TABLE BORDER=1 CELLPADDING=10 CELLSPACING=0><TR><TD>A</TD><TD>B</TD><TD>C</TD></TR><TR><TD>D</TD><TD>E</TD><TD>F</TD></TR></TABLE>



A B C
D
E F




● 例 題 ●

数字(小)<・・・・CELLPADDING・・・・>数字(大)
きなこ グルメ
CELLPADDING=1
テーブル 講座
きなこ グルメ
CELLPADDING=5
テーブル 講座
きなこ グルメ
CELLPADDING=20
テーブル 講座




例題<CELLPADDING=20>のタグは↓


<TABLE BORDER=5 CELLPADDING=20 CELLSPACING=0> <CAPTION ALIGN=top><font size=2><B>CELLPADDING=20</font></B></CAPTION> <TR><TD>きなこ</TD><TD>グルメ</TD></TR><TR><TD>テーブル</TD><TD>講座</TD></TR> </TABLE>




cellpaddingはセルと中の文字の間隔です。


TABLE BORDER=5にしています。
好きなサイズにしてくださいね。


数値を替える事で間隔は変わります。


注意としては、 <CELLPADDING> の数値を上げると

<CAPTION> タグで書いたタイトル文字が離れていきます。


タイトル文字を外す時は、 の部分のタグを消して下さい。




。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


■ cellspacing ■

<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=10><TR><TD>A</TD><TD>B</TD><TD>C</TD></TR><TR><TD>D</TD><TD>E</TD><TD>F</TD></TR></TABLE>



A B C
D
E F

● 例 題 ●

数字(小)<・・・・CELLSPACING・・・・>数字(大)
きなこ グルメ
CELLSPACING=1
テーブル 講座
きなこ グルメ
CELLSPACING=5
テーブル 講座
きなこ グルメ
CELLSPACING=20
テーブル 講座



例題<CELLSPACING=20>のタグは↓

<TABLE BORDER=5 CELLPADDING=0 CELLSPACING=20 > <CAPTION ALIGN=top><font size=2>CELLSPACING=20</font></CAPTION> <TR><TD>きなこ</TD><TD>グルメ</TD></TR> <TR><TD>テーブル</TD><TD>講座</TD></TR></TABLE></TD></table>






cellspacingはセルとセルの間の間隔です。

(セルの太さという方が解かりやすいかな?)


数値を替える事で太さは変わります。


<CAPTION> タグで書いたタイトル文字は
cellpadding よりも更に大きく離れていきます。


タイトル文字を外す時は、 の部分のタグを消して下さい。





。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

■ cellpadding & cellspacing  ■

<TABLE BORDER=1 CELLPADDING=10 CELLSPACING=10><TR><TD>A</TD><TD>B</TD><TD>C</TD></TR><TR><TD>D</TD><TD>E</TD><TD>F</TD></TR></TABLE>



A B C
D
E F



● 例 題 ●

数字(小)<・・・・CELLPADDING & CELLSPACING・・・・>数字(大)
きなこ グルメ
CELLPADDING=1
CELLSPACING=1
テーブル 講座
きなこ グルメ
CELLPADDING=5
CELLSPACING=5
テーブル 講座
きなこ グルメ
CELLPADDING=20
CELLSPACING=20
テーブル 講座



例題<cellpadding=20 & cellspacing=20 >のタグは↓


<TABLE BORDER=5 CELLPADDING=20 CELLSPACING=20 > <CAPTION ALIGN=top><font size=2>CELLPADDING=20<br> CELLSPACING=20</font></CAPTION> < TR><TD>きなこ</TD><TD>グルメ</TD></TR> <TR><TD>テーブル</TD><TD>講座</TD></TR></TABLE>





タイトル文字を外す時は、 の部分のタグを消して下さい。



● こんなのも、出きるよ~ ●


color=hotpink>★タイトル文字★
○a○
○b○
○c○
○d○
○e○
○f○



<table border=0 cellpadding=4 cellspacing=4 bgcolor=pink><tr><td align=center colspan=2 nowrap><font
color=hotpink>

★タイトル文字★

</font></td></tr><tr><td align=center bgcolor=White nowrap>○a○</td><td align=center bgcolor=White nowrap>○b○</td></tr><tr><td align=center bgcolor=White nowrap>○c○</td><td align=center bgcolor=White nowrap>○d○</td></tr><tr><td align=center bgcolor=White nowrap>○e○</td><td align=center bgcolor=White nowrap>○f○</td></tr></table>


table border=0 にして、枠線を表示していません。

枠を表示する時は、数字を入れてくださいね。



↑のタグの最初に書かれているこの部分を


<table border=0
cellpadding=4 cellspacing=4 bgcolor=pink>


↓のタグに変えて見てください。

ピンクの背景色を、画像に変えることが出来ます。


< table border=0 cellpadding=4 cellspacing=4 background="http://画像URL" >

< font color="#FFFFFF" > に変えました。


color="#FFFFFF">★タイトル文字★
○a○
○b○
○c○
○d○
○e○
○f○



。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


テーブル 
















© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: