あなたの映画力を試せる!POPLETA映画検定(無料) >>

お世話になってます。
タイトルの通り、テーブルタグについての質問なのですが
言葉では書きづらいので画像にしました。

白い部分は結合などをして作れたのですが、
灰色の部分を均等な幅で2セル作れません…。

色々なhtml解説サイトを拝見させて頂きましたが、答えがわからず…。
もしかしてできなかったりするんでしょうか?

もし可能なようでありましたら書き方を教えて下さると嬉しいです。
お願いします。

「テーブルで3セル作った行の下に2セルを均」の質問画像

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

A 回答 (4件)

枠の大きさを全て72pxの場合の指定です


<table style="border-collapse:collapse;"><col span="1" style="width:72px;"><col span="2" style="width:36px;"><col span="1" style="width:72px;"><tbody>
<tr><td colspan="4" style="border-style:solid;border-color:black;border-width:1px;">一番上の行</td></tr>
<tr><td style="border:solid black 1px;">真ん中行1</td>
<td rowspan="2" style="border:solid black 1px;">真ん中行2</td>
<td style="border:solid black 1px;">真ん中行3</td></tr>
<tr><td rowspan="2" style="border:solid black 1px;">下の行1</td>
<td rowspan="2" style="border:solid black 1px;">下の行2</td></tr></tbody></table>
border:solid black 1px;の枠線の指定
<table style="border-collapse:collapse;">の指定は、隣のセルの枠線と重ねて表示です。必ず指定して下さい。
全てCSSで作成するとブラウザによりスタイルシートを変更が必要なので テーブルで作成をすいせんします。
    • good
    • 0

 表:tableは、あくまで表であって、コンテンツを配置するために使うべきではありません。


 という原則論はおいておいて、表は内容によって伸縮しないと小さなディスプレイではスクロールが必要になり、大きなディスプレイで無駄な余白ができてしまいます。
 width要素で各セルの幅は決定できます。考え方はすべての縦罫線を表高さ伸ばして、セルを結合することです。
 ┏━┯━┯━┯━┓
  ← colspace4 →
 ┣━┿━┿━┿━┫
  ←→← cs2→←→
 ┣━┻━┿━┻━┫
  ← cs2→← cs2→
 ┗━┻━┷━┻━┛
でも、デザイン(コンテンツの配置)をしたいなら、CSSのほうがずっと楽ですよ。


【引用】____________ここから
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。
 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
    • good
    • 0

tableではセルの幅指定はあてにならない。

中身の量優先って
決まってるから。それでも挑戦するなら、一番すなおなのは
必要な列数の最小公倍数を分配していくこと。

<table border="1">
<caption>最小公倍数で配分</caption>
<tr><td colspan="6">6</td></tr>
<tr><td colspan="2">2</td><td colspan="2">2</td><td colspan="2">2</td></tr>
<tr><td colspan="3">3</td><td colspan="3">3</td></tr>
</table>

こんな感じ。
「テーブルで3セル作った行の下に2セルを均」の回答画像2
    • good
    • 0

セル幅を指定すればいけるかと思います。


たとえば、

<TABLE BORDER width=480 height=120>
<TR><TD colspan=4> </TD></TR>
<TR><TD> </TD><TD colspan=2 width=33%> </TD><TD> </TD></TR>
<TR><TD colspan=2 width=50%> </TD><TD colspan=2 width=50%> </TD></TR>
</TABLE>

3段目は50%で指定すれば均等になります。
そのときの2段目は真ん中で33%にすれば「ほぼ」均等にはなります。
(残りの0.333...%ずれる。)
またはテーブルの幅を固定にしていれば、TDタグ内でセル幅を
指定してあげてもいいかもしれません。
(このケースだと160ピクセルなので、width=160)
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

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

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

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

Qtableでcolspanを使うと次行以下のセルの幅が均等に?

tableでcolspanを使うと、colspanで結合した行の次行以下のセルの幅が均等になってしまいます。

どうすれば、colspanで結合した行の次行以下のセルの幅が均等になるのを防げるでしょうか?IE6,IE7

意図的にスタイルシートは、使用しないでください。
例:
<table width="300" border="1" cellspacing="1" cellpadding="5">
<tr>
<td colspan="2" width="284" align="center">
タイトルセル
</td>
</tr>
<tr align="left" valign="top">
<td width="100">
セル左
<td>
<td width="171">
セル右
<td>
</tr>
<table>

上記の場合、本来ならば、左のセルの幅(100px)が右のセルの幅(171px)より狭いはずなのに、左のセルの幅と右のセルの幅が均等になっていしまいます。
下記コード部分を上記のコードから削除すると、本来の比率で左のセルと右のセルの幅が表示されます。
<tr>
<td colspan="2" width="284" align="center">
タイトルセル
</td>
</tr>

よろしくお願いします。

tableでcolspanを使うと、colspanで結合した行の次行以下のセルの幅が均等になってしまいます。

