HTMLで書かれた二つの表をブログで横に並べたいのですが…

質問

こんばんは。

ブログの中で、HTMLで書かれた表（テーブル？）を横に並列に並べたいのですが、
どうしてもタテ（上下）に並んでしまい、困っています。

ブログのエントリ部分の横幅は、十分にありますので、
あとはHTMLの記述でどうにかならないかと思っているのですが…。

以下に、ソースを貼りつけておきます。
これは表（テーブル）一つ分のソースで、
これと同じような表を、もう一つヨコに並べたいのです。

ちなみに、こういったサイトで作成した表（サッカーのフォーメーション）です。
http://tf.loopshoot.com/

なお、ブログはMovable Typeを使用しています。

どうぞよろしくお願いいたします。

<!-- TextFormations -->
<div style="text-align:center; margin:0; width:200pt; font-size:9.0pt;" >
アルビレックス新潟 (J1 6節 vsサンフレッチェ広島)
</div>
<div id="fhead" style="margin:0 ;padding: 15pt 3pt 8pt 3pt; border: 1px solid rgb(0,102,255); background: rgb(255,255,255); color:#666; width:200pt;">
<table id="f_table" border="0" cellpadding="0" cellspacing="0" style=" color:#666; border-collapse:collapse; table-layout:fixed; width:200pt; font-size:9.0pt; ">
<!-- FW -->
<tr style="height:13.5pt;">
<td >　</td>
<td colspan="2" id="tb_10" style="text-align:center;vertical-align:top; padding:1pt 20pt;" >
16.大島秀夫(20.チョ・ヨンチョル)
</td>
<td >　</td>
</tr>
<tr style="height:20.5pt;">
<td colspan="2" id="tb_9" style="text-align:left; vertical-align:top; padding:1pt 25pt 1pt 10pt;">
9.ペドロ・ジュニオール
</td>
（途中、略）
<!-- GK -->
<tr style="height:13.5pt;">
<td >　</td>
<td colspan="2" style="text-align:center;padding:1pt 20pt;" >
1.北野貴之
</td>
<td >　</td>
</tr><!-- GK fini -->
</table>
</div>
<div id="tfooter" style="letter-spacing:normal; text-align:center; width:200pt; margin:0; font-size:8.5pt; ">
created by
<a href="http://tf.loopshoot.com/" target="_blank">
:TextFormations</a>
<a href="http://tf.loopshoot.com/more_info.pl?fid=1p356tq5ZH" target="_blank">
:more info
</a>
<a href="http://tf.loopshoot.com/members.pl?fid=1p356tq5ZH" target="_blank">
:R</a>
</div>

回答No.2

qandasok · ベストアンサー

>この表の間に少しスペースを作るにはどう記述したらいいのでしょうか？？

大枠の<td>にstyle属性を当てて、paddingで余白を作ります。
つまり、<td style="padding:0px Ypx 0px 0px">
または<td style="padding:0px 0px 0px Xpx">として、

<table>
<tr><td style="padding:0px Ypx 0px 0px">
　　　<table>
　　　<tr><td>1</td></tr>
　　　<tr><td>2</td></tr>
　　　</table>
</td><td style="padding:0px 0px 0px Xpx">
　　　<table>
　　　<tr><td>3</td></tr>
　　　<tr><td>4</td></tr>
　　　</table>
</td></tr>
</table>

とおくと、Yの値分だけ左表の右側に、Xの値分だけ右表の左側に余白が作られます。
好きな値を入れて、好きなだけ余白をとってください。
たとえば、30と入れれば、30px分だけ余白ができます。

なお、padding:～px ～px ～px ～pxは、左側から順番にいって、
上・右・下・左 側の余白を大枠の<td>～</td>の内部につくります。

お礼

> 大枠の<td>にstyle属性を当てて、paddingで余白を作ります。

なるほど、そうやってpaddingを作るんですね。

よく分かりました！
ご丁寧に、ありがとうございます！

回答No.1

qandasok

テーブルをさらにテーブルで囲んで、横に並べれば良いです。
たとえば、以下のように。

<table>
<tr><td>
　　　<table>
　　　<tr><td>1</td></tr>
　　　<tr><td>2</td></tr>
　　　</table>
</td><td>
　　　<table>
　　　<tr><td>3</td></tr>
　　　<tr><td>4</td></tr>
　　　</table>
</td></tr>
</table>

補足

さっそくのご回答、ありがとうございます！

おっしゃる通りにしてみたら、横に並べることができました！

もう一つだけうかがわせていただきたいのですが、
現在、二つの表が隣同士でほとんどくっついてしまっています。
この表の間に少しスペースを作るにはどう記述したらいいのでしょうか？？
左側の表が左詰め、右側の表が右詰め、という形式でも構いません。

申し訳ありませんが、お教えいただけるとありがたいです…。