tableﾀｸﾞの上に文字が表示されてしまいます｡
現在､以下のhtmlｿｰｽｺｰﾄﾞをchrome(ﾊﾞｰｼﾞｮﾝ 29.0.1547.65)とsafari(ﾊﾞｰｼﾞｮﾝ6.05)で表示させたところ､</table>ﾀｸﾞの下に書いた文字がﾃｰﾌﾞﾙの上に表示されてしまいます｡この原因がわかりません｡
環境
PC：imac
OS:Max OS X (ﾊﾞｰｼﾞｮﾝ 10.7.5)
ﾌﾞﾗｳｻﾞ:chrome(ﾊﾞｰｼﾞｮﾝ 29.0.1547.65)
safari(ﾊﾞｰｼﾞｮﾝ6.05)
htmlﾌｧｲﾙはxammpのhtdocsに保存してあります｡
------------htmlｿｰｽ-----------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>実験</title>
</head>
<body>
<table border="1">
<caption>ｷｬﾌﾟｼｮﾝ</caption>
<thead>
<tr>
<th>th</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<p>ｻﾝﾌﾟﾙｻﾝﾌﾟﾙｻﾝﾌﾟﾙｻﾝﾌﾟﾙ</p>
</td>
</tr>
</tbody>
</tabel>
<h1>h1</h1>
<p>Pﾀｸﾞ</p>
</body>
</html>
ﾍﾞｽﾄｱﾝｻｰ