どうすれば、colspanで結合した行の次行以下のセルの幅が均等になるのを防げるでしょうか?IE6,IE7

意図的にスタイルシートは、使用しないでください。
例:
<table width="300" border="1" cellspacing="1" cellpadding="5">
<tr>
<td colspan="2" width="284" align="center">
タイトルセル
</td>
</tr>
<tr align="left" valign="top">
<td width="100">
セル左
<td>
<td width="171">
セル右
...続きを読む

Aベストアンサー

こんにちは

>実際に試していただいたのでしょうか?
はい。他の方はどうか分かりませんが僕はソース関係は簡単すぎるものや時間がなくて試せない場合を除いて全て試した上で回答させてもらっています
試していない場合には『動作未確認です』というコメントをつけています

><td>合計と<table>widthが少し違うので多少の微調整はあります
これは
<table border="1">
<td colspan="2" align="center">
としたものと比べていたので実際に計算してみたらあっています(--;)
この点はこちらの勘違いでしたのでお詫びしますm(--)m

均等になっていないという実証は
・td幅を(100,171)から(50,221)などに変えたり
・td幅を逆にしたもの(171,100)のものと並べてみたらよく分かると思います

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qcolspanを使うと正しく表示できない?!

あるwebシステムで
現在の予約数を表示するようなhtmlを作成しています。

tableを使って、td内に予約できる数をcolspanで指定して、
現在の予約状況がひとめでわかるように表示しているのですが
なぜか、正しく表示できなくなってしまいました。
ブラウザもie6からie8にはなったのですが。

いろいろ検索してみると、似たような質問はたくさんされていましたし、
それぞれにwidth指定もすればよい・・・のように記載されていて解決されているようでした。
でも、同じように試してみましたがダメでした。(表示結果は同じ)


サンプルとしまして、(全体で92がMAXの予約数として です)

<table width="319" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="25" colspan="2" align="center">日時</td>
<td width="100" colspan="50" align=right>50</td>
<td width="84" colspan="42" align=right>92</td>
<td width="35" height="25" align="center" bgcolor="#ffd37d">空き</td>
</tr>

<tr>
<td rowspan="12" width="55" align=center valign=top>11月26日</td>
<td width="45" align=center>0時</td>
<td width="110" colspan="55" bgcolor="#ff4500" align="center">55</td>
<td width="74" colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>

<tr>
<td width="45" align=center>1時</td>
<td colspan="55" bgcolor="#ff4500"align="center">55</td>
<td colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>

<tr>
<td width="45" align=center>2時</td>
<td colspan="55" bgcolor="#ff4500" align="center">55</td>
<td colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>

<tr>
<td width="45" align=center>3時</td>
<td colspan="70" bgcolor="#ff4500" align="center">70</td>
<td colspan="22" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>22</font></td>
</tr>

 ・
 ・
 ・

のような場合、<tr>内の2つめの<td>のcolspan=70も55も同じ幅で表示されます。
違う・・・といえば、align=centerでそれぞれ数字を表示させていますが
55のテキストが少し左寄り、70がcenterに表示されてるように見えます。
また、赤背景色の幅も微妙に0.xミリくらいは colspan=70の方が広いです。

tableのwidthがborderの幅を考慮していないのですが
これも問題でしょうか?

みなさん、似たような問題がでても解決されているようなのですが
自分の場合、どうやってもなかなか解決できません。

tableの幅を広めに取ったり、style指定したり、widthを入れたり・・・

因みに依然(今年の春頃まで?)は、width無しのcolspan指定だけで、
思い通りに表示できていました。
その後、ブラウザのバージョンアップがありました。

最初(春頃)はstyleで
table{
table-layout:fixed;
}
を指定したらなんとかうまく表示できました。
今回は春頃のバージョンのままで特に変更なく動かせるはずだったのですが。。。
そのままではダメなようです。

どのような方法があるのかアドバイスいただければと思います。
よろしくお願いします。

あるwebシステムで
現在の予約数を表示するようなhtmlを作成しています。

tableを使って、td内に予約できる数をcolspanで指定して、
現在の予約状況がひとめでわかるように表示しているのですが
なぜか、正しく表示できなくなってしまいました。
ブラウザもie6からie8にはなったのですが。

