よろしくお願いします。
<td valign="top">内にテーブルがあるのですが、
それがTOP表示にならずに困ってます。
現在、テーブルの下に透明gifを入れて、見た目上、
topになっているようにしています。

この場合、tdの外にあるタグが何か影響しているのでしょうか?

透明gifを使わずに、top表示する方法を教えてください。

ソース例
<td valign="top">
<table>fffff</table>
</td>

A 回答 (3件)

 予測するに、タグの記述に手抜きなどがあるのではないですか。


 参考URL等にある「正しい」ルールに従って書けば、直るのではないでしょうか。例↓
<html>
<head></head>
<body>
<table width="300" height="200" border="1">
<tr>
<td valign="top">
<table border="1" height="100">
<tr>
<td valign="top">fffff</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

補足: 途中に全角空白などがあると、変なレイアウトになります。

参考URL:http://www.tohoho-web.com/html/table.htm
    • good
    • 0

ソースの<td>から</td>の間に、改行を入れてはいけません。

セルがずれます。

悪い例1
<td valign="top">
<table>fffff</table>
</td>

悪い例2(外側がOKでも、入れ子になった内側の<td>の中で改行している)
<td valign="top"><table><tr><td>fffff
</td></tr></table></td>

良い例1
<td valign="top"><table>fffff</table></td>

良い例2(<td>の内側でも、入れ子になった内側の<table>の中では改行可)
<td valign="top"><table>
<tr>
<td>fffff</td>
</tr>
</table></td>
    • good
    • 0

例がわるすぎなので、いまいちニュアンスがつたわってこないのですが


こういうことではないですか?

<table height=200 border>
<tr>
<td valign="top">
<table><tr><td>fffff</td></tr></table>
</td>
</tr>
</table>
    • good
    • 1

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

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

Q折りたたみテーブル(バタフライテーブル)

折りたたみテーブル、バタフライテーブルなどと呼ばれるテーブルの購入を考えています。

↓↓こんなのです↓↓
http://www.akitamokko.jp/item/table/t541.html

【質問1】
なんとなく危なそうにも見えますが、使っているときに折りたたみ部分が落ちてしまったり、折れる部分の汚れが掃除しにくかったり、などの不都合はありませんか?
実際にお使いしている方にご感想をお聞きしたいです。

【質問2】
希望してるのは、↑URLのより大きいサイズなので、探しているところのですが、サイトがありましたら紹介して下さい。

Aベストアンサー

以前使っていましたが現在は処分してしまいました。

写真の物とは少々違うので参考程度ですみません。大き目の4人掛けの四角いテーブルでした。椅子も収納できないと意味がないと思い、テーブル真ん中に4脚の付属の折りたたみ椅子が収納できる物です。

質問2に先にお答えしますが、ネットショップではなく通販のニッセンで購入しました。

質問1.折りたたみ部分が使用中に落ちてくる事はありません。広げた際、足となる支柱(?)も広げてテーブル下に固定しますが、小さな金具が付いていてロックできました。掃除しにくいこともなかったです。

私が処分した理由は、
・(商品にもよりますが)広げて使用中の足のガタツキが直らなかった事。全ての足が接地する様に調節するネジ式の調整金具が付いていましたが、最大限に伸ばしても直りませんでした。購入後すぐは良かったのですが、使っていくうちにガタツキが出たようです。

・リビングの狭さを有効に利用するために購入しましたが、いちいちしまう事が毎日のことなので面倒になってきた。

・付属の折りたたみ椅子の座り心地の悪さ。

以上の理由です。

毎日これで食事をし、毎日折りたたんで収納しようとしたのでダメだったかもしれません。目的が普段はそのまま使用していて、来客がある時だけコンパクトにしまうつもりなら便利なアイテムかなぁと言うのが感想です。

以前使っていましたが現在は処分してしまいました。

写真の物とは少々違うので参考程度ですみません。大き目の4人掛けの四角いテーブルでした。椅子も収納できないと意味がないと思い、テーブル真ん中に4脚の付属の折りたたみ椅子が収納できる物です。

質問2に先にお答えしますが、ネットショップではなく通販のニッセンで購入しました。

質問1.折りたたみ部分が使用中に落ちてくる事はありません。広げた際、足となる支柱(?)も広げてテーブル下に固定しますが、小さな金具が付いていてロックで...続きを読む

Q と、

<td></td> と、<td><BR></td>

ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
<td></td> と、<td><br></td> は、
ブラウザ上ではどちらでもちゃんと表示されるのですが、
HTML文法的にはどちらが正しいのでしょうか?
また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか?

※ホームページビルダー、KompoZerの善し悪しは無視してください。

Aベストアンサー

文法的にはどちらも正しいです。
ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。

Q折りたたみテーブル

キッチンの作業スペースがとても狭いので、折りたたみのテーブルとかあればいぃだろうな、と思っています。

条件
1、高さが80cm前後
2、折りたたみがすごく楽
3、なるべくコンパクト(まな板が置けるくらい)

こんな感じのテーブルを知っていたら(売っていたお店など)教えてください。(^^)

