- 締切済み
テーブルの位置
はじめまして。 ＨＰを作っているのですが、行き詰ったので 質問させて下さい。 ずばりテーブルの位置なのですが、 どこを調べても alignで指定する方法しか出てきません。 極端に右、左ではなく 真ん中より少し右上に置きたいのですが、 これは簡単にＨＴＭＬでは指定出来ないのでしょうか？ 教えて下さると嬉しいです。 よろしくお願いします。
- みんなの回答 （6）
- 専門家の回答
みんなの回答
positionプロパティを使う場合は、先に挙げられている絶対配置(absolute)以外に相対配置(relative)で配置する方法もあります。 <table style="position: relative; top: -5px; left: 40%;"> このような指定にすると、本来スタイルシート指定を入れないときにそのテーブルが配置される位置を基準として、そこからtopやleft(もしくはbottom、right)で指定しただけ表示位置を移動させることができます。 すでにページが作られていて、表示位置をこれから調整したいというケースでは、こちらの方が手軽に調整できるかもしれません。 position: absolute;で指定する場合は、topやleftなどの座標位置を指定する基準位置の取り方がファイルの先頭位置になるので、その点の注意が必要でしょう。 この表示位置を調整するテーブル以外の内容があるページで使う場合には、座標の調整が少々面倒になることもあるかもしれません。 ついでに、スタイルシートでの座標はパーセントでも指定できますので、ウィンドウサイズに追従するデザインの場合はそちらの方が楽に指定できるかもしれませんね。 他には、marginプロパティでも代用できるかも知れません。 <table style="margin-top: -15px; margin-left: 45%;"> 状況次第ですが、このような指定でも、表示位置を調整できるでしょう。 参考まで…
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>ここにタイトル名</TITLE> </HEAD> <BODY> <table border="0" cellpadding="0" cellspacing="0" style="position : absolute;top : 20px;left : 500px;"> <TBODY> <TR> <TD><IMG src=・・・><TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> よって <META http-equiv="Content-Style-Type" content="text/css"> これは <HEAD>～</HEAD>の間に <!-- ←これは無くても良い
- bear-3
- ベストアンサー率42% (26/61)
こんにちは。 既に返答されているように。スタイルシートを使用するしか、細かなテーブル位置指定は出来ないと思われます。 スタイルシートの使い方などについては、下に載せましたURLを参考にされたら良いかと思います。ここは大変分かり易いです。ワタシもよく利用しています。 で一応簡単にスタイルシートの概要を述べさせていただきます。 スタイルシートを適用するには、主に三つの方法があります。 １：スタイルシートを記述した別のファイルを読み込む。 ２：スタイルシートをHTMLのヘッダ部分に書いておく。 ３：タグ内部に直接書く。 今回の場合は、３の方法をとられるとよろしいかと思います。 例としては、以下のようになります。 <table style="position : absolute;top : 20px;left : 500px;"> <tr><td nowrap> テーブルの中身。 </td></tr> </table> あと <!-- という記号のつかいかたについて。 上記２の方法で、HTMLヘッダ内にスタイルシートを記述している場合。ブラウザで表示する際、スタイルシートの記述文字がテキストとして表示されてしまわないようにコメントアウトするときに使われます。 例として、下記のようにスタイルシートを記述した場合。 <head> <title>Style Sheet Sample</title> <style TYPE="text/css"> H1 { color: red; } </style> </head> H1 { color:red; }の部分は、HTMLの書式ではない（スタイルシート書式）のでブラウザで表示する際、テキストとして画面に表示されてしまう恐れがある。なので以下のようにするのが慣例です。 <head> <title>Style Sheet Sample</title> <style TYPE="text/css"> <!-- H1 { color: red; } --> </style> </head> <!-- --> で囲まれた範囲はHTML書式上コメントとして扱われますので、ブラウザは無視します。 最後に スタイルシートは便利なのですが、ブラウザによっては対応していない命令がいくつかあるようです。表示確認を怠らないようガンバッテください。 こんな感じで よろしいでしょうか？
- acidend
- ベストアンサー率35% (27/76)
#2ですが、#1さんへのお礼を見て配置させたいものがimgだとわかったのでもうひとつのやり方を。 imgの縦の隙間の指示であるvspaceと、横の指示であるhspaceを使うとimgの画像サイズはそのままに、エリア幅だけを広げる事ができます。 <td width="500" align="right"><img src="xxxxxxx.gif" width="200" height="200" vspace="50" hspace="70"> </td> この数値をいじって好きな間隔を見つけてください。 ではでは。
- acidend
- ベストアンサー率35% (27/76)
<table>タグの中のcellpaddingとcellspacingというもののどちらかの数値を通常の０でなく数値を入れていくとtd内の隅っこから実際に表示される位置までの隙間を広げる事が出来ます。 例えばtdの幅が100pxでcellpaddinngかcellspacingのどちらかの数値を20にすると、tdの端っこから20px内側の四方が表示エリアとなり、100px - 20px = 80px四方角のエリアが表示エリアになります。 <table width="100" border="0" cellpadding="2" cellspacing="3"> <tr> <td align="right" valign="top">おきたいもの</td> </tr> </table> という感じです。 おっしゃっている事はこれで良いでしょうか。頑張ってください。
スタイルシートを使って <TABLE border="1" style="position : absolute;top : 20px;left : 500px;"> こんな感じで出来るようです。
お礼
早速の回答、ありがとうございます。 スタイルシートを使うんですね。 実際にやってみたのですが、 スタイルシートが上手くつかえません・・・。 <body bgcolor="#FFFFFF"> <style type="text/css"> <!-- 「←これの置く場所が？です。テーブルタグ自体を挟むのでしょうか？」 <table border="0" cellpadding="0" cellspacing="0" style="position : absolute;top : 20px;left : 500px;"> > <tr> <td width="10"><img ・・・省略 申し訳ありませんが、 これから先もアドバイス頂けると嬉しいです。 スタイルシートのサイトを回っているのですが、 なかなか思うようには出来ず…（汗）