いろいろ検索してみると、似たような質問はたくさんされていましたし、
それぞれにwidth指定もすればよい・・・のように記載されていて解決されているようでした。
でも、同じように試してみましたがダメでした。(表示結...続きを読む

Aベストアンサー

colgroup とか col とかを使ってみる?

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QSafariでテーブルのセルの高さを均等にしたい

Safariです(ちなみに見ているバージョンは4)

<table>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>

このような、片方が結合しているテーブルで、
隣のセルの高さを均等にしたいのです。
ほかのブラウザでは良いのですが、
Safariだとどうしても上が短く、下が長くなってしまいます…
CSS等で均等にできないでしょうか??
試しにheight:50%;にしましたがなりませんでした。

Aベストアンサー

> 試しにheight:50%;にしましたがなりませんでした。

この場合、考えなければいけないのは”50%”というのは「どこの高さに対する”50%”なのか?」という事です。
例えば2000円の品物がセールで「50%OFF!」と銘打ってあったら、2000×0.5=1000、で1000円という値が出ます。しかし、元値が書いてなかったらいくらになるのかわからないですよね?それと同じ事が言えます。ただ、漠然とtdだけに%だけ指定しても、実際にはどの様な描画領域になるのかわからない状態になります。

下記の様な簡単なサンプルで検証してみました。

【HTML】

<table class="hoge" cellspacing="0" cellpadding="0" border="1" summary="概要">
<tr>
<td class="data">上のセル</td>
<td rowspan="2">結合セル</td>
</tr>
<tr>
<td class="data">下のセル(データ量は上のセルより多い)</td>
</tr>
</table>

【CSS】

table.hoge td.data {
width: 100px;
height: 50%;
}

で、更にCSSには

【A】
table.hoge {
width: 200px;
height: 100px;
}

というtableのスタイルが設定されているとします。
この場合、tableの高さ100pxに対して、行が2行でそれぞれのセルの高さが50%、というと100px×0.5=50pxという事で計算が合うので、大抵のブラウザ(Safariは4ではなく3しかないですが)では均等に見えていると思います。無論ですが、3行以上だったら均等にはなりません。
#ただし、セルの中のデータの相対量が結果として50pxを超える場合は、無視してセルの高さをデータが収まりきるまで伸ばします。
#これは変え様がありません。tableのtd要素におけるheightとは、表のセルという性質上、min-height(最低限の高さを保証し、データ量がそれを超える場合は自動的に伸びる)と同じ挙動になるからです。

ですが、この指定が

【B】
table.hoge {
width: 200px;
height: 100%;
}

となっていたら、【A】とは異なり、tdの高さは完全に内包するデータ量で成り行きになります。この場合のtableのheight: 100%;というのは何も指定していない時と同じ(厳密に言うと、一部の環境・条件下ではその限りではないのですが、そこはややこしくなるので無視しておきます。)、セルの内容の量に応じて自動で伸縮するからです。子要素(td)の高さに親要素(table)の高さが依存しています。

ちなみに、この問題は先の質問(質問番号:5087743)のNo.3様のご回答のでJavaScriptを使う事で解決したのではなかったのですか?

> 試しにheight:50%;にしましたがなりませんでした。

この場合、考えなければいけないのは”50%”というのは「どこの高さに対する”50%”なのか?」という事です。
例えば2000円の品物がセールで「50%OFF!」と銘打ってあったら、2000×0.5=1000、で1000円という値が出ます。しかし、元値が書いてなかったらいくらになるのかわからないですよね?それと同じ事が言えます。ただ、漠然とtdだけに%だけ指定しても、実際にはどの様な描画領域になるのかわからない状態になります。

下記の様な簡単なサンプルで検証...続きを読む

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

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テーブルの位置を細かく指定したい。

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


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

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

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

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

Aベストアンサー

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

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

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

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qwindow.Openをモーダルにできますか?

こんにちは。

表題のように、Window.Openをモーダルにしたいのです。

親フォームからサブフォームを開き、
そこでクリックで選択された値を親フォームに展開させる
という処理をしたいのです。

ShowModalDialogだと、そのサブフォームで入力された値を親フォームに表示することができないのではないか・・・と思っています。

どなたかいい方法をご存知の方、
どうか教えてください。
よろしくお願いします。

Aベストアンサー

> ShowModalDialogだと、そのサブフォームで入力された値を親フォームに表示することができないのではないか

IE依存でかまわない、ということですね。

showModalDialog() は、表示したダイアログから、戻り値を返すことができます。

ダイアログの方では、window.returnValue という window オブジェクトの
プロパティがあるので、これに値を設定します。

親の方では、

ret = showModalDialog(…);

として、その値を受け取ります。

複数の数値のやり取りがあるのであれば、その window.returnValue に設定
するものを Object や Array にすれば良いですね。


因みに表題の

> Window.Openをモーダルにしたい

はやめておいた方が良いです。

あるウィンドウを常に一番上に表示することは可能ですが、そのウィンドウが
複数あると破綻します。

モーダルなウィンドウが、動作として必要なのであれば、新しくウィンドウを
開くのではなく、切り替えるようにインターフェースを考え直すべきだと
思います。

# もしくは applet を作るか

> ShowModalDialogだと、そのサブフォームで入力された値を親フォームに表示することができないのではないか

IE依存でかまわない、ということですね。

showModalDialog() は、表示したダイアログから、戻り値を返すことができます。

ダイアログの方では、window.returnValue という window オブジェクトの
プロパティがあるので、これに値を設定します。

親の方では、

ret = showModalDialog(…);

として、その値を受け取ります。

複数の数値のやり取りがあるのであれば、その window.return...続きを読む


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

人気Q&Aランキング