« 特殊な文字を表示する | メイン | メルマガ再開しました »

テーブル（表）の作成 [1]

テーブルは、いわゆる「表」の事です。
ホームページの作成では、レイアウトをするときによく利用されます。
　　
　　使用するタグ
　　<table> ・・・・・・・・・・・・・・・・テーブル開始タグ(枠線を表示しない場合)
　　<table boder="☆">・・・・・・・テーブル開始タグ(枠線を表示する場合)
　　　　　　　　　　　　　　 　　　　　　　　　　　　「☆」には、任意の数字を入れる。
　　<tr>・・・・・・・・・・・・・・・・・・・行開始タグ
　　<td>・・・・・・・・・・・・・・・・・・・データーセル開始タグ
　　</td>・・・・・・・・・・・・・・・・・・データーセル終了タグ
　　</tr>・・・・・・・・・・・・・・・・・・行終了タグ
　　</table>・・・・・・・・・・・・・・・・テーブル終了タグ

【練習】
　　エディターで次のように記述してください。
　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<html>
<head>
<title>テーブル（表）の作成</title>
</head>
<body>
<h1>テーブルの作成</h1>
<h2>枠線無しのテーブル</h2>
　　<table>
　　<tr>
　　<td><font color="red">1行1列目</font></td>
    <td><font color="red">1行2列目</font></td>
    <td><font color="red">1行3列目</font></td>
    </tr>
    <tr>
　　<td><font color="blue">2行1列目</font></td>
    <td><font color="blue">2行2列目</font></td>
    <td><font color="blue">2行3列目</font></td>
    </tr>
    <tr>
　　<td><font color="green">3行1列目</font></td>
    <td><font color="green">3行2列目</font></td>
    <td><font color="green">3行3列目</font></td>
    </tr>
　  </table>
　  <br>
　  <h2>枠線太さ２ピクセルのテーブル</h2>
　  <table boder="2">
　　<tr>
　　<td><font color="red">1行1列目</font></td>
　　<td><font color="red">1行2列目</font></td>
　　<td><font color="red">1行3列目</font></td>
　　</tr>
　　<tr>
　　<td><font color="blue">2行1列目</font></td>
　　<td><font color="blue">2行2列目</font></td>
　　<td><font color="blue">2行3列目</font></td>
　　</tr>
　　<tr>
　　<td><font color="green">3行1列目</font></td>
　　<td><font color="green">3行2列目</font></td>
　　<td><font color="green">3行3列目</font></td>
　　</tr>
　　</table>
</body>
</html>
　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ブラウザで見ると下のように表示されます。

テーブルの作成 [1]

投稿者 k-chan : 2006年10月20日 13:09