Aベストアンサー

ホームセンターに行けば、それくらいの小さなテーブルが販売されていますよ。もちろん、店舗によって違うでしょうけれど…。
もともとは読書用とか、そんな用途のものだと思いますけれど、折りたたむことができるものがありますので、根気よくホームセンターを回ってみればいいかと思います。
私が知っているので、大きさは、小学校などに置いてある勉強机を、縦に半分に切ったくらいの大きさでした。

Qでテキストボックスとセルの間にわずかな隙間があいてしまう・・

<TABLE>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
</TALBLE>

こう書くときに、テキストボックスの下にわずかな隙間が
できるのを防ぎたいのですが、何か方法はありませんでしょうか?

Aベストアンサー

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>
</TABLE>
としていませんか?
HTMLとしては好ましくないと思いますが、<FORM>や</FORM>の前後にある<TR><TD>~</TD></TR>を取り除き、以下の様にします。
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<FORM ~>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD><INPUT TYPE="TEXT"></TD>
</TR>
<!-- ここまで -->
</FORM>
</TABLE>

尚、表の罫線を残すのであればBORDERを変更したりしてください。

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>...続きを読む

Qテーブルの折りたたみ脚の金具

子供のままごと用のテーブルを木材で作成します(テーブル寸法 400×300mm、高さ300mm)。
折りたたみの脚にしたいと思っていますが、大きなテーブル用の金具はあるのですが、
このような小さいテープルに合う金具をご存じの方はおられませんか??

Aベストアンサー

ままごと用とのことで、その足を広げたりたたんだりの操作もお子さんがされる場合もあるとの前提でのアドバイスです。

専用の折りたたみ用の金具は足を広げた際の固定の堅牢さも求められるがために、言い換えると足を広げた段階で何らかの形で固定され、足をたたむ際にはその固定・ロックを解除する操作が必要な物が多く、小さなお子さんには力や手順などから操作もむずかしいかと思います。

簡単に図面を書いてみましたが、足の根元に別な三角、四角の板を蝶番で取り付けることで簡易的なストッパーとして機能させられます。

図のように左側の2本組み足から反対側の2本組み足まで細長い板を一本取り付けてあげればワンモーションで両足ともロック・解除ができますし、片方ずつ別々に2カ所の板でのストッパーでも良いわけです。
天板を上、足を下にしたまま足を開けばストパーが下がり自動的にロックが掛かりますし、たたむときだけ図でいう真ん中に横方向に渡してあるストッパーを倒してから(あるいはテーブルそのものを起こせばストパーが倒れますので)足をたためばいいわけです。

わかりますかね?

Q■ 
~~ を表示することはできますか?

テーブルタグ
<table>
<tr>
<td>

をそのまま文字として表示することはできますでしょうか?

<を全角の<にすればいいのでしょうが、なにぶん、テーブルタグの量が膨大なため、手でいちいち直してたら数ヶ月、数年かかってしまいます。

タグをそのまま画面に表示させる良い方法はないでしょうか?

詳しい方いらっしゃいましたら教えていただけないでしょうか?

よろしくお願いします!

Aベストアンサー

タグの無効化というタグです

<xmp>タグ</xmp> タグを無効化にして文字として表示されます
良かったら使ってみて下さい

Q折りたたみテーブルの脚はどこで買えば?

キャンプをする時にテントの中で使用する小さな折りたたみテーブルを自作しようと考えていますが、折りたたみの脚をどこで買えばいいかわかりません。ご存知の方、教えていただけると助かります。
よろしくお願いします。

Aベストアンサー

たぶん、ホームセンターに売っているはずです。
ウチの近くのところは売っています、そこに限って言えば。
高さ(長さ)も種類がありますが、ちゃぶ台程度の高さが主流で、イス用テーブルの高さはあまり無いようです。
あまり、カッコイイ感じのは無いようです。
わたしは、テーブル天板用として売っている板(集成材で角も丸くできている)に足をつけて作りました。

Q
タグの幅指定について

<FORM>を2つに切って、その表示がずれてしまうという記事が少し前にありましたが、多少内容がかぶるかもしれません。

列項目が全く同じ2つの表を上下に並べて表示しようと思っています。
<TABLE>タグはWIDTHの指定ができるので表全体のサイズは上下でそろっているのですが、その中の項目の縦の線がずれてしまいます。

