左と右のマージンをautoとすると、センタリングされます。

お買い物
商品単価個数計
牛乳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">
<!--
p.note { background-color: #FFA; width: 20em;
margin-right: auto; margin-left: auto; }
table, caption { margin-right: auto;
margin-left: auto; }
-->
</style>
</head>
<body>

<p class="note">左と右のマージンをautoとすると、センタリングされます。</p>

<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>


</body>
</html>