【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

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

このQ&Aに関連する最新のQ&A

A 回答 (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%;">

状況次第ですが、このような指定でも、表示位置を調整できるでしょう。

参考まで…
    • good
    • 0

<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>の間に
<!-- ←これは無くても良い
    • good
    • 0

こんにちは。



既に返答されているように。スタイルシートを使用するしか、細かなテーブル位置指定は出来ないと思われます。
スタイルシートの使い方などについては、下に載せました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
    • good
    • 0

#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>

この数値をいじって好きな間隔を見つけてください。
ではでは。
    • good
    • 0

<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>

という感じです。
おっしゃっている事はこれで良いでしょうか。頑張ってください。
    • good
    • 0

スタイルシートを使って


<TABLE border="1" style="position : absolute;top : 20px;left : 500px;">
こんな感じで出来るようです。
    • good
    • 0
この回答へのお礼

早速の回答、ありがとうございます。
スタイルシートを使うんですね。
実際にやってみたのですが、
スタイルシートが上手くつかえません・・・。

<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 ・・・省略

申し訳ありませんが、
これから先もアドバイス頂けると嬉しいです。
スタイルシートのサイトを回っているのですが、
なかなか思うようには出来ず…(汗)

お礼日時:2003/09/22 01:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテキストボックス入力を半角英数字に制限する

よろしくお願いします。

テキストボックスに入力される文字を、
半角英数字(英語の場合は大文字のみ)以外入力できないように制限したいのですが可能でしょうか?

もしくは半角英数字以外が入力された場合アラートを出すようにしたいのですが。。。

また、文字数の制限も可能でしょうか?

第一希望)
12文字以内の半角英数大文字以外入力できないように入力制限する。

第二希望)
12文字以内の半角英数大文字以外入力の文字が入力されている状況でボタン(=CGI実行)を押すと警告のアラートが出る。

第三希望)
半角英数大文字以外入力できないように制限、もしくはアラート表示。

例)
AAAA-1234567 ○(ハイフンを含め12文字以内の半角英数字)
AAAA-123456789 ×(12文字以内でない)
aaaa-1234567 ×(小文字が含まれている)


webサーバー・・・HP-UX
web・・・IE6
開発端末・・・windows2000(Tera Term 使用)

情報をお持ちの方いらっしゃいましたら、
よろしくお願いいたします。

よろしくお願いします。

テキストボックスに入力される文字を、
半角英数字(英語の場合は大文字のみ)以外入力できないように制限したいのですが可能でしょうか?

もしくは半角英数字以外が入力された場合アラートを出すようにしたいのですが。。。

また、文字数の制限も可能でしょうか?

第一希望)
12文字以内の半角英数大文字以外入力できないように入力制限する。

第二希望)
12文字以内の半角英数大文字以外入力の文字が入力されている状況でボタン(=CGI実行)を押すと警告のアラートが...続きを読む

Aベストアンサー

第二希望の条件について。
前提としてチェックするテキストボックスのnameがtxtであった場合の説明をします。
まず、次のようにform開始タグにname="fm"とonsubmit="return checkForm()"を追加します。

<form name="fm" action="********.cgi" method="post" onsubmit="return checkForm()">


次に以下を<head>~</head>に貼り付けることで、JavaScriptによる送信前のチェックが可能です。

---------------------------------------
<script type="text/javascript">
<!--
function checkForm(){
var str = document.fm.txt.value;
if (str.match(/[^A-Z\d\-]/)) {
alert("半角英数字(大文字)しか入力できません");
return false;
}
else if (str.length > 12) {
alert("12文字以内で入力してください");
return false;
}
}
//-->
</script>
---------------------------------------

「ハイフンを含め」と書いているので、ハイフンを入れても有効なようにしました。
また、12文字以内としか書かれていないので0文字でも警告が出ないようになっています。
もし、何も入力されていない場合でも警告を出すならば、次のようにしてください。

---------------------------------------
if (!str) {
alert("何も入力されていません");
return false;
}
else if (str.match(/[^A-Z\d\-]/)) {
alert("半角英数字(大文字)しか入力できません");
return false;
}
else if (str.length > 12) {
alert("12文字以内で入力してください");
return false;
}
---------------------------------------

第二希望の条件について。
前提としてチェックするテキストボックスのnameがtxtであった場合の説明をします。
まず、次のようにform開始タグにname="fm"とonsubmit="return checkForm()"を追加します。

<form name="fm" action="********.cgi" method="post" onsubmit="return checkForm()">


次に以下を<head>~</head>に貼り付けることで、JavaScriptによる送信前のチェックが可能です。

