HTMLのTableの段組について

質問

以下のようなテーブルがあります

<table border="2">
<tr>
<th colspan="8">11111111111</th>
</tr>
<tr>
<th colspan="3">22222222222</th>
<th colspan="3">33333333333</th>
<th colspan="2">44444444444</th>
</tr>
<tr>
<th>55555555555</th>
<th>66666666666</th>
<th>77777777777</th>
<th>88888888888</th>
<th>99999999999</th>
<th>aaaaaaaaaaa</th>
<th>bbbbbbbbbbb</th>
<th>ccccccccccc</th>
</tr>
<tr>
<th>X1</th>
<th>X2</th>
<th>X3</th>
<th>X4</th>
<th>X5</th>
<th>X6</th>
<th>X7</th>
<th>X8</th>
</tr>
<tr>
<th>X9</th>
<th>Xa</th>
<th>Xb</th>
<th>Xc</th>
<th>Xd</th>
<th>Xe</th>
<th>Xf</th>
<th>Xg</th>
</tr>
</table>

このテーブルの
　<th>55555555555</th>
　<th>X1</th>
　<th>X9</th>
の部分を縦に連結したいです。
同様に　
　<th>66666666666</th>
　<th>X2</th>
　<th>Xa</th>
　・
　・
　・
　<th>ccccccccccc</th>
　<th>X8</th>
　<th>Xg</th>

よろしくお願いします。

回答No.2

PXU10652 · ベストアンサー

「自分がやりたいのは「555555」,「X1」,「X9」を縦に連結、もしくは行間の線を消したいです。」
　だったら、「<th rowspan="3">55555555555<BR>X1<BR>X9</th>」ではダメですか？

お礼

イメージどうりのものができました。
ありがとうございます。

回答No.3

naokita

#1さんの通りで、セルを融合する
<th rowspan="3">55555555555<br />X1<br />X9</th>
というか、
下部のセルが全部同じなら、
<th>55555555555<br>X1<br>X9</th>

いや、<td>55555555555<br>X1<br>X9</td>

-----------------------------
もしくは、CSSで、

table,th,td{ border:1px gray solid;}
tr.line3 th{ border-bottom-width:0;}
tr.line4 th{ border-width:0 1px;}
tr.line5 th{ border-top-width:0;}

<table>
<tr>
<th colspan="8">11111111111</th>
</tr>
<tr>
<th colspan="3">22222222222</th>
<th colspan="3">33333333333</th>
<th colspan="2">44444444444</th>
</tr>
<tr class="line3">
<th>55555555555</th>
<th>66666666666</th>
<th>77777777777</th>
<th>88888888888</th>
<th>99999999999</th>
<th>aaaaaaaaaaa</th>
<th>bbbbbbbbbbb</th>
<th>ccccccccccc</th>
</tr>
<tr class="line4">
<th>X1</th>
<th>X2</th>
<th>X3</th>
<th>X4</th>
<th>X5</th>
<th>X6</th>
<th>X7</th>
<th>X8</th>
</tr>
<tr class="line5">
<th>X9</th>
<th>Xa</th>
<th>Xb</th>
<th>Xc</th>
<th>Xd</th>
<th>Xe</th>
<th>Xf</th>
<th>Xg</th>
</tr>
</table>

お礼

CSSで線を消すやり方もあるんですね
勉強になります。ありがとうございました。

回答No.1

PXU10652

「の部分を縦に連結したいです。」
　カラム連結が出来るなら、同様に行連結を指定するだけです。それと下に来るx1,x9は削除して下さい。

例）<th rowspan="3">55555555555</th>

お礼

回答ありがとうございます。
rowspanを指定して、x1,x9を削除してもつなげることが出来ませんでした。
自分がやりたいのは「555555」,「X1」,「X9」を縦に連結、もしくは行間の線を消したいです。

|555555555|66666666|・・・・|ccccccccc|
|---X1----|---X2---|・・・・|---X8----|
|---X9----|---Xa---|・・・・|---Xg----|