こんばんは。
ブログの中で、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=1p356tq … target="_blank">
:more info
</a>
<a href="http://tf.loopshoot.com/members.pl?fid=1p356tq5ZH" target="_blank">
:R</a>
</div>
No.2ベストアンサー
- 回答日時:
>この表の間に少しスペースを作るにはどう記述したらいいのでしょうか??
大枠の<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
- 回答日時:
テーブルをさらにテーブルで囲んで、横に並べれば良いです。
たとえば、以下のように。
<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>
この回答への補足
さっそくのご回答、ありがとうございます!
おっしゃる通りにしてみたら、横に並べることができました!
もう一つだけうかがわせていただきたいのですが、
現在、二つの表が隣同士でほとんどくっついてしまっています。
この表の間に少しスペースを作るにはどう記述したらいいのでしょうか??
左側の表が左詰め、右側の表が右詰め、という形式でも構いません。
申し訳ありませんが、お教えいただけるとありがたいです…。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「Ad Remover」について
-
アフィリエイト
-
楽天カードでガソリン入れたの...
-
microadの広告
-
Googleによる楽天のエロ広告の...
-
グーグル広告がうざい
-
TikTokLiteをしていますが、他...
-
ネットで不愉快な広告が表示さ...
-
【ブログやnoteのような記事サ...
-
ある方のブログに コメントし ...
-
細切れでやたら長い記事 目的は...
-
アフィリエイトで成功できる人...
-
Googlechrome 広告 消したい
-
イラスト投稿用のホームページ...
-
Googleでアフィリエイト禁止事...
-
最近の、画面いっぱいに出てく...
-
ツイッターのメール問い合わせ...
-
アフィリエイト初心者です。 こ...
-
半兵衛でさえ、アフィリエイト...
-
Instagramのロゴ使用ガイドライ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ブログ記事にスペースを入れたい
-
Seesaaブログで記事内に表を載...
-
FC2ブログで”記事本文”に毎回定...
-
tableの中のtableの表示と外側...
-
タグ[table]の自動改行について
-
wordpress,simplicity スマホ時...
-
楽天アフィリエイトについて 現...
-
ヤフーオークションで商品説明...
-
HPからのメール送信エラーの...
-
画像の後に改行が反映されない(...
-
WordPressの記事投稿でHTMLタグ...
-
iPhoneで作れる高級感のあるオ...
-
三つ折りのリーフレットを作りたい
-
ワードプレスに詳しい方に質問...
-
はてなブログ 設定
-
Becky!ver.2で、返信・転送用テ...
-
Powerpointの表のスタイルで好...
-
改ざんは修正や訂正という意味...
-
Wordの「キーボードのユーザー...
-
はてなの脚注記法みたいなもの...
おすすめ情報