- ベストアンサー
HTMLで書かれた二つの表をブログで横に並べたいのですが…
qandasokの回答
- qandasok
- ベストアンサー率42% (79/186)
テーブルをさらにテーブルで囲んで、横に並べれば良いです。 たとえば、以下のように。 <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
- HTMLでタイムスケジュールを作成しています。
HTMLでタイムスケジュールを作成しています。 ブラウザはIE7です。 左側の「No.」～「氏名」は固定です。 タイムスケジュールの部分に横スクロールを表示させ、ブラウザの横スクロールは使用しません。 1分単位で表示させたいのですが、どうしてもレイアウトが崩れてしまいます。 (添付の図ぐらいの間隔にしたいです。1分を1～3pxぐらいでしょうか。) 下記のHTMLは作成中のものですが、文字数制限のため一部を省略しています。 <table width="100%"> <td> <table width="310" align="left" border="1" cellspacing="0"> <tr> <td rowspan="2" width="10"><div align="center">No.</div></td> <td width="100"><div align="center">所属</div></td> <td width="100"><div align="center">部門</div></td> <td width="100"><div align="center">勤務区分</div></td> </tr> <tr> <td width="100"><div align="center">区分詳細</div></td> <td width="100"><div align="center">階級</div></td> <td width="100"><div align="center">氏名</div></td> </tr> <tr align="middle"> <td rowspan="2" height="50">1</td> <td>所</td> <td>部</td> <td>区</td> </tr> <tr align="middle"> <td>詳</td> <td>階</td> <td>太郎</td> </tr> </table> <div style="overflow-x:scroll; overflow-y:visible;"> <table height="100%" border="1" cellspacing="0"> <tr> <td colspan="60" align="center">08</td> <td colspan="60" align="center">09</td> <td colspan="60" align="center">10</td> </tr> <tr> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> </tr> <tr align="center"> <td colspan="100" bgcolor="lightpink" height="50">未</td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td colspan="70" bgcolor="lightgreen">仕</td> </tr> </table> </div> </td> </table>
- ベストアンサー
- HTML
- HTMLのどこを削除すれば罫線が消えますか？
添付画像の【ドリッパー＆リッド付きルシード・ドリップ・イン・マグ】の文字の下の罫線を削除したいのですが、HTMLのどこを削除すれば罫線が消えますか？ 教えて下さい。 <table width="700" cellspacing="0" cellpadding="5" style="font-size:10pt;"><tr> <td width="47" align="left" style="border-bottom:#666666 1px solid;"> <div align="left"></div></td> <td width="6" align="left" style="border-bottom:#666666 1px solid;"></div></td> <td width="601" style="border-bottom:#666666 1px solid;"><div align="left"><b>ドリッパー＆リッド付きルシード・ドリップ・イン・マグ</b></div></td> </tr> </table> <table width="700" border="0" cellspacing="0" cellpadding="10"> <tr> <td align="center"><img src="http://image.co.jp/deco/cabinet/item/04751544/imgrc0065803424.jpg" ></td> </tr> </table>
- ベストアンサー
- デザイナー・クリエイティブ職
- 横に並べたテーブル
200×200px程度のテーブルを複数（行数や列数はバラバラです）横に並べたいのですが、とりあえず、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ページのタイトル</title> <style type="text/css"> <!-- body{ color:#330000; background-color:#cc3333; } table.a{ background-color:#ffffff; padding:1px; border:1px solid #000000; display:inline; margin:5px; } td.a{ text-align:center; vertical-align:middle; border:1px solid #000000; font-size:small; padding:1px; background-color:#ffffff; } div.center{ text-align:center; } --> </style> </head> <body> <div class="center"> <table class="a"> <tr><td class="a">AAAAAAAAAA</td></tr> <tr><td class="a">AAAAAAAAAA</td></tr> </table> <table class="a"> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> </table> </div> </body> </html> という感じでdisplay:inlineで並べました。 これだとIEでは普通に見えるのですが、Ffだと表示が崩れてしまいました。 どこがいけないのかよくわかりません……。FfやNNでもちゃんと見えるようにしたいのですが、どうすればいいでしょうか。 また、スタイルシートでもっといい他の方法があったら教えていただけると助かります。 よろしくおねがいします。
- ベストアンサー
- HTML
- 表（table）の字の大きさの設定
ブログに表を載せたいと思って調べているところなのですが、↓のようにして、入力すると、字が１４くらいの大きさになってしまいます。９くらいの小さめの字にしたいのですが、字の大きさは、どのように入力すれば良いのでしょうか？教えて下さい。どうぞ宜しくお願い致します。 <div align="center"> <table border=1><tr><tdalign="center"colspan="3"bgcolor="#99ee66">あ<BR>あ</td></tr><tr><td align="center" colspan="3"bgcolor="#ffcd59">あ</td></tr><tr><td width="30" align="left" valign="top" bgcolor="#efefde">あ</td><td width="45" align="left" valign="top" bgcolor="#efefde">あ</td><td align="left">・あ<BR>あ</td></tr><td width="30" align="left" valign="top" bgcolor="#efefde">あ</td><td width="45" align="left" valign="top" bgcolor="#efefde">あ</td><td align="left">あ</td></tr></table></div>
- ベストアンサー
- HTML
- HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。
HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。 下のソースで５０と１３０のとこをきちんとエクセルのように枠線揃えたいのですが、 どのようにしたら良いのでしょうか？ よろしくお願いします。 <HTML> <BODY> <TABLE border=1><TR> <TH width="50"></TH> <TH width="135"></TH> <TH width="65"></th> <TH width="65"></th> <TH width="65"></th> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=130 colSpan=2>130</TD> </TR><TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=250>250</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- 表（セル）の線
スクロール状態の時、一番下までいくとmargin:-1px;と指定したbottomのところが上手く消えてくれないのでなにか良い解決方法はないでしょうか。 伸ばしてるときは大丈夫なんですが・・・ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> table,td {border: solid 1px slategray; border-collapse: collapse;} .close {height:100px;overflow-y:auto; } div {padding:0px;} </style> <script> function scr(){hoge=document.getElementById("konoko"); if(hoge.className=="close"){hoge.className="";} else {hoge.className="close";} } </script> </head> <body> <a href="#" onclick="scr()">伸縮すいっち</a> <br><br> <table> <tr> <td>名前</td> <td style="width:14px;">S<br>C<br>R</td> </tr> <tr> <td colspan="2" style="padding:0;"> <div id="konoko" class="close"> <table style="margin:-1px"> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> <tr> <td>名前</td> </tr> </table> </div> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- HTML 表の中の表
趣味でHPを作り始めたのですが表のところがよくわかりません。 大きな表（外枠）の中に2個目の表を作りたいのですが、どうしても2個目の表が大きな表（外枠）の真ん中に来てしまいます。2個目の表が大きな表の一番上にくっつくようにしたいのですがどうしたらいいのでしょうか。宜しくおねがいします。 <html> <body> <table border="1" height="500" width="300"> <tr> <td> <table border="1" width="100%"> <tr > <td colspan="3" > </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </body> </html>
- 締切済み
- その他（趣味・娯楽・エンターテイメント）
- safariとfirefoxとでテーブルレイアウトが変わってしまい、原因がわからずに困っています。
safariとfirefoxとでテーブルレイアウトが変わってしまい、 原因がわからずに困っています。 下記のタグでテーブルを表示したいのですが、 safariでは私が頭の中で描いていた通りのレイアウトになるのですが firefoxで開くとボックスが横に伸びてしまいレイアウトが変わってしまいます。まだ素人なので原因がまったくわからず困っています。 どなたかアドバイスを頂ければ幸いです。 <style type="text/css"> marguee { background:#000000; color:#ff6699; padding:5px 0; } .profile th{ background:#fff0ff; font:10px Verdana; color:#666666; text-align:right; padding:5px; } .profile td{ background:#ffffff; font:10px Verdana; color:#333333; padding:5px; } </style> <body bgcolor="000000"> <!-- TEMPLATE START --> <div class="profile"> <div align="center"> <table bgcolor="#000000" cellspacing="1" cellpadding="0"> <tr> <td colspan="2" style="padding:0"> <marquee behavior="alternate">Biography</marquee></td> </tr> <tr> <th>Name</th> <td width="300">テキスト</td> </tr> <tr> <th>DOB</th> <td width="300">テキスト</td> </tr> <tr> <th>Height</th> <td width="300">テキスト</td> </tr> <tr> <th>POB</th> <td width="300">テキスト</td> </tr> <tr> <th>Blood Type</th> <td width="300">テキスト</td> </tr> <tr> <td colspan="2" style="padding:0"> <marquee behavior="alternate">Biography</marquee></td> </tr> </table> </div> <!-- TEMPLATE END --> </body> </html>
- 締切済み
- HTML
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
補足
さっそくのご回答、ありがとうございます！ おっしゃる通りにしてみたら、横に並べることができました！ もう一つだけうかがわせていただきたいのですが、 現在、二つの表が隣同士でほとんどくっついてしまっています。 この表の間に少しスペースを作るにはどう記述したらいいのでしょうか？？ 左側の表が左詰め、右側の表が右詰め、という形式でも構いません。 申し訳ありませんが、お教えいただけるとありがたいです…。