html - 2 つのテーブルを一列に並べる

Question

次のコードがあります。

<div id="topinfo" style="margin: 10px 320px">
<table>
<tr>
<td>
<img src="/images/topinfo/flagpt.png""/>
</td>
<td>
<img src="/images/topinfo/flaguk.png""/>
</td>
</tr>
</table>

<table>
<tr>
<td>
<img src="/images/topinfo/assistencia.png" /> </br>
<img src="/images/topinfo/numero.png" />
</td>
<td background="/images/topinfo/separator.png">
</td>
<td>
<a href='/top-info/sobre-nos'><img src="/images/topinfo/sobrenos.png" /> </a> </br>
<a href='/top-info/contactos'><img src="/images/topinfo/contactos.png" /> </a>
(...)

その下にはさらにコードがありますが、それが問題だとは思いません。いくつかの基本的な画像とリンクだけです

ここでの私の問題は、両方を同じ行に入れたいということですが、現時点では機能していません。テーブルと div で "style='display:inline;'" を使用しようとしましたが、それでも機能しませんでした。また、両方のテーブルを「マージ」しようとしましたが、高さが固定されているため、うまくいきません。

おそらく非常に簡単な修正がありますが、私はまだ css と html の専門家ではありません。

(スクリーンショットは現在の状態を示しています。左のグラフィックは「float:left;」を含むロゴです)

編集:(同じテーブルでそれらを実行しようとしたときに何が起こるかも追加されています)

Answer 1

編集：画像をテキストと同じtdに配置し、仕切りの画像をより高く編集してみてください。

<table>
<tr>
<td>
<img src="/images/topinfo/flagpt.png""/>
<img src="/images/topinfo/assistencia.png" /> </br>
<img src="/images/topinfo/numero.png" />
</td>
<td background="/images/topinfo/separator.png">
</td>
<td>
<img src="/images/topinfo/flaguk.png""/>
<a href='/top-info/sobre-nos'><img src="/images/topinfo/sobrenos.png" /> </a> </br>
<a href='/top-info/contactos'><img src="/images/topinfo/contactos.png" /> </a>

Answer 2

気にしないで、単一のテーブルと「valign = middle」プロパティを使用してすべてを整列させて修正しました。

とにかくありがとう。