古いプラウザのセンタリング

text-align: centerを指定したdiv要素でブロック要素を囲んでいます。

お買い物
商品単価個数計
牛乳1781178
納豆1081108
なす40280


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>古いブラウザーでもセンタリングする</title>
<style type="text/css">
<!--
div.block1 { text-align: center; }
p.note { background-color: #FFA; width: 20em;
margin-right: auto; margin-left: auto; }
table, caption { margin-right: auto;
margin-left: auto; }
p.note, td { text-align: left; }
-->
</style>
</head>
<body>

<div class="block1">
<p class="note">text-align: centerを指定したdiv要素でブロック要素を囲んでいます。</p>
</div>

<div class="block1">
<table border>
<caption>お買い物</caption>
<tr><th>商品</th><th>単価</th><th>個数</th><th>計</th></tr>
<tr><td>牛乳</td><td>178</td><td>1</td><td>178</td></tr>
<tr><td>納豆</td><td>108</td><td>1</td><td>108</td></tr>
<tr><td>なす</td><td>40</td><td>2</td><td>80</td></tr>
</table>
</div>

</body>
</html>