HTMLでテーブルをfloatで中央配置に並べたい
- HTMLでテーブルをfloatを使用して中央配置に並べる方法について教えてください。
- floatを使って複数のテーブルを並べた際、全体が左に寄ってしまう問題について解決方法を教えてください。
- テーブルとテーブルの間の隙間を固定にするため、マージンを固定したいです。どのように指定すれば良いですか。
- ベストアンサー
HTMLでテーブルをfloatで中央配置に並べたい
よろしくお願いします。 floatを使ってテーブルを横に複数個並べているのですが、全体が左に寄ってしまいます。 並べたテーブルすべてを中央に配置するにはどうしたらよいのでしょうか。 テーブルとテーブルの間の隙間を固定にしたいので、マージンは固定です。 ■HTML <body> <table><tr><td>TEST1</td></tr></table> <table><tr><td>TEST2</td></tr></table> <table><tr><td>TEST3</td></tr></table> </body> ■CSS table{ float: left; width: 100px; border: 1px solid #000000; margin: 0px 10px 0px 10px; } よろしくお願いいたします。
- fumowe
- お礼率83% (15/18)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
----パターン1 table{ float: left; width: 100px; border: 1px solid #000000; margin: 0px 10px 0px 10px; } div{/*たぶん詳細度が弱いので、適切なセレクタにしてください。*/ margin-left:auto;/*ブロック要素の中央ぞろえは幅を決めて、左右のmarginをautoが定石です。*/ margin-right:auto; width:360px } <div><!--中央寄せしたいテーブルを囲みます。*/--> <table><tr><td>TEST1</td></tr></table> <table><tr><td>TEST2</td></tr></table> <table><tr><td>TEST3</td></tr></table> </div><!--閉じます--> ---パターン2 質問の内容のhtmlそのままでｃｓｓだけで解決すると body{ text-align:center;/*インライン要素にのみ有効の中央揃え*/ } table{ display:inline-block;/*フロートではなくinline-blockで並べます*/ width: 100px; border: 1px solid #000000; margin: 0px 10px 0px 10px; } td{ text-align:left;/*ほっておくとtdまで中央ぞろえになる為*/ }
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
tableを配置に使用するのは?です。 あくまで本当の表として・・ floatは本来、画像などのデータの周囲にテキストを回りこませるためのものでこの様な用途には不向きです。特に中央配置は <div class="table3"> <div> <table></table> </div> <div> <table></table> </div> <div> <table></table> </div> </div> のように一つ一つの表と全体をdivで囲んで、 div.table3{width:100%;margin:0 auto;text-align:center;} div.table3 div{display:inline-block;width:30%;position:relative;} div.table3 div table{width:100%;} とか・・・ いっそのこと、全体をtableに入れるとか・・
お礼
返信ありがとうございます。 こちらでも実行してみました。無事配置されました。 ありがとうございました！
関連するQ&A
- tableにtable。table同士の間隔を拡大
スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
- 初心者です。floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません
floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません メニューとコンテンツが縦線で区切られてるのですが右側のテーブルと縦線が合体してしまいます。 縦線とテーブルの間に少し隙間を作りたいのですが、どうすればいいでしょうか？ HTMLとCSSを書いておきます。よろしくお願いします。 ・HTML <div id="contents"> <table> <tr> <td>×</td><td><p>あああ</p> </tr> <tr> <td>○</td><td><p>いいい</p> </tr> <tr> <td>■</td><td><p>ううう</p> </tr> </table> <br><br> a </div> <div id="left-menu"> <ul> <li><a href="index.html" class="a8">メニュー</a></li> <li><a href="league.html" class="a8">メニュー</a></li> </ul> </div> <div id="footer"> ああああああ </div> ・CSS body { width: 900px; } #contents { float: right; width: 740px; border-left: 1px solid #999;} #left-menu { float: left; width: 150px;} #footer { clear: both; }
- 締切済み
- HTML
- cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- CSSのテーブルの件で
はじめまして よろしくお願いいたします。 CSSでテーブルを作っているのですが うまくいきません 作りたいのは下記のようなテーブルです ┌───────┐ │ A │ B │ └───────┘ 点線ではなく普通の線で構いません 大きなテーブルの幅が500pxとして Aを200px Bを300px にしたいのです テーブルのIDは「table2」にしています <外部CSSの部分> #table2{border:1px solid #000000; width:500px; } #table2 th{border:1px solid #000000; width:200px; } #table2 td{border:1px solid #000000; width:300px; } <htmlの部分> <table id="table2"> <tr> <td></td> </tr> </table> 色々やってみたのですが うまく行きません 詳しい方教えて頂けないでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- firefoxのみテーブルのborderが消える
firefoxのみテーブルの上下のborderの一部が消えてしまいます。 ウィンドウのサイズを変えると消える位置が変わります。 消えないための方法はありますか？ 【CSS】 table.aaa{ width:750px; border-top:1px solid #333; border-bottom:1px solid #333; border-collapse:separate; border-spacing:0; text-align:center; margin-top:30px; } td.bbb, td.ccc{ padding:30px 30px; } td.ccc{ width:100px; background:#000; color:#fff; } ul{ width:750px; margin-left: -23px; overflow:hidden; } ul li { display: inline; width: 200px; margin-left: 30px; float: left; } ul li img { display: block; border: 1px solid #555; } 【HTML】 <table class="aaa"> <tr> <td class="ccc">テスト１</td> <td class="bbb">※※※※※※※※※※</td> </tr> </table> <ul> <li><a href="xxx.html#w1"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w2"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w3"><img src="sample.jpg" width="200" height="150" ></li> </ul> <ul> <li><a href="xxx.html#w4"><img src="sample.jpg" width="200" height="150" ></li> </ul> <table～…～</ul>まで10個ほど繰り返す。
- ベストアンサー
- HTML
- テーブル内widthでの改行処理がIEとFirefoxで異なる
テーブル内のtdに対してwidthを指定していますが、IEとFirefoxで表示が異なります。具体的には下記のコードにて、【文章１】が長い場合、IEではwidth:160pxで自動改行するのですが、Firefoxでは改行されず横に表示されてしまいます。 いちいち改行文字を入れるのはめんどうなのでFirefoxでも自動改行されるようにしたいのですが、何かうまい手をご存知の方、ご教示願います。 ＜スタイルシート＞ #contact_table table { width:600px; padding:auto; margin:auto; text-align:center; border-collapse:separate; } #contact_table tr { padding:auto; margin:auto; text-align:center; } #contact_table td { padding:5px; margin:5px; border-top:solid 2px #EEEEEE; border-left:solid 2px #EEEEEE; border-right:solid 2px #C0C0C0; border-bottom:solid 2px #C0C0C0; font-size:12px; font-weight:normal; color:#000000; text-align:left; line-height:1.5em; background:#DAEAF3; } #contact_table td.item { width:160px; white-space:nowrap; background: #000080; text-align:center; border-top:solid 2px #0000CC; border-left:solid 2px #0000CC; border-right:solid 2px #000033; border-bottom:solid 2px #000033; color:#FFFFFF; } ＜HTML＞ <div id="contact_table"> <table summary="お問い合わせ"> <tr> <td class="item">【文章１】</td> <td>【文章２】</td> </tr> <tr> <td class="item">【文章１】</td> <td>【文章２】</td> </tr> ・・・ </table> </div>
- ベストアンサー
- HTML
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
- css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- CSS
お礼
返信ありがとうございます。 パターン２を使わせていただきました。 助かりました。ありがとうございました！