テーブルレイアウトのコーディング
昨日の画像を書きだしてテーブルレイアウトのコーディングをしました。テーブルで空きをあける場合はCSSで設定せず、HTMLに直接、幅や高さを指定する。
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<mata http-equiv="Content-Style-Type" content="text/css">
<title>tableレイアウトの練習</title>
<link href="base.css" rel="stylesheet" type="text/css">
</head>
<body>
<table cellpadding="0" cellspacing="0" width="800" height="407" summary="ロゴとナビゲーションとメインイメージ" >
<tr>
<td><img src="images/header.gif" width="800" height="107" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="images/spacer.gif" width="15" height="15" alt=""></td>
</tr>
<tr>
<td><img src="images/main_img.jpg" width="800" height="300" alt=""></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="800" height="365" summary="トピックスとバナー" >
<tr>
<td colspan="3"><img src="images/spacer.gif" width="15" height="15" alt=""></td>
</tr>
<tr>
<td width="15"><img src="images/spacer.gif" width="15" height="15" alt=""></td>
<td width="565"><img src="images/topicks.gif" width="565" height="275" alt="" ></td>
<td width="300">
<table cellpadding="0" cellspacing="0" width="200" class="bannertable" summary="バナー">
<tr>
<td height="50" class="banner"><img src="images/banner_lalliance.jpg" width="160" height="40" alt=""></td>
</tr>
<tr>
<td height="50" class="banner"><img src="images/banner_jal.jpg" width="160" height="40" alt=""></td>
</tr>
<tr>
<td height="50" class="banner"><img src="images/banner_rice.jpg" width="160" height="40" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="800" height="24" summary="著作名">
<tr>
<td><img src="images/footer.gif" alt=""></td>
</tr>
</table>
</body>
</html>
CSS
@charset "Shift_JIS";
body{
margin:0;
padding:0;
text-align:center;
background-color: #330033;
}
table{
margin:0 auto;
padding:0;
border:0;
background-color: #FFFFFF;
}
tr,td{
margin:0;
padding:0;
border:0;
text-align:left;
background-color: #FFFFFF;
}
td{
vertical-align:top;
}
img{
border:0;
}
td.banner{
text-align:center;
}
.bannertable{
margin-top:50px;
}
