<table>を複数使用するレイアウトでの質問です。

<table width=30% align=left><tr><td>A</td></tr></table>
<table width=70%><tr>
<td width=20%>B-1</td>
<td width=80%>
<table width=100%><tr>
<td width=25%>C-1</td>
<td width=15%>C-2</td>
<td width=15%>C-3</td>
<td width=15%>C-4</td>
<td width=15%>C-5</td>
<td width=15%>C-6</td>
</tr></table>
</td>
</tr></table>

<table width=30% align=left><tr><td>D</td></tr></table>
<table width=70%><tr>
<td width=★%>E-1</td>
<td width=☆%>
<table width=100%><tr>
<td width=20%>F-1</td>
<td width=20%>F-2</td>
<td width=20%>F-3</td>
<td width=20%>F-4</td>
<td width=20%>F-5</td>
</tr></table>
</td>
</tr></table>

・”★%”は、(”B-1”+”C-1”)と同じ幅
・”☆%”は、(100%-”★”)の値
・F-1~5は20%としたのですが(=100%)、C-2~6と同じ幅になるかどうか

どのようにすれば求められるかご指導お願い致します。

A 回答 (1件)

80%の25%は0.8×0.25=0.2なので、元の20%に当たります。


なので、★を40%、☆を60%にすればほぼ同じになるはず。
(ボーダーとか入れるといろいろ違ってくるかも)

でも全体で揃えたいのなら、テーブルをたくさん使わずに1つのテーブルで表示するほうが確実です。
(数字が割り切れないので、若干各セルの幅は変えています)
<table width="100%">
<tr>
<td sidth="27%">A</td>
<td width="14%">B-1</td>
<td width="14%">C-1</td>
<td width="9%">C-2</td>
<td width="9%">C-3</td>
<td width="9%">C-4</td>
<td width="9%">C-5</td>
<td width="9%">C-6</td>
</tr>
<tr>
<td>D</td>
<td colspan="2">E-1</td>
<td>F-1</td>
<td>F-2</td>
<td>F-3</td>
<td>F-4</td>
<td>F-5</td>
</tr>
</table>
    • good
    • 0
この回答へのお礼

>80%の25%は0.8×0.25=0.2なので、元の20%に当たります。
>なので、★を40%、☆を60%にすればほぼ同じになるはず。
無事に解決できました!!!
80%の25%が、元の20%にあたるという考えが出てきませんでした。
本当に助かりました。ありがとうございます!

>でも全体で揃えたいのなら、
>テーブルをたくさん使わずに1つのテーブルで表示するほうが確実です。
ありがとうございます。
現在の作業上、1つのテーブルでの処理は適合しなかったので、
複数テーブルでの検討をしました。

お礼日時:2010/04/14 15:39

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

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

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

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

Q と、

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

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

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

Aベストアンサー

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

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■ 
~~ を表示することはできますか?

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

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

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

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

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

よろしくお願いします!

Aベストアンサー

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

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

Q~ の中に