異なる<tbody>内のセルを連結したい

質問

イメージ的には、

<tbody><tr>
<td rowspan="2">AAA</td>
<td>bbb</td>
</tr></tbody>
<tbody><tr><td>ccc</td></tr></tbody>

このようなことをしたいのですが可能でしょうか。
<tbody>で指定した各グループをまたいだ大きなセルを作りたいのです。

無理ですかね^^;

回答No.2

ORUKA1951 · ベストアンサー

必ず仕様書を読む癖をつけましょう。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.1 )］より
　table要素には、thead要素とtfoot要素は0個か１個、tbody要素は１個以上。そして
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
TBODY開始タグは、表が本体をただ1つだけ含んでいてヘッダもフッタも含まないという場合を除き、常に必要である。 TBODY終了タグは、常に省略可能である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.1 )］より

　ところが、あなたの場合は、それよりも

>bbbとcccを別々のグループに配置したままAAAだけを両グループにまたがって結合することは可能でしょうか？？？

できません。というかHTMLの文書構造上ありえません。あってはならない。それではTBODYというマークアップの意味がないです。tableは表であることを示す要素名ですし、tbodyは表のそれぞれが独立した本文であることを示します。独立した本文にまたがる列などありえません。HTMLは文書構造にしたがって正しくマークアップされて意味を成すのです。
　次に<tbody>(少量タグは省略可能)が現れた時点で、thやtdにcolspanに大きな値が指定されていても、そのtdなりthを含むcollspanは終了しているとユーザーエージェントは判断すべきです。実際そのように判断します。

　そもそも、HTMLでマークアップしたいその部分の文書とは何なのでしょうか??

お礼

わかりました・・・

回答No.4

Chaire

HTML 4.0 の表は多次元データを扱えます。No.3 では class 属性をお使いですが、データのつながりを物理的に（「タグ」的に）表現できないときは axis 属性を使います。

<tbody>
<tr>
<td axis="group-A upper">AAA</td>
<td axis="group-B upper">AAA</td>
</tr>
</tbody>
<tbody>
<tr>
<td axis="group-A lower">BBB</td>
<td axis="group-B lower">BBB</td>
</tr>
</tbody>

最近のブラウザであれば CSS2 の属性セレクタに対応していますから、td[axis~="group-A"] { color: red } のようにグループを示すことができます。見出しセルが必要であれば headers 属性で見出しセルの ID を並べて下さい。

なお、HTML5 では axis 属性が廃止されています。が、どうせ HTML5-UA が無視するというだけですから気にする程のものではありません。気になるなら HTML 4.01 の文書型を宣言すれば良いだけですし、class 属性でもまあ構いません。

お礼

ごめんなさい、使い方がいまいちわからないので断念しました

現在は<td></td>の中に小さな<table>を置いて、当初やりたかったこと実現させています；；

回答No.3

神崎 渉瑠（@taloo）

開始タグから終了タグまでが１つのグループです。

終了タグが書かれた時点で別々のグループになりますから、それを１つにまとめようというのは
矛盾ということになると思います。

でなければ、classなどを使った別の方法でグループ化すべきだと思います。

--------
<span>が入っていてあまり良くない例ですが、CSSで何とかすれば１つのセルに見せかけることは出来ると思います。
(未検証です)

<style>
td{border: 1px solid gray}
.upper{border-bottom:0 none;}
.under{border-top: 0 none;}
.under span{display:none}
</style>

<tbody><tr>
<td class="group-A upper">AAA</td>
<td>bbb</td>
</tr></tbody>
<tbody><tr>
<td class="group-A under"><span>AAA</span></td>
<td>ccc</td>
</tr></tbody>

お礼

質問は別のグループ同士の結合可否を知ることですので目的達成です^^

私としても恐らく無理だろうと予想していたので、その場合の代替案もあって、そのうえでの質問でした

CSSでもトリッキーなことをやれば、それっぽい事が出来そうですね

回答No.1

神崎 渉瑠（@taloo）

<tbody>
<tr><td rowspan="2">AAA</td><td>bbb</td></tr>
<tr><td>ccc</td></tr>
</tbody>

お礼

ご回答ありがとうございます！

bbbとcccを別々のグループに配置したままAAAだけを両グループにまたがって結合することは可能でしょうか？？？