---------------------------------------
<script type="text/javascript">
<!--
function checkForm(){
...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

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

現在、テーブルを組み合わせたサイトを作っていまして
そのテーブルの位置に悩んでおります。


背景固定で一つ大きめのイラストを置いていまして
そこに合わせてテーブルの位置を細かく調整したいのです。

center、left、rightの偏った3種類の位置じゃなく
左から200ピクセル程度の位置にテーブルを置きたいのです。

この様なタグはありませんか?

これはCSSなどて指定するしかないのでしようか?

Aベストアンサー

>左から200ピクセル程度の位置にテーブルを置きたいのです

<TABLE style="margin-left:200px;">
<TR><TD></TD></TR>
</TABLE>

CSSを使っての指定になると思います。

Qテーブルの横に画像を

テーブルのすぐ隣に画像を表示させるには、どうしたら良いでしょうか?

教えてください。

よろしくお願いします。

□…テーブル ★…画像

□★

こんな感じです。

Aベストアンサー

<img src="***.png" alt="**" style="float:right">
<table>
<tr><td>***</td></tr>
</table>

<table style="float:left">
<tr><td>***</td></tr>
</table>
<img src="***.png" alt="**">

こんな風にすると良いかも。

Qテーブルからのselectにおいてデータの有無により結果をわけたい

id | point
----+-------
1 | 10
2 | 9
3 | 5
....
というテーブルがあるとします.
idを指定してpointを得たいのですが、そのidがこのテーブルに存在しない場合は空の結果ではなく0を返したいのです.
plpgsqlなどを使いif文で場合分けすればできることはわかっているのですがSQL文だけで(それもできれば1文で)これを実現する方法はあるでしょうか?
よろしくお願い致します。

Aベストアンサー

変則的ですが、これでよければidがユニークでなくても大丈夫ですし、集合関数を使わなくてもOKです。

select dm.id,case when ex1.point is null then 0 else ex1.point end from
(select ? as id) as dm left join ex1 on dm.id = ex1.id;

?を適当に変えてください。
chukenkenkouさんの発想はこれですよね。

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ(改行タグ<br>の半分以)間隔を空けたいのですが、どうすれば良いのでしょうか?

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

Qテーブルをスクロールさせるときのスクロールの位置

お世話になります。

IE限定の質問です。

テーブルのヘッダを固定してスクロールバーを右に付けるとします。
 ↓例↓
===================================
<html>
<head>

<style type="text/css">
.FreezHeader
{
background-color:#ffffff;
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
</style>

</head>
<body>

<div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tr class="FreezHeader"><th>あ</th><th>か</th><th>さ</th></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
<tr><td>あ</td><td>か</td><td>さ</td></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
</table>
</div>

</body>
</html>
===================================


上記のような HTML を書いた場合,
【下の図】↓の「A」のように表示されます。


「A」のようにではなく
スクロールバーの位置(TOPの位置)をヘッダの下から開始させたいのです。
できれば 【下の図】↓の「B」のような感じで
それが難しいとした場合, 【下の図】↓の「C」のような感じです。

このように表示させる方法を教えていただきたく思います。


IEのみで使えれば良いので,
他のブラウザでの見え方は考えなくて良いです。
ただ,
IE 5.5 や 6 などなるべく低いバージョンでも見えるようにと
なるべく JavaScript の使用は避けて
なおかつ,なるべくシンプルな方法が希望です。

お世話になります。

IE限定の質問です。

テーブルのヘッダを固定してスクロールバーを右に付けるとします。
 ↓例↓
===================================
<html>
<head>

<style type="text/css">
.FreezHeader
{
background-color:#ffffff;
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
</style>

</head>
<body>

<div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%"...続きを読む

Aベストアンサー

結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。

 まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォルトはall(仕様書ではscreenですが、実装はallになっています。HTML5では allに変更される)

 期待のように表示させるためには、本来はtbodyにoverflowを指定すればよいのですが、これはtable要素には使えないことになっています。(IEにはバグあり使えそうに見えます)
 そのため、スタイルシートでtbodyをblockに変換してやる必要があります。しかしその時点でIEは、tbodyの高さをtrに継承してしまうバグがあります。またスクロールバー自体が表示されません。

 IEで期待通りの表らしき形にしたいのなら、table以外でマークアップしてすべての要素table,thead,tfoot,tbody,tr,td,th,col,cilgroup・・をブロックに下からスタイルシートで配置しなおさないとなりません。
 当然ですが、スタイルシートを読まないブラウザ(テキストブラウザ、点字端末、読み上げソフト、そしてプリンター)や他の端末、検索エンジンには意味が通じないことになります。

 仕方なく、table全体を<div>で囲って、thead部分をfixedで固定する方法も試したのですが、IEのみfixedで位置を決めない場合は影も形も消えうせてしまいます。--もちろん標準ブラウザではきちんと整形されます。

{IEのみで使えれば良いので,}
 は、印刷やその他すべてを犠牲にすれば、表の見出しと本体を別のtableにするなど、文書構造を無視したマークアップ・・あるいは、リストなどでマークアップすることになりますが、決してすべきではない邪道になります。

☆tbodyをscrollさせる方法は下記サイトをご覧ください。
Tableのヘッダ(thead)を固定して、<tbody>内をスクロールさせる方法 » 株式会社ジラフィー(Giraffy) ( http://giraffy.jp/blog/2009/09/11/css/107/ )

 今回は質問ありがとうございます。自分自身よい勉強になりました。IEがクソであることも再確認できたし・(笑)

結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。

 まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォル...続きを読む


人気Q&Aランキング