- ベストアンサー
テーブルの位置について
3列以上のテーブルの位置についてお伺いします。 以下をxhtml,cssで実現するにはどのように指定すればよいのでしょうか？ ・テーブルの最終列は画面上の一番右に寄せる ・最終列以外の列が、画面の中央にくるようにする （各列の幅を吟味して、位置を自動調整させたいです） どうかお願いいたします。
- みんなの回答 （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指定なしで表示させたところ、最終列の分も含めて横側中央に表示されるので、 最終列を除いた部分が少し左に寄ってしまうのです。 イメージ伝わりましたでしょうか？？ 補足説明が必要でしたら、何でも聞いてください。 分かる範囲で回答しますので、ご協力お願いいたします。
お礼
ご返信ありがとうございます。 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>