- ベストアンサー
テーブルの位置について
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞■最初に表示した右寄せ画像にテーブルが重なってしまう。 width="100%"が何に対しての100%なのかを考えると、この問題は解決出来ると思います。 ---------------------------------------------------------------------- <div class="center" style="margin-left: 194px; margin-right: 194px;"> <table cellpadding="0" style="width: 100%;"> ---------------------------------------------------------------------- とテーブルの外側のタグにて、左右のマージンを設定してあげると、 右寄せの画像に重ならなくなります。 ＞■最終列があるため１列目と２列目が左よりになる。 テーブルの左にダミーの列を作らないなら、 ＞その幅に合わせて同じだけのmargin-leftを設定で取るようにすることは可能なのでしょうか？ とお気づきのようですが、 margin-leftを使用すればよいです。 ただし、 ＞また、margin-left を設定できても、テーブルに width=100% を指定していると、各列の中身の幅に応じて列の幅が設定されます。 margin-leftをテーブルタグに指定した場合は、width=100%の設定と邪魔しあうので、 うまく行きません。 そこで、maegin-leftを、テーブルの１つ外のタグに指定してあげます。 ---------------------------------------------------------------------- <div class="center" style="margin-left: 279px; margin-right: 194px;"> <table cellpadding="0" style="width: 100%;"> ---------------------------------------------------------------------- テーブルの１つ外のdivタグのmargin-leftに左側に空けたい文のマージンを足してあります。 これで、目的としたイメージに近づいたのでは、ないでしょうか。
その他の回答 (3)
- Yanch
- ベストアンサー率50% (114/225)
CSSを使用する事と、TABLEを使用する事は排他関係には、ないので、 TABLEを使用していても、CSSは同時に使用可能ですよ。 やりたい事のイメージは、近かったのでしょうか？ ポイントとなるのは、左側に開く余白を指定してあげる事です。 左側の余白を指定できる方法は、いくつかあると思いますが、 tableを使用する方法が、一番制限を受けないので、良いと思います。 スタイルシートを使用した例 ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>テーブルの配置サンプル</title> <style type="text/css"> <!-- .border1px { border: 1px solid black; } .side_col_width { width: 100px; } --> </style> </head> <body> 一番左側にダミーの列を１つ用意してみる<br> <table border="0" style="width: 100%;"> <colgroup> <col class="side_col_width"> <col> <col> <col class="side_col_width"> </colgroup> <tr> <td></td><td class="border1px">あ<br></td><td class="border1px">い<br></td><td class="border1px">う<br></td> </tr> <tr> <td></td><td class="border1px">え<br></td><td class="border1px">お<br></td><td class="border1px">か<br></td> </tr> <tr> <td></td><td class="border1px">き<br></td><td class="border1px">く<br></td><td class="border1px">け<br></td> </tr> <tr> <td></td><td class="border1px">こ<br></td><td class="border1px">さ<br></td><td class="border1px">し<br></td> </tr> </table> <br> もしくはテーブルを入れ子にして<br> <table border="0" width="100%"> <tr> <td class="side_col_width"> </td> <td> <table border="0" style="width: 100%;"> <colgroup> <col> <col> <col class="side_col_width"> </colgroup> <tr> <td class="border1px">あ<br></td><td class="border1px">い<br></td><td class="border1px">う<br></td> </tr> <tr> <td class="border1px">え<br></td><td class="border1px">お<br></td><td class="border1px">か<br></td> </tr> <tr> <td class="border1px">き<br></td><td class="border1px">く<br></td><td class="border1px">け<br></td> </tr> <tr> <td class="border1px">こ<br></td><td class="border1px">さ<br></td><td class="border1px">し<br></td> </tr> </table> </td> </tr> </table> </body> </html>
- Yanch
- ベストアンサー率50% (114/225)
テーブルに左側に１列、ダミーの列を作成してみてはどうでしょう。 ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>テーブルの配置サンプル</title> <style type="text/css"> <!-- .border1px { border: 1px solid black; } --> </style> </head> <body> 一番左側にダミーの列を１つ用意してみる<br> <table border="0" width="100%"> <colgroup> <col width="100px"> <col> <col> <col width="100px"> </colgroup> <tr> <td></td><td class="border1px">あ<br></td><td class="border1px">い<br></td><td class="border1px">う<br></td> </tr> <tr> <td></td><td class="border1px">え<br></td><td class="border1px">お<br></td><td class="border1px">か<br></td> </tr> <tr> <td></td><td class="border1px">き<br></td><td class="border1px">く<br></td><td class="border1px">け<br></td> </tr> <tr> <td></td><td class="border1px">こ<br></td><td class="border1px">さ<br></td><td class="border1px">し<br></td> </tr> </table> </body> </html>
お礼
ご返信ありがとうございます。 専門家の方のアドバイスがいただけて光栄です。 ですが、１列目にダミーを入れるという方法は、 スタイルのために空のtdタグを追加するということになるため、 可能であればCSSで対応したいと考えております。 CSSでの実現は可能なのでしょうか？ CSSで実現不可能であれば、ご提示いただいた方法で解決したいと思いますが、 最終列の幅はテーブルによって異なります。 最初の列の幅をCSSで最終列の幅に自動で合わせることは可能でしょうか？ 解決まで、どうかもう少しお付き合いください。
- Yanch
- ベストアンサー率50% (114/225)
＞・最終列以外の列が、画面の中央にくるようにする 列数が３列以上あるのに、 「最終列以外の列が、画面の中央にくる」？ どう言うイメージなのだろう？
お礼
説明不足ですみません！！ イメージとしては、最終列を除いたテーブルを横側中央に表示し、 最終列を右端に表示するようなイメージです。 最終列はオマケのようなものを画面右端に表示させたいだけだからです。 CSS指定なしで表示させたところ、最終列の分も含めて横側中央に表示されるので、 最終列を除いた部分が少し左に寄ってしまうのです。 イメージ伝わりましたでしょうか？？ 補足説明が必要でしたら、何でも聞いてください。 分かる範囲で回答しますので、ご協力お願いいたします。
関連するQ&A
- テーブルの位置を細かく指定したい。
現在、テーブルを組み合わせたサイトを作っていまして そのテーブルの位置に悩んでおります。 背景固定で一つ大きめのイラストを置いていまして そこに合わせてテーブルの位置を細かく調整したいのです。 center、left、rightの偏った3種類の位置じゃなく 左から200ピクセル程度の位置にテーブルを置きたいのです。 この様なタグはありませんか? これはCSSなどて指定するしかないのでしようか?
- ベストアンサー
- HTML
- テーブルの位置について
今、初めてホームページを作成(HTML)しているのですが テーブルの位置に困っています。 私は、微妙に中央よりの左にしたいのですが どの本、サイトにもテーブルなどの位置設定には ARIGN=""で左、右、中央の極端な位置しかありません。 微妙な位置はできないのでしょうか？ 友達に聞いたところ(友達も初心者なのですが) <body leftmargin="★">～</body> ★の中に25pxとかの数字を入れる。で左側が空く というのをどこかでみつけたらしくやってみたのですが できませんでした。 難しいことはよくわかならいので 簡単な方法で教えていただければ嬉しいです。
- ベストアンサー
- レンタルサーバ・ASP
- テーブルのレイアウトがうまくいきません
DreamweaverMXで簡単なホームページを作っています。 テーブルをつかってレイアウトをしようと思いましたが、思うようになりません。やり方が間違っているのでしょうか？ まず大枠で１行３列のテーブルを作り、幅だけ800pに指定。（高さ指定はしていません） 両端の列はそれぞれ幅だけ180pに指定。 で、そのそれぞれの列の中にまた必要なテーブルを作ってレイアウトしようとしてるのですが 一番左の列の中にテーブルが３つ入っていて一番縦長になっています。真ん中と右の列にも必要なテーブルや画像を入れているのですが左の列が長いせいかそれぞれの列の一番上がそろいません。左の列の長さに合わせて一番大外のテーブルの高さが決まってしまってしまいますが、真ん中と右の列の中のテーブルたちは左の列の高さの真ん中に配置されてしまいます。 方法がまずいのでこうなってるのだとは思いますが、本を見ながら勉強しつつやっていますが思うようにいかないので質問させてもらいました。 一番上をツライチに合わせるにはどうすればいいのでしょうか？ というか上記の方法の悪いところを指摘していただければと思います。よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- テーブルを
テーブルの位置を、指定したいんですけど・・ 私の知ってるタグは右に寄せる（right）、中央に配置（center）、左に寄せる（left）の三つだけです。 左と、中央の間ぐらいに配置したいんですけど・・ どうすればいいでしょうか？
- ベストアンサー
- その他([技術者向] コンピューター)
- テーブルの上下右側に文字列を表示したい
添付画像のように、テーブルの上下右側に、文字列を表示したいと考えています。 テーブルの幅や列数はデータの内容によって変わります。 HTML・CSSをどのように記述すれば上記を実現できるでしょうか。 ※単に右寄せにすると、テーブルの右端ではなく画面の右端になります。 試行錯誤しているのですがうまくいきません。 どなたかお知恵をお貸しください！
- ベストアンサー
- HTML
- HP作成のテーブルについて
教えてください。HPを作成する時にテーブルタグ<table>を使っているのですが、テーブルが２列になり、右と左の縦の長さが異なる時、片一方が中央揃えになって、上の位置が合いません。 テーブルが２列で縦の長さが違っても、一番上の位置に両方ともそろえたいのですがどうすれば良いでしょうか？教えてください。
- ベストアンサー
- その他（インターネット・Webサービス）
- Winで見たときfloatさせたメニュー位置がずれる問題
お世話になります。 XHTML+CSSにてウェブページを作っている者です。 WinIEで見たときのfloatさせた置換画像の位置ずれについての質問です。 内容としては、XHTMLにて<li>を使いメニューを制作し、CSSにてそれをfloatさせ横並びのメニューにします。そしてtext-indent:-9999pxでテキストを見えなくし、代わりに<a>要素で背景に画像を配置し、画像の横並びのメニューを実現している・・・というものです。 safari、Opera、MacIE5ともにMacではやりたいことが実現できているのですが、WinIE6、7だと横並びしているメニュー画像が右へいくほど少しずつ下へずれていってしまっています。ちょうど右下がりの階段のように・・・。 これはなぜなんでしょうか？？marginとかpadding関係のバグなのでしょうか？ ちなみに、メニュー大枠の幅とひとつずつのメニュー幅の合計はピッタリ一致させているのですが、この余裕のなさが原因でしょうか？（そう思ってひとつずつのメニュー幅をそれぞれ1pxずつ縮めてみたりしたんですが、ダメでした）
- 締切済み
- HTML
- XHTMLでオブジェクトを画面中央に置く方法
オブジェクトをブラウザの画面中央に置きたいのですが、これのうまいやり方が分かりません。XHTMLに準拠し、CSSもきちんと使いたいので「縦幅・横幅100%で縦横中央寄せにしたテーブルの中に置け」というやり方は使いたくありません。というよりXHTMLに準拠した場合、テーブルに限らず全てのタグにおいて、縦幅をいっぱいに広げるということはできないみたいです。横位置を中心にするにはCSSでtext-align: center;でできますが、これの縦にあたる記述法はありません。縦方向の中心にセットするにはどうしたら良いのでしょうか
- ベストアンサー
- HTML
- テーブル内のテキストが右寄り
現在ホームページビルダーでHPを作成しています。 テーブルの中にいくつかのテーブルを入れ、その中のテキストを中央に表示されるように指定し、最初のうちはレビューで確認してもちゃんと中央に表示されていたのですが、そのままページを作成していたところ、ある時からレビューで見ると、テーブルのうちのいくつかが、中のテキストが右寄りに表示されてしまうようになりました。 編集画面ではちゃんと中央に表示されていて、htmlでもcenterと指定されています。 その上、各テーブルの幅も指定しているのですが、レビューで見ると表示画面いっぱいいっぱいまで間延びした感じで表示されるようになってしまいました。（最初は指定した幅通りに表示されていたのですが、、、。） こうなってしまう原因と対処方法をご存知の方がいらっしゃいましたら、ご教示お願いいたします。
- ベストアンサー
- ホームページ作成ソフト
お礼
ご返信ありがとうございます。 table の中にtableを入れるというのは、XHTMLではNGですね。 空の列を挿入するのであれば、テーブルにmargin-leftを設定する方がよいかと思います。 が、この幅を最終列の幅と自動で合わせることは可能なのでしょうか？ ちょっと長いですが、ソース（のうち、不要な情報を除いたもの）を張ります。 １つ目の右寄せの画像の後、残った左側のスペースに文章とテーブルを表示させたいと思っています。 このテーブルは３列ですが、一番右の列はちょっとした画像が入るか、空で、改行なくできるだけ最小の幅に設定したいです。 左側２列にも、それぞれ画像が入りますが、１列目は右寄せ、２列目は左寄せで入れて、 １列目と２列目の画像を１つの画像としてみたときに、画面中央になるようにしたいのです。 現在のソースでは、 ■最初に表示した右寄せ画像にテーブルが重なってしまう。 ■最終列があるため１列目と２列目が左よりになる。 といった問題があります。 右端の列はできるだけ最短の幅になるように設定したいのですが、 テーブルによってこの幅が変わるので、手作業で指定するのは困難です。 その幅に合わせて同じだけのmargin-leftを設定で取るようにすることは可能なのでしょうか？ また、margin-left を設定できても、テーブルに width=100% を指定していると、各列の中身の幅に応じて列の幅が設定されます。 提示例のように、１列目と２列目の中身の幅が 68pt, 241pt だったりすると、 １列目と２列目を合わせて１つの画像としてみたときに、 全体的に左寄りに配置されています。 解決策がありましたら、教えてください。
補足
現状、問題となっているソースです。 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head profile="http://purl.org/net/ns/metaprof"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>aaa</title> </head> <body class="mainIndex"> <div id="body"> <a href="img/e9.png"> <img style="float:right" src="img/5f.gif" alt="..." width="184" height="164" /></a> <img class="middle" src="img2a0e.gif" alt="..." width="65" height="31" /> あああああああああああああああああああああああ いいいいいいいいいいいいいいいいい, <div class="center"><table cellpadding="0" width="100%"> <tbody><tr valign="middle"> <td align="right"><img class="middle" src="img/51.gif" alt="..." width="68" height="35" /></td> <td align="left"><img class="middle" src="img/57.gif" alt="..." width="85" height="35" /></td> <td class="right" align="right"> <img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-01" name="0001_2008_003-01"><img src="img/a1.gif" class="right" alt="..." width="20" height="33" /></a> </td> </tr> <tr valign="middle"> <td> </td> <td align="left"><img class="middle" src="img/ea.gif" alt="..." width="112" height="31" /></td> <td class="right" align="right"> </td> </tr> <tr valign="middle"> <td> </td> <td align="left"><img class="middle" src="img/a3.gif" alt="..." width="237" height="31" /></td> <td class="right" align="right"> <img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-02" name="0001_2008_003-02"><img src="img/a2.gif" class="right" alt="..." width="20" height="33" /></a> </td> </tr> <tr valign="middle"> <td> </td> <td align="left"><img class="middle" src="img/ee.gif" alt="..." width="241" height="54" /></td> <td class="right" align="right"> </td> </tr> <tr valign="middle"> <td> </td> <td align="left"><img class="middle" src="img/99.gif" alt="..." width="54" height="43" /></td> <td class="right" align="right"> <img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-03" name="0001_2008_003-03"><img src="img/a3.gif" class="right" alt="..." width="20" height="33" /></a> </td> </tr> </tbody></table> </div> </div> </body> </html>