テーブルを使う[2]

「楽天広場」ですぐ使える
 超初心者向けタグ講座

4.　テーブルを使う[2]
● 表示窓内の色を変える
● 表示窓をつなぐ
● テーブルサイズの変更


超初心者向けタグ講座トップに戻る

テーブル作成に使用するタグ
<table> 　テーブル 　　 <tr> 行 　　 <td> 　表示窓
□■□ 　表示窓の色を変える　 □■□
タグを使って 　[ 表示窓の色 ]　 を変える
使用タグ＝ <table><tr><td> 　属性＝「bgcolor=○○」
■　編集画面
■ホームページの表示
<table border=1 >
<tr bgcolor=red ><td> 1-1 </td><td> 1-2 </td><td> 1-3 </td></tr>
<tr bgcolor=blue ><td> 2-1 </td><td> 2-2 </td><td> 2-3 </td></tr>
<tr bgcolor=green ><td> 3-1 </td><td> 3-2 </td><td> 3-3 </td></tr>
</table>
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3
<tr>に属性「bgcolor=」を使って色を指定すると、列に指定が反映されます。
<table border=1 >
<tr><td bgcolor=pink > 1-1 </td><td> 1-2 </td><td> 1-3 </td></tr>
<tr><td> 2-1 </td><td bgcolor=gray > 2-2 </td><td> 2-3 </td></tr>
<tr><td> 3-1 </td><td> 3-2 </td><td bgcolor=lime > 3-3 </td></tr>
</table>
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3
<td>に属性「bgcolor=」を使って色を指定すると、1ﾏｽづつ指定することが出来ます。
テーブルを使うトップへ

□■□ 　表示窓をつなぐ　 □■□
タグを使って 　[ 表示窓をつなぐ ]　
使用タグ＝ <table><tr><td> 　属性＝「rowspan=○」「colspan=○」
■　編集画面
■ホームページの表示
<table border=1>
<tr><td rowspan=3 > 1-1 </td><td> 1-2 </td><td> 1-3 </td></tr>
<tr><td> 2-2 </td><td> 2-3 </td></tr>
<tr><td> 3-2 </td><td> 3-3 </td></tr>
</table>
1-1
1-2
1-3
2-2
2-3
3-2
3-3
<table border=1>
<tr><td> 1-1 </td><td rowspan=2 > 1-2 </td><td> 1-3 </td></tr>
<tr><td> 2-1 </td><td> 2-3 </td></tr>
<tr><td> 3-1 </td><td> 3-2 </td><td> 3-3 </td></tr>
</table>
1-1
1-2
1-3
2-1
2-3
3-1
3-2
3-3
<td>に属性「rowspan=」で指定した数を、縦方向につなぐ事ができます。
■　編集画面
■ホームページの表示
<table border=1>
<tr><td colspan=3 > 1-1 </td></tr>
<tr><td> 2-1 </td><td> 2-2 </td><td> 2-3 </td></tr>
<tr><td> 3-1 </td><td> 3-2 </td><td> 3-3 </td></tr>
</table>
1-1
2-1
2-2
2-3
3-1
3-2
3-3
<table border=1>
<tr><td> 1-1 </td><td> 1-2 </td><td> 1-3 </td></tr>
<tr><td colspan=2 > 2-1 </td><td> 2-3 </td></tr>
<tr><td> 3-1 </td><td> 3-2 </td><td> 3-3 </td></tr>
</table>
1-1
1-2
1-3
2-1
2-3
3-1
3-2
3-3
<td>に属性「colspan=」で指定した数を、横方向につなぐ事ができます。
テーブルを使うトップへ

□■□ 　テーブルのサイズ変更　 □■□
タグを使って 　[ テーブルのサイズを指定する]　
使用タグ＝ <table><tr><td> 　属性＝「width=○」「height=○」
■　編集画面
■ホームページの表示
<table border=1 width= 200 >
<tr><td> 1-1 </td><td> 1-2 </td><td> 1-3 </td></tr>
<tr><td> 2-1 </td><td> 2-2 </td><td> 2-3 </td></tr>
<tr><td> 3-1 </td><td> 3-2 </td><td> 3-3 </td></tr>
</table>
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3
<table>タグに、属性「width=」を指定してテーブルの横幅を指定します。
例の場合は200ピクセルの横幅

■　編集画面
■ホームページの表示
<table border=1 height= 150 >
<tr><td> 1-1 </td><td> 1-2 </td><td> 1-3 </td></tr>
<tr><td> 2-1 </td><td> 2-2 </td><td> 2-3 </td></tr>
<tr><td> 3-1 </td><td> 3-2 </td><td> 3-3 </td></tr>
</table>
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3
<table>タグに、属性「height=」を指定してテーブルの高さを指定します。
例の場合は150ピクセルの高さ

■　編集画面
■ホームページの表示
<table border=1 width= 200 height= 150 >
<tr><td> 1-1 </td><td> 1-2 </td><td> 1-3 </td></tr>
<tr><td> 2-1 </td><td> 2-2 </td><td> 2-3 </td></tr>
<tr><td> 3-1 </td><td> 3-2 </td><td> 3-3 </td></tr>
</table>
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3
属性「width=」「height=」は同時に指定できます。
例の場合は150ピクセルの横幅で100ピクセルの高さ
テーブルを使うトップへ




BACK
TOP
NEXT

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