Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
HTML/CSSにて画像のようにテーブルを結合したいのですが
下記のようなソースではなぜか中央3番が詰まってしまい
うまくできません・・・
画像のようにテーブルを結合する方法をご教授お願い致します。
--------HTML----------
<table summary="結合されたテーブル" class="table1"> <caption>テーブルの結合</caption> <table class="table"> <tr> <td rowspan="3"></td> <td colspan="4"></td> </tr> <tr> <td colspan="2"></td> <td rowspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td colspan="3"></td> </tr> </table> </body>
-------------CSS-------------------
lcaption { caption-side:bottom; margin-top:8px; } .table1 { border-collapse:collapse; } .table1 td{ width:50px; height:50px; border:1px #2b2b2b solid; text-align:center; }
コードブロックで囲みました
質問文は消さないようにしてください。同じ問題で躓いた人が後から見た時参考になりません。
回答が付いた質問の編集は慎重に行ってください。タイプミス程度なら修正する事もありますが、本文を削除するのはやめましょう。画面右上の「2016/06/15 12：53 編集」というボタンを押すと編集履歴を見れます。そこから過去の投稿を確認できるので、それを使って記事を復元してください。
回答4件
0
これを実現しようとすると２行目で縦横２ｘ２の結合セルを定義することになり
恐らく３行目にセルの定義ができなくなると思います
html
1 <tr> 2 <td rowspan="3">1</td> 3 <td colspan="4">2</td> 4 </tr> 5 <tr> 6 <td colspan="2" rowspan="2">3</td> 7 <td rowspan="3">4</td> 8 </tr> 9 <tr> 10 <!-- ここに入るセルが無い！ --> 11 </tr> 12 <tr> 13 <td colspan="3">5</td> 14 </tr> 15
ですので、全体の構成が３行となり、真ん中の行が高さ 100px になるイメージかなと思います
html
1 <tr> 2 <td rowspan="2">1</td> 3 <td colspan="4">2</td> 4 </tr> 5 <tr> 6 <td colspan="2">3</td> 7 <td rowspan="2">4</td> 8 </tr> 9 <tr> 10 <td colspan="3">5</td> 11 </tr> 12
他に方法あるかもしれませんが、とりあえずこれで実現はできました
（追記）
というか、列方向も同じことが言えそうですね
結論としては ３ｘ３ の構成で 中央行と中央列を 100px サイズに指定すればよさそうです
４ｘ４ でなければいけない理由があるなら別ですが、、、
投稿2016/06/15 02:54
編集2016/06/15 03:00
総合スコア3116
0
FKMさんの回答から、空のtrを除きたいそうで、
このようにしたらいけました。
理由はわかりません（笑）
肝は2点、
１．tableのwidth、heightの指定ではなく
3のtdにwidth、heightを指定する。
２．1のtdのrowspanを3から2に変更
ちなみに、FKMさんの提示されたソースで２をやってもうまくいきませんでした。
たまたまこれでうまくいった感はありますが、いかがでしょうか？
<body> <table summary=""結合されたテーブル class="table1"> <caption>テーブルの結合</caption> <tr> <td rowspan="2">1</td> <td colspan="3">2</td> </tr> <tr> <td colspan="2" style="width:100px;height:100px;">3</td> <td rowspan="3">4</td> </tr> <tr> <td colspan="3">5</td> </tr> </table> </body>
caption { caption-side:bottom; margin-top:8px; } .table1 { border-collapse:collapse; } .table1 td{ width:50px; height:50px; border:1px #2b2b2b solid; text-align:center; }
投稿2016/06/15 06:41
総合スコア196
0
ベストアンサー
これで行けると思います（検証済み）
ポイントはテーブル全体にwidth指定をしてあげることと、
３行目に空の<tr></tr>タグを入れてあげることです。
CSS
caption {
caption-side:bottom;
margin-top:8px;
}
.table1 {
border-collapse:collapse;
width: 200px;
height: 200px;
}
.table1 td{
width:48px;
height:48px;
border:1px #2b2b2b solid;
text-align:center;
}
投稿2016/06/15 03:04
編集2016/06/15 03:06
総合スコア3662
ありがとうございます！
ただ<tr></tr>の中身を空にしてしまうと構文エラーになるので、
何か構文エラーにならずに実現できる方法をご教授頂けないでしょうか。
<td styel="display:none;"></td>
でも入れたらいかがでしょう？
空タグ<tr></td>の間に
<td style="display:none; "></td>
と入れてみて、構文エラーになりますでしょうか？
ちなみに、こちらの回答ではtable1のwidth、heightを指定していますが、
3が入るtdのwidth、heightを他のtdの倍に指定することでも可能でした。
<td style="display:none; "></td>を入れることで「不明な属性 `styel` が指定されています。」とエラーになり、またレイアウトも崩れてしまいますね....
すみません！
CSSにて指定してあげれば、レイアウトもくずれることなく実現できました！
ありがとうございました！
すみません、問題解決と思ったのですが...
現在空で挿入している<tr></tr>を使用せずに実現することは可能でしょうか。
0
3行目に<td>タグは要りませんね...
html
1<table summary=""結合されたテーブル class="table1"> 2<caption>テーブルの結合</caption> 3<tr> 4<td rowspan="3">1</td> 5<td colspan="4">2</td> 6</tr> 7<tr> 8<td colspan="2">3</td> 9<td rowspan="3">4</td> 10</tr> 11<tr> 12</tr> 13<tr> 14<td colspan="3">5</td> 15</tr> 16</table>
投稿2016/06/15 02:56
編集2016/06/15 02:58
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
