表 を作ってみよう
テーブル
テーブル(表)を作成していきましょう
表は、この先よく使う事になると思います。きれいなレイアウトが可能です。
しっかり身に付け役立ててください。
基本構造 ( 一列のTABLE )
○○ |
<table border="1">
<tr>
<td> ○○ </td>
</tr>
</table>
上記が基本の形です。この<table>〜</table>までセットで表になります。
<table>〜</table> が 表、
<tr>〜</tr> が 行、
<td>〜</td> が 列 です。
※必ず<td></td>は<tr>〜</tr>の中、
<tr></tr>は<table>〜</table>の中にあること。
○○には、文字や画像をいれます。
※見やすいようにborder="1" で枠を書き加えています。
この枠を消すには border="0" もしくは border="1" ごと消してください。
基本ができたら、応用です!!
下記にサンプルとコードを用意しましたので色々試してみてください。
そして、あなた独自の表を作ってみてください。
二行のTABLE
○○ |
○○ |
<table border="1">
<tr>
<td> ○○ </td>
</tr>
<tr>
<td> ○○ </td>
</tr>
</table>
二列のTABLE
○○ | ○○ |
<table border="1">
<tr>
<td> ○○ </td>
<td> ○○ </td>
</tr>
</table>
色を付けたTABLE ( 一列 )
※色を指定するは 色見本 を参照ください。
○○ |
<table bgcoler="red">
<tr>
<td> ○○ </td>
</tr>
</table>
あなただけのオリジナルの表はできましたか? これで何となくカタチになってきてませんか?
おまけ
子TABLE
※色を指定するは 色見本 を参照ください。
|
<table bgcoler="green">
<tr>
<td>
<table bgcoler="red">
<tr>
<td> TABLEの中にTABLE </td>
</tr>
</table>
</td>
</tr>
</table>
表の中に表を入れることも可能なんです!!