tableのセンタリングが上手くいかない

お世話になっております。

基本的な事で申し訳ないのですが
tableのセンタリングが上手くいかないので質問失礼します。

html
1	<p align="center">
2		aaa<br>
3	<table width="600" border="4" cellspacing="1" style="border: solid;"  align="center">
4		<tr>
5			<td>bbb</td>
6			<td>ccc</td>
7		</tr>
8	</table>
9	</p>

ブラウザの表示

　　　　　　　　　　　　　　　　↓こちらはセンタリング正常に行っている
　　　　　　　　　　　　　　　　aaa　　　　　　　　　　　　｜画面端
bbb　　　　　　　　　　　　　ccc　　　　　　　　　　　　　 ｜画面端
　　　　　　　　　　　　　　　　↑tableタグの部分はうまく行っていない……

とtableを中央に表示したいのですが
aaaはうまく中央に表示されているのですが
table「bbb　　ccc」はうまくセンタリング出来ておりません。

<p align="center"> で囲んでいるし <table……　align="center"> もやっているのにうまくセンタリング出来ないのですがこの場合cssでやらないとうまく出来ないのでしょうか？

何か基本的な上部のcssで記載があるのかと思い質問失礼します。

説明不足大変申し訳無いのですが上記お問い合わせいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

センタリングされない原因としては、p要素内にtable要素が入れられないので、ブラウザが自動的にp要素の外にtable要素を出しているからではないかと。p要素をdiv要素に変更することで動作します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<div align="center">
15    aaa<br>
16    <table width="600" border="4" cellspacing="1" style="border: solid;" align="center">
17        <tr>
18            <td>bbb</td>
19            <td>ccc</td>
20        </tr>
21    </table>
22</div>
23</body>
24</html>