表を作成する<table>タグ

2015年6月27日

webページに「表」を入れたいとき<table>タグを
使って作成します。

図を見て頂ければ分かりますが、まずは<table>タグと
その閉じタグを書きます。

<table>~</table>の中に<tr>~</tr>を書き
<tr>~</tr>の中に<td>~</td>を書き、
<td>~</td>の中にテキストや画像を配置します。

サンプルコードの実行結果は、テーブルの表が表示されます。

    *{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;}

*{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;}

<!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>&lt;table&gt;</p>
    <div class="box">
        <p>&lt;tr&gt;</p>
        <div class="boxRow">
            <div class="boxCell"><p>&lt;td&gt;<br>&lt;/td&gt;</p></div>
            <div class="boxCell"><p>&lt;td&gt;<br>&lt;/td&gt;</p></div>
            <div class="boxCell"><p>&lt;td&gt;<br>&lt;/td&gt;</p></div>
            <div class="boxCell"><p>&lt;td&gt;<br>&lt;/td&gt;</p></div>
        </div>        
        <p>&lt;/tr&gt;</p>
        <p>&lt;tr&gt;</p>
        <div class="boxRow">
            <div class="clearFloat boxCell"><p>&lt;td&gt;<br>&lt;/td&gt;</p></div>
            <div class="boxCell"><p>&lt;td&gt;<br>&lt;/td&gt;</p></div>
            <div class="boxCell"><p>&lt;td&gt;<br>&lt;/td&gt;</p></div>
            <div class="boxCell"><p>&lt;td&gt;<br>&lt;/td&gt;</p></div>
        </div>        
        <p>&lt;/tr&gt;</p>
    </div>
    <p>&lt;/table&gt;</p>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>