テーブルを使う[1]

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

3.　テーブルを使う[1]
● テーブル基本形
● 表示窓を増やす
● 行を増やす
● 枠の太さを変える
● 枠の色を変える


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

テーブル作成に使用するタグ
<table> 　テーブル 　　 <tr> 行 　　 <td> 　表示窓
□■□ 　テーブルの基本形　 □■□
タグを使って 　[ テーブル ]　 を作って見ましょう
使用タグ＝ <table><tr><td>
■　編集画面
■　ホームページの表示
<table border=1>
<tr><td> 1-1 </td></tr>
</table>
1-1
テーブルの基本形です。

 テーブルを使うトップへ
□■□ 　テーブルの表示窓を増やす　 □■□
タグを使って 　[ 表示窓 ]　 を増やす
使用タグ＝ <table><tr><td>
■　編集画面
■　ホームページの表示
<table border=1>
<tr><td> 1-1 </td><td> 1-2 </td></tr>
</table>
1-1
1-2
</td><td>を追加して表示窓を増やします。
<table border=1>
<tr><td> 1-1 </td><td> 1-2 </td><td> 1-3 </td></tr>
</table>
1-1 1-2 1-3
更に</td><td>を追加してしていくといくつでも増やせます。

 テーブルを使うトップへ
□■□ 　テーブルの行を増やす　 □■□
タグを使って 　[ 行 ]　 を増やす
使用タグ＝ <table><tr><td>
■　編集画面
■　ホームページの表示
<table border=1>
<tr><td> 1-1 </td><td> 1-2 </td></tr>
<tr><td> 2-1 </td><td> 2-2 </td></tr>
</table>
1-1 1-2
2-1 2-2
<tr><td>を追加して「行」を増やします。
<table border=1>
<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
更に<tr><td>を追加してしていくといくつでも増やせます。

 テーブルを使うトップへ
□■□ 　枠の太さを変える　 □■□
タグを使って 　[ 枠の太さ ]　 を変える
使用タグ＝ <table><tr><td> 　属性＝「border=○」
■　編集画面
■　ホームページの表示
<table border=6 >
<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
属性　bordre=を使って外枠の太さを指定します。
<table border=12 >
<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
属性　bordre=を使って外枠の太さを指定します。「0」を指定すると枠は消えてしまいます。

 テーブルを使うトップへ
□■□ 　枠の色を変える　 □■□
タグを使って 　[ 枠の色 ]　 を変える
使用タグ＝ <table><tr><td> 　属性＝「bordercolor=○○」
■　編集画面
■　ホームページの表示
<table border=1 bordercolor= red >
<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
属性　「bordrecolor=」を使って外枠の色を指定します。
<table border= 6 bordercolor= green >
<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
属性　「bordre=」「bordercolor=」は同時に指定できます。

 テーブルを使うトップへ
BACK
TOP
NEXT

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