テーブルレイアウト
レイアウト用にテーブルを使用するときは、ブラウザのズレを防ぐのにalign="left"を指定しておく
<td width="580" align="left" style="line-height:1.7;">
セルのサイズを確実に指定するスペーサを活用
<img src="img/spacer.gif" width="80" height="1" />
<td width="580" align="left" style="line-height:1.7;">
セルのサイズを確実に指定するスペーサを活用
<img src="img/spacer.gif" width="80" height="1" />
テーブルレイアウト_1
■スタイルシート
body {
background-color: #F60;
color: #666;
font-family: Verdana, Arial, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3" "Hiragino Kaku Gothic Pro" Osaka, "MS Pゴシック", "MS P Gothic", sans-serif; font-size: 14px;
}
table.sheet1 {
width: 100%;
margin: 0px 0px 25px 0px;
padding: 0px;
border-collapse: collapse;
}
table.sheet1 td {
width: 500px;
font-size: 12px;
color: #404040;
padding: 5px;
background: #fff;
border: 1px solid #62cacd;
}
table.sheet1 td.t {
width: 100px;
text-align: center;
vertical-align: middle;
background-color: #edfbfe;
}
■HTML
<table cellspacing="0" cellpadding="0" border="0" class="sheet1">
<tbody><tr>
<td class="t">項目</td>
<td>内容</td>
</tr>
<tbody><tr>
<td class="t">項目</td>
<td>内容</td>
</tr>
</tbody></table>
body {
background-color: #F60;
color: #666;
font-family: Verdana, Arial, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3" "Hiragino Kaku Gothic Pro" Osaka, "MS Pゴシック", "MS P Gothic", sans-serif; font-size: 14px;
}
table.sheet1 {
width: 100%;
margin: 0px 0px 25px 0px;
padding: 0px;
border-collapse: collapse;
}
table.sheet1 td {
width: 500px;
font-size: 12px;
color: #404040;
padding: 5px;
background: #fff;
border: 1px solid #62cacd;
}
table.sheet1 td.t {
width: 100px;
text-align: center;
vertical-align: middle;
background-color: #edfbfe;
}
■HTML
<table cellspacing="0" cellpadding="0" border="0" class="sheet1">
<tbody><tr>
<td class="t">項目</td>
<td>内容</td>
</tr>
<tbody><tr>
<td class="t">項目</td>
<td>内容</td>
</tr>
</tbody></table>