tableタグで不思議な空間が

先日、外国図鑑を投稿しました。

arsinput.hatenablog.jp

その中で、情報を記載する枠にtableタグを使用したのですが、実際に公開したページをパソコンで確認したところ、意図していない不思議な空間ができていました。

なぜこのような空間ができたのでしょう？

書き記したタグに誤りがあるようには思えません。

（ソースを残しておきます）

<table border="3" width="600">
<tbody>
<tr>
<th colspan="4"><span style="font-size: 200%;">アイスランド共和国</span></th>
</tr>
<tr>
<td width="60">地域</td>
<td width="240">北ヨーロッパ</td>
<td width="60">首都</td>
<td width="240">レイキャビク</td>
</tr>
<tr>
<td>面積</td>
<td>10.3万㎢</td>
<td>人口</td>
<td>
<p>20万4134人<br />（2020年1月）</p>
</td>
</tr>
<tr>
<td>言語</td>
<td>アイスランド語</td>
<td>通貨</td>
<td>ユーロ</td>
</tr>
<tr>
<th colspan="2">地図</th>
<th colspan="2">国旗</th>
</tr>
<tr>
<th colspan="2"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/arshii/20210830/20210830212849.gif" alt="" width="280" height="280" class="hatena-fotolife" itemprop="image" /></th>
<th colspan="2"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/arshii/20200508/20200508114305.png" alt="" width="280" height="280" class="hatena-fotolife" itemprop="image" /></th>
</tr>
</tbody>
</table>

なお、スマホで画面を表示した際は不思議な空間が表示されることなく閲覧することができます。

パソコンで画面を表示したときだけの症状ということです。

謎です。

が、過去の経験から、このブログのデフォルトのブログテーマに含まれるCSSが原因なのかと推測しています。

CSSをいじってみました - アーシの毎日インプット

今回は問題発見とあたりをつけるところで終わりにしますが、今後はブログテーマのCSSをいじって解決を図ろうかと思います。

ついでにもう一つ、、、

tableタグのborderがtableの下罫線に反映されていないことも気になっています。

これもブログテーマのCSSをいじれば直るような気がしています。