Web屋どみんごの忘備録 -23ページ目

テーブルレイアウト

レイアウト用にテーブルを使用するときは、ブラウザのズレを防ぐのにalign="left"を指定しておく
<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>

フォントファミリー

font-family: Meiryo, 'Lucida Grande', Verdana, 'Hiragino Kaku Gothic Pro', sans-serif;