HTMLのrowspan

HTML初心者です。

下記のようにテーブルを作成していますが、
２行目がなかったことにされてしまいます。

<table>
<tr><td rowspan=2>1-1</td><td rowspan=2>1-2</td></tr>
<tr></tr>
<tr><td>3-1</td><td>3-2</td></tr>
</table>

結合されたセルを２行分の高さで表示することはできますか？

ただ、実際のHTMLはPHPで動的に作成しているので、
できれば「height属性で１行目の高さを２行分にする」以外の
方法を探しています。

以上、よろしくお願いします。

No.3 回答者： ORUKA1951 回答日時： 2012/11/09 13:46

<table>

<tr><td rowspan=2>1-1</td><td rowspan=2>1-2</td></tr>
<tr></tr><!-- ２行目がない -->
<tr><td>3-1</td><td>3-2</td></tr>
</table>
┌──┬──┐
│1-1 │1-2 │
┝━━┿━━┥
│3-1 │3-2 │
└──┴──┘
にしか、なりようがないです。・・・データがない場合は、<tr></tr>を出力しないようにして、高くしたいセル--たとえばclass名など他の属性を与えましょう。
<table>
<tr><td height=2>1-1</td><td height=2>1-2</td></tr>
<tr></tr><!-- ２行目がない -->
<tr><td>3-1</td><td>3-2</td></tr>
</table>
とか、

★どうしても方法がないなら・・・要素セレクタを使って
td[rowspan="2"]{padding:0.5em 0;}
ですかね。

この回答へのお礼

返信が遅くなってしまい申し訳ありません・・・

結論から言うと、今回は「絶対に結合しない空白の列を設ける」
という方法をとることになりました。
最初に「対応できない」と言った chie65535 さんの案です・・・。

なぜそうなったかというと、今回の場合はその空白の列があっても、
それはそれで意味のある列とみなすことができてしまったことと、
今のところ、他にもいろいろある検討課題も含めて少しずつ
良くしていきましょう、という段階だったため、とりあえずの形として
周りからもＯＫを頂いたためです。

時間の関係上、ご提案いただいた方法についてはその必要性が
出たときに改めて検証させていただきます。

ありがとうございました。

お礼日時：2012/11/15 16:43

No.2 回答者： ponta1971 回答日時： 2012/11/09 12:50

そもそも、横に２つしかセルがないのに、両方とも縦に同じ数だけ結合しようとしても、基準とする所がない？ために意味がありません。

>ただ、実際のHTMLはPHPで動的に作成しているので、
できれば「height属性で１行目の高さを２行分にする」以外の
方法を探しています。

PHPで動的に作成しても、height属性は指定できると思うのですが・・・、それで不都合になる理由はなんでしょうか？
それが分かれば、それなりの解決策を思いつくかもしれません。
height属性がダメなら、スタイルシートでpaddingを設定するとかもダメですよね?

この回答へのお礼

>そもそも、横に２つしかセルがないのに、両方とも縦に同じ数だけ結合しようとしても、
>基準とする所がない？ために意味がありません。
見た目の問題です。
「そこに行がある」もしくは「結合されたセルが２行分である」と
わかるように表示させたいのです。

>PHPで動的に作成しても、height属性は指定できると思うのですが・・・、
>それで不都合になる理由はなんでしょうか？
「動的に作成しているからできない」のではなく、
「PHPのロジック上、動的にheight属性を記述することが難しい」
という意味でした。
ですので、もしそれ以外に方法があれば・・・という希望で
「できれば～」と書かせていただきました。
他に方法がなければheight属性を記述する方法でやってみようとは思っています。

お礼日時：2012/11/09 13:19

No.1 回答者： chie65535 回答日時： 2012/11/09 11:56

<table>

<tr><td rowspan=2>1-1</td><td rowspan=2>1-2</td><td>　</td></tr>
<tr><td>　</td></tr>
<tr><td>3-1</td><td>3-2</td><td>　</td></tr>
</table>

要は、すべての行の一番最後の列に、全角スペース１文字だけが入った列を足す、って事です。

動的に作成しているなら「</tr>」を出力している部分を「<td>　</td></tr>」を出力するようにすれば良いです。

空白は「全角スペース」である事に注意して下さい。

なお、この方法は「borderなど、テーブルに枠が付いている場合は使えない」です。何も入ってない枠が見えちゃうので。

この回答へのお礼

すみません、省略してしまいましたが「枠あり」です。
試してみましたが確かに空白の枠が表示されい、
この方法では対応できませんでした。

それから、また関係するかもしれないので念のため、
結合したセルには背景色も設定しています。

お礼日時：2012/11/09 13:06