原因はその項目に表示される内容が上の表と下の表とで異なっていることによるズレのようです。
(<TD>のタグにはwidthの指定が無く、<TABLE>全体として、バランスが取れるように自動的に中の項目幅を調整してしまうためらしいです(--; )

何か画期的な裏技がありましたら、教えてください。
お願いします。

Aベストアンサー

<td>の属性で、width="500" のような指定も出来ますが、そうやってきっちりと幅指定をしても、ブラウザが勝手にレイアウトを変更してしまうこともよくあります。これを防ぐには、透明な1pixelのgifを利用する方法が有効です。
(HTML4.01では、本来推奨されていないアプローチのようですが。)

たとえば、
<table width="100">
<tr><td width="50">abc</td><td width="50">ABC</td></tr>
<tr><td width="50">abcdefg</td><td width="50">AB</td></tr>
</table>

としたが、意図した表示と異なる場合には、

<table width="100">
<tr height="1"><td width="50"><img src="clear.gif" width="50" height="1"></td><td width="50"><img src="clear.gif" width="50" height="1"></td></tr>
<tr><td width="50">abc</td><td width="50">ABC</td></tr>
<tr><td width="50">abcde</td><td width="50">AB</td></tr>
</table>

のようにすることで、理不尽なレイアウトになることを防ぐことができます。

<td>の属性で、width="500" のような指定も出来ますが、そうやってきっちりと幅指定をしても、ブラウザが勝手にレイアウトを変更してしまうこともよくあります。これを防ぐには、透明な1pixelのgifを利用する方法が有効です。
(HTML4.01では、本来推奨されていないアプローチのようですが。)

たとえば、
<table width="100">
<tr><td width="50">abc</td><td width="50">ABC</td></tr>
<tr><td width="50">abcdefg</td><td width="50">AB</td></tr>
</table>

としたが、意図した表示と異なる場合には、...続きを読む

QDIYテーブルの折りたたみ脚について

天版を蝶番で付けて真ん中を繰り抜き、七輪テーブルを作成しました。
現状は、余っているキャンプ用テーブルの脚をガムテープで固定しています。
ユニフレームの焚き火テーブルと同じ高さの折りたたみ脚を付けたいと思ってますが良いアイデアもしくは脚の販売先はありますでしょうか?
焚き火テーブルの高さは37cm、七輪テーブルの天版の厚さは約1.5cmなので、最低でも35cmの脚が必要になるかと思います。30cmの脚は結構見かけるのですが・・・。

Aベストアンサー

市販品にこだわらず、木などで作れば高さ自由ですよ。

1)別板を2枚クロスさせて天板を置く
2)蝶番つけて折りたたみ足にする
3)ナット埋めてねじ込みにする
4)テーブルを箱型にして、七輪+火種のケースとしてもそのまま使う

↑これらは高さの微調整にはアジャスタフットなりが必要ですが、
こういうの↓はアジャスタ機能もってますね

5)パイプの入れ子構造にして、内パイプは外パイプとねじ止めする。
 または外側の先端に割りをいれておいてクランプやホースバンドなどで締めて内パイプを固定する
6)天板の下にハの字形に広がるように左右脚をつけて、間をロープでつないで開き具合を調節する


ま、私なら4か6にしますね。
6のみ、簡単に絵にしておきます。

Q
の幅が:nth-childだけの場合とcolgroupを使った場合とで異なる

<table>の<th><td>の幅を固定するのにCSSの:nth-childを使っていたのですが、
<colgroup>の<col>でも縦の幅を固定できると知り試してみました。
しかし、:nth-childを使った場合と<colgroup>を足した場合とで、幅が異なるようです。
添付画像のように、<colgroup>を使うと幅が狭くなりました。
(:nth-child を使うと幅が広くなる?)
このように幅が異なるのはどのような理由からでしょうか?

試したtest.htmは次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>てすと</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>テスト(colgroupあり)</h1>
<table>
<colgroup>
<col span="1" style="width:300px;">
<col span="1" style="width:70px;">
<col span="1" style="width:250px;">
<col span="10" style="width:62px;">
</colgroup>
<thead>
<tr>
<th>thead</th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th>
</tr>
</thead>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
</table>

</body>
</html>

test.cssは次の通りです。
@charset "UTF-8";

h1{height:50px;}
table{table-layout:fixed;}
table,tr{width:1240px;}
th,td{border:solid 5px black;text-align:center;height:100px;}
th{background-color:red;}
tr:nth-child(2n+1){background-color:blue;}
tr:nth-child(2n+0){background-color:white;}
th:nth-child(1),td:nth-child(1){width:300px;}
th:nth-child(2),td:nth-child(2){width:70px;}
th:nth-child(3),td:nth-child(3){width:250px;}
th:nth-child(n+4),td:nth-child(n+4){width:62px;}

よろしくお願いします。

<table>の<th><td>の幅を固定するのにCSSの:nth-childを使っていたのですが、
<colgroup>の<col>でも縦の幅を固定できると知り試してみました。
しかし、:nth-childを使った場合と<colgroup>を足した場合とで、幅が異なるようです。
添付画像のように、<colgroup>を使うと幅が狭くなりました。
(:nth-child を使うと幅が広くなる?)
このように幅が異なるのはどのような理由からでしょうか?

試したtest.htmは次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<tit...続きを読む

Aベストアンサー

CSSボックスモデルにおいて td の幅は padding と border 込みで計算されます
td { width:300px; border-width:5px; padding:1px; }
ならば
幅 = 300 + 5*2 + 1*2 = 312px

col や colgroup には padding と border が無いので
col { width:300px; }
ならば
幅 = 300px

注意
table { border-collapse:collapse; } だとさらに計算がややこしくなります


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報