テーブルで3セル作った行の下に2セルを均等な幅で作るには？

質問

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

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

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

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

回答No.4

k0021

枠の大きさを全て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;">真ん中行１</td>
<td rowspan="2" style="border:solid black 1px;">真ん中行2</td>
<td style="border:solid black 1px;">真ん中行３</td></tr>
<tr><td rowspan="2" style="border:solid black 1px;">下の行１</td>
<td rowspan="2" style="border:solid black 1px;">下の行２</td></tr></tbody></table>
border:solid black 1px;の枠線の指定
<table style="border-collapse:collapse;">の指定は、隣のセルの枠線と重ねて表示です。必ず指定して下さい。
全てCSSで作成するとブラウザによりスタイルシートを変更が必要なので　テーブルで作成をすいせんします。

回答No.3

ORUKA1951

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

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

回答No.2

grumpy_the_dwarf

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>

こんな感じ。

回答No.1

seiiiichi

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

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