• 締切済み

テーブルの位置

はじめまして。 HPを作っているのですが、行き詰ったので 質問させて下さい。 ずばりテーブルの位置なのですが、 どこを調べても alignで指定する方法しか出てきません。 極端に右、左ではなく 真ん中より少し右上に置きたいのですが、 これは簡単にHTMLでは指定出来ないのでしょうか? 教えて下さると嬉しいです。 よろしくお願いします。

  • rodge
  • お礼率21% (3/14)
  • HTML
  • 回答数6
  • ありがとう数4

みんなの回答

noname#199778
noname#199778
回答No.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%;"> 状況次第ですが、このような指定でも、表示位置を調整できるでしょう。 参考まで…

noname#10926
noname#10926
回答No.5

<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)
回答No.4

こんにちは。 既に返答されているように。スタイルシートを使用するしか、細かなテーブル位置指定は出来ないと思われます。 スタイルシートの使い方などについては、下に載せましたURLを参考にされたら良いかと思います。ここは大変分かり易いです。ワタシもよく利用しています。 で一応簡単にスタイルシートの概要を述べさせていただきます。 スタイルシートを適用するには、主に三つの方法があります。  1:スタイルシートを記述した別のファイルを読み込む。  2:スタイルシートをHTMLのヘッダ部分に書いておく。  3:タグ内部に直接書く。 今回の場合は、3の方法をとられるとよろしいかと思います。 例としては、以下のようになります。 <table style="position : absolute;top : 20px;left : 500px;"> <tr><td nowrap> テーブルの中身。 </td></tr> </table> あと <!-- という記号のつかいかたについて。 上記2の方法で、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書式上コメントとして扱われますので、ブラウザは無視します。 最後に スタイルシートは便利なのですが、ブラウザによっては対応していない命令がいくつかあるようです。表示確認を怠らないようガンバッテください。 こんな感じで よろしいでしょうか?

参考URL:
http://tohoho.wakusei.ne.jp/css/index.htm
  • acidend
  • ベストアンサー率35% (27/76)
回答No.3

#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)
回答No.2

<table>タグの中のcellpaddingとcellspacingというもののどちらかの数値を通常の0でなく数値を入れていくと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> という感じです。 おっしゃっている事はこれで良いでしょうか。頑張ってください。

noname#10926
noname#10926
回答No.1

スタイルシートを使って <TABLE border="1" style="position : absolute;top : 20px;left : 500px;"> こんな感じで出来るようです。

rodge
質問者

お礼

早速の回答、ありがとうございます。 スタイルシートを使うんですね。 実際にやってみたのですが、 スタイルシートが上手くつかえません・・・。 <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 ・・・省略 申し訳ありませんが、 これから先もアドバイス頂けると嬉しいです。 スタイルシートのサイトを回っているのですが、 なかなか思うようには出来ず…(汗)

