webページに「表」を入れたいとき<table>タグを
使って作成します。
図を見て頂ければ分かりますが、まずは<table>タグと
その閉じタグを書きます。
<table>~</table>の中に<tr>~</tr>を書き
<tr>~</tr>の中に<td>~</td>を書き、
<td>~</td>の中にテキストや画像を配置します。
サンプルコードの実行結果は、テーブルの表が表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
*{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:#ffffff; margin:0 auto;} .box{ width:440px; height:300px; background-color:yellow; overflow:hidden;} .boxRow{ width:400px; height:100px; margin:0px 20px 0px 20px; background-color:aqua; overflow:hidden;} .boxCell{ width:60px; height:60px; margin:20px; float:left; background-color:ghostwhite;} .clearFloat{clear:both;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <p><table></p> <div class="box"> <p><tr></p> <div class="boxRow"> <div class="boxCell"><p><td><br></td></p></div> <div class="boxCell"><p><td><br></td></p></div> <div class="boxCell"><p><td><br></td></p></div> <div class="boxCell"><p><td><br></td></p></div> </div> <p></tr></p> <p><tr></p> <div class="boxRow"> <div class="clearFloat boxCell"><p><td><br></td></p></div> <div class="boxCell"><p><td><br></td></p></div> <div class="boxCell"><p><td><br></td></p></div> <div class="boxCell"><p><td><br></td></p></div> </div> <p></tr></p> </div> <p></table></p> </div> </body> </html> |