（HTML）表を任意の位置に置く方法とは？
- HTMLで表を任意の位置に配置する方法について、詳しい方に質問です。参考書や例ではセンターや右寄せの例が多く、具体的な内容に触れていないため、困っています。
- HTMLでは、DIVを使用して特定の領域を作成し、その中に表を配置する方法があります。ただし、単純に表の位置をピンポイントで指定するためのタグは存在しないため、他のアプリケーションを使用する必要があります。
- また、設定条件として表の上下左右に自由に文字やイメージを追加することができるということですが、HTML自体はそのような自由度の高い条件を考慮していない場合もあります。
- ベストアンサー
（HTML）Tableを任意の位置に置きたい
今晩は、ｈｔｍｌ初心者です、宜しくお願いします。 TABLE（表）を任意の位置におきたいのですがタグの書き方がわかりません。 参考書等を見ましたが、センターとか右寄せとかの例ばかりで肝心の内容に触れてなくて参考になりません。 ｈｔｍｌに詳しい方、どなたか宜しくお願いします。 DIVとかを使うとある一定の部分をDIV領域としての領域を使うことになります。 単にTableの領域だけを任意の場所にピンポインントで設定（例えば上から３００ｐｘ、左から３００ｐｘ） したいですが、他のアプリケーションンを使わないとタグでは指定出来ないのでしょうか。 設定条件として、表挿入後に表の上下左右に自由に文字、イメージを入れることが出来るということです。 そもそもｈｔｍｌはそのような自由度のある条件を設定すること自体を考えていないのでしょうか。
- htgotk_001
- お礼率43% (86/197)
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
上手くできてよかったです 追質問についてですが、 #std tabke{ これは <div id="std">～</div>間でのtableという意味です ですから、他の位置に別のtable、文字、画像などを追加する場合は、 例えば、 #std img{ 画像 #std p{ 文字 #std2 tabke{ テーブル こんな感じです
その他の回答 (1)
- applekatekyo
- ベストアンサー率19% (5/26)
いろいろ方法はありますが、 まずCSSで以下を設定して下さい #std table{ position: absolute; left:100px; /*左からの位置*/ top:200px; /*上からの位置*/ border:1px solid #0033cc; /*ボーダー*/ text-align: center; } 次いで、<body>～</body>間に <div id="std"> <table> <tr><td> ～～～ </td></tr> </table> </div> 試してください
お礼
applekatekyoさん、早速の回答有難うございます。 うまく出来ました、ずッ～と悩んでいたことが解決出来てメッチャ嬉しいです。 ところで「#std table{ }」の「table」自体には意味があるのでしょうか。 Tableの作成の時のルールでしょうか。 今までは、例えば「#std」としか名前を付けていませんでした。 何度やっても出来なかったのは、それが原因だったのでしょうか。 以上宜しくお願いします。
関連するQ&A
- HTML、CSSについて。テーブル背景がズレる。
こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); } ・ ・ ・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した！と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。
- 締切済み
- HTML
- htmlのtableレイアウトについて
こんばんは。訳あってｃｓｓとテーブルの両方のレイアウト手法を用いた サイト作りをしています。準初心者です。 昔から受け継がれてきたサークルのサイトの更新担当をしているのですが、 テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からないスペーサーｇｉｆなど も多用されていたりと、悲惨な有様なので、必死に修復しているところです。 テーブルレイアウトとで組まれていても、今回は抜本的な対策は留保するつもりで書いていた のですが、ある問題に突き当たりました。 divタグ内のtableタグによって作られた1×1の表ボックスが更新情報欄になっていて、 ページの左端に隙間無くくっついているようなレイアウトにしようと試みました。 <TABLE style=" border:0px;padding:0px;margin:0px;・・とするとｄｉｖのブロック要素と テーブルが完全にくっついた状態にできると思い実践してみたのですが、どうしても何ｐｘかの隙間が生じてしまうのです。試行錯誤の末、もとのソースコードではｔａｂｌｅ要素にｈｔｍｌでwidth="400" と指定されていたものをｔａｂｌｅタグ内に <TABLE style=" border:0px;padding:0px;margin:0px; ｗｉｄｔｈ:400px;> と指定し直した結果、計らずしもこの隙間は無くなりました。 そこで疑問なのですが、なぜこのような結果になったのでしょうか、ご教授ください！
- 締切済み
- CSS
- テーブルの位置設定・・・ＨＴＭＬで作成
ホームページをＨＴＭＬで作成中です。 テーブルで表を作成しているのですが・・・。 テーブルを表示する微妙な位置設定はどうしたらいいでしょうか？ align="center"などではなく、微妙な位置設定ができる方法を教えてください。 よろしくお願いします
- ベストアンサー
- CSS
- tableタグに右に回り込みの位置
tableタグに右に回り込みを入れたのですが<table align="left"> CSSのでtable全体と回り込みをした文字を上の方に移動させたいのですが これが回り込みをした文字しか移動しなくて困っています。 <div style="position:relative; bottom:20px"> <table border=1 align="left"> <tr> <td>表の内容</td> </tr> </table> 回り込み </div> が例えなのですが、何か打開策など御座いませんか？
- ベストアンサー
- ホームページ作成ソフト
- HTMLで横幅をCSSで設定できません。
HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }
- ベストアンサー
- HTML
- tableの横の位置を変えるには？？
<div> <table> <tr><td>あ</td><td>い</td></tr> <tr><td>う</td><td>え</td></tr> </table> </div> が仮にあったとして、これを外部ＣＳＳファイルでどこかのタグに text-align:center を適用させ、テーブルの位置を真ん中にさせたい（表のような使い方です）んですが、自分でやってみたら、divとtableにＩＤとclassで両方試して適用させましたができませんでした。 この表の横の位置をブロックとしてとらえて移動させることはできる でしょうか？？
- ベストアンサー
- HTML
- 外部CSSを使ったテーブルが作りたいのですが・・・。
以前こちらで質問させて頂いて、「スタイル作りはＣＳＳで」、と教えて頂き、ＣＳＳの勉強を始めました。 早速壁に当たっていまして、お知恵を拝借したいです。 外部ＣＳＳファイルに、ul.gaibu{color:ff0000}と記すと、 ＨＴＭＬファイルに<ul class="gaibu">ここは赤で表示</ul> となる事は出来たのですが、 テーブルの場合、 外部ＣＳＳファイルにdiv#table{設定値}を記し、 HTMLに<div id=table>とすると、外部CSSの設定値が反映されましたが、 <tr>や<td>の内容をどう設定して、HTMLにどう記載すれば反映するかが分かりません。 因みに外部CSSに tr.table1 {border:1px #333333 solid; line-height:25px; padding-left:10px; paddting-right:10px; text-align:left; vertical-align:middle} と記載し、HTMLの方に <tr><td class="table1">表１</td><tr>としましたが、 CSSの内容は反映されていません。 宜しくお願い致します。
- 締切済み
- HTML
- tableタグについて
tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示（Chrome）では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか？ どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}
- ベストアンサー
- CSS
- テーブルをウィンドウのセンターに
700px*400pxぐらいのテーブルを、ウィンドウの大きさにかかわらず上下左右ともにセンターに配置するには、どのようなコードを書けばいいのでしょうか？ 左右はセンター配置になるのですが上下が。。。 できればHTMLでお願いします。m(_ _)m また、テーブルの位置（上下左右センター）をCSSで指定できるのでしょうか？ よろしくお願いしマス。
- ベストアンサー
- HTML
- 特定のテーブルにだけ任意の書式を適用するHTMLかCSS
特定のテーブルにだけ任意の書式を適用するHTMLかCSS 以下のHTMLテーブルで、入れ子テーブル（区画１～区画４）には罫線なし、 外枠（田の字）だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか？ 【解決案１】こうすると、入れ子テーブル（区画１～区画４）まで罫線が現れてしまいます。 table,td,th {border-collapse: collapse; border: 1px solid #000;} 【解決案２】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。 table {border-collapse: collapse; border: 1px solid #000;} .tdstyle {border: 1px solid #000;} 【解決案３】外枠（田の字）だけ、以下のようにしたいですが、bordercolorってIEのみ有効なタグですよね？ <table border="1" style="border-collapse: collapse" bordercolor="#111111"> 外枠（田の字）だけに、IDをつけたり識別して、効率よく処理できませんか？ <html> <head> <style TYPE="text/css"> <!-- --> </style> </head> <body> <table cellpadding=10> <tr> <td> <table cellpadding=10><tr><td>区画１</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画２</td></tr></table> </td> </tr> <tr> <td> <table cellpadding=10><tr><td>区画３</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画４</td></tr></table> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
applekatekyoさん、再度の回答ありがとうございます。 CSSの名前に挿入するオブジェクト（？）の名前を追加してやる必要があったのですネ！ ありがとうございます、そこのところが全く理解出来ていませんでした。 これですっきりしました、有難うございました。 質問を締め切らせていただきます。 今後ともよろしくお願いします。