関連するQ&A

  • テーブルの位置について

    今、初めてホームページを作成(HTML)しているのですが テーブルの位置に困っています。 私は、微妙に中央よりの左にしたいのですが どの本、サイトにもテーブルなどの位置設定には ARIGN=""で左、右、中央の極端な位置しかありません。 微妙な位置はできないのでしょうか? 友達に聞いたところ(友達も初心者なのですが) <body leftmargin="★">~</body> ★の中に25pxとかの数字を入れる。で左側が空く というのをどこかでみつけたらしくやってみたのですが できませんでした。 難しいことはよくわかならいので 簡単な方法で教えていただければ嬉しいです。

  • テーブルの位置設定・・・HTMLで作成

    ホームページをHTMLで作成中です。 テーブルで表を作成しているのですが・・・。 テーブルを表示する微妙な位置設定はどうしたらいいでしょうか? align="center"などではなく、微妙な位置設定ができる方法を教えてください。 よろしくお願いします

    • ベストアンサー
    • CSS
  • テーブルのレイアウトがうまくいきません

    DreamweaverMXで簡単なホームページを作っています。 テーブルをつかってレイアウトをしようと思いましたが、思うようになりません。やり方が間違っているのでしょうか? まず大枠で1行3列のテーブルを作り、幅だけ800pに指定。(高さ指定はしていません) 両端の列はそれぞれ幅だけ180pに指定。 で、そのそれぞれの列の中にまた必要なテーブルを作ってレイアウトしようとしてるのですが 一番左の列の中にテーブルが3つ入っていて一番縦長になっています。真ん中と右の列にも必要なテーブルや画像を入れているのですが左の列が長いせいかそれぞれの列の一番上がそろいません。左の列の長さに合わせて一番大外のテーブルの高さが決まってしまってしまいますが、真ん中と右の列の中のテーブルたちは左の列の高さの真ん中に配置されてしまいます。 方法がまずいのでこうなってるのだとは思いますが、本を見ながら勉強しつつやっていますが思うようにいかないので質問させてもらいました。 一番上をツライチに合わせるにはどうすればいいのでしょうか? というか上記の方法の悪いところを指摘していただければと思います。よろしくお願いいたします。

  • テーブルの位置を細かく指定したい。

    現在、テーブルを組み合わせたサイトを作っていまして そのテーブルの位置に悩んでおります。 背景固定で一つ大きめのイラストを置いていまして そこに合わせてテーブルの位置を細かく調整したいのです。 center、left、rightの偏った3種類の位置じゃなく 左から200ピクセル程度の位置にテーブルを置きたいのです。 この様なタグはありませんか? これはCSSなどて指定するしかないのでしようか?

    • ベストアンサー
    • HTML
  • テーブルの位置配置

    HPを作っていますが、なかなかテーブルの位置が上手く配置できません。それまではテーブルを真ん中に配置していたのですが、<tr><td>を利用して、たんす型になるようにしたら、テーブルが下がってしまい、上に空白ができてしまいました。 テーブルを上の方に持っていきたいのですが、どうすればいいでしょうか?

  • 文字位置の一括指定について

    質問させてください。 普通HTMLで文字位置を指定するには <div align="left"> などが一般的だと思うのですが、 CSSを使って、<div>を使わないでも文字位置を一括指定できる方法はないのでしょうか。 HTML講座を探してみたんですけれどもわからなくて…。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • テーブルの位置について

    3列以上のテーブルの位置についてお伺いします。 以下をxhtml,cssで実現するにはどのように指定すればよいのでしょうか? ・テーブルの最終列は画面上の一番右に寄せる ・最終列以外の列が、画面の中央にくるようにする  (各列の幅を吟味して、位置を自動調整させたいです) どうかお願いいたします。

    • ベストアンサー
    • HTML
  • テーブル内のスタイルシートについて。

    カテゴリHTMLでよいのか、ちょっとビクビクしているのですが。 テーブルのひとつのセル内で左揃えの文字列と右揃えの文字列を作りたいのです。 スタイルシートを使おうと思ったのですが、 それぞれの文字列に <SPAN STYLE="text-align:left;">むにゃむにゃ</SPAN> <SPAN STYLE="text-align:right;">うにょうにょ</SPAN> と指定をしても全く反映されません。 一つのセル内で左右に文字を振ることは不可能なのでしょうか?

    • ベストアンサー
    • HTML
  • テーブルを

    テーブルの位置を、指定したいんですけど・・ 私の知ってるタグは右に寄せる(right)、中央に配置(center)、左に寄せる(left)の三つだけです。 左と、中央の間ぐらいに配置したいんですけど・・ どうすればいいでしょうか?

  • テーブルと写真を並べて表示

    HPをHTML(メモ帳)で作っています。 テーブルと写真を並べて(テーブルを左、写真を右に)表示させたいと思っています。 でも、改行も入れていないのにテーブルの下に写真がきて、縦に並んでしまいます。 無知なだけの質問かもしれませんが、どうやったらテーブルと写真を横に並べることができるのか教えてください。

    • ベストアンサー
    • HTML

専門家に質問してみよう