質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

3511閲覧

HTML/CSS テーブルの結合

nandemoiii

総合スコア14

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/06/15 02:28

編集2016/06/15 05:54

イメージ説明

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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/06/15 02:29

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
nandemoiii

2016/06/15 02:59

コードブロックで囲みました
masaya_ohashi

2016/06/15 04:07

質問文は消さないようにしてください。同じ問題で躓いた人が後から見た時参考になりません。
kei344

2016/06/15 04:30

回答が付いた質問の編集は慎重に行ってください。タイプミス程度なら修正する事もありますが、本文を削除するのはやめましょう。画面右上の「2016/06/15 12:53 編集」というボタンを押すと編集履歴を見れます。そこから過去の投稿を確認できるので、それを使って記事を復元してください。
guest

回答4

0

これを実現しようとすると2行目で縦横2x2の結合セルを定義することになり
恐らく3行目にセルの定義ができなくなると思います

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

ですので、全体の構成が3行となり、真ん中の行が高さ 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

他に方法あるかもしれませんが、とりあえずこれで実現はできました

(追記)
というか、列方向も同じことが言えそうですね
結論としては 3x3 の構成で 中央行と中央列を 100px サイズに指定すればよさそうです
4x4 でなければいけない理由があるなら別ですが、、、

投稿2016/06/15 02:54

編集2016/06/15 03:00
takito

総合スコア3111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

FKMさんの回答から、空のtrを除きたいそうで、
このようにしたらいけました。
理由はわかりません(笑)

肝は2点、
1.tableのwidth、heightの指定ではなく
3のtdにwidth、heightを指定する。

2.1のtdのrowspanを3から2に変更

ちなみに、FKMさんの提示されたソースで2をやってもうまくいきませんでした。
たまたまこれでうまくいった感はありますが、いかがでしょうか?

<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

nobuzoh

総合スコア196

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

これで行けると思います(検証済み)
ポイントはテーブル全体にwidth指定をしてあげることと、
3行目に空の<tr></tr>タグを入れてあげることです。

<body> <table summary=""結合されたテーブル class="table1"> <caption>テーブルの結合</caption> <tr> <td rowspan="3"></td> <td colspan="3"></td> </tr> <tr> <td colspan="2" rowspan="2"></td> <td rowspan="3"></td> </tr> <tr> </tr> <tr> <td colspan="3"></td> </tr> </table> </body>

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
FKM

総合スコア3606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nandemoiii

2016/06/15 03:18

ありがとうございます! ただ<tr></tr>の中身を空にしてしまうと構文エラーになるので、 何か構文エラーにならずに実現できる方法をご教授頂けないでしょうか。
nobuzoh

2016/06/15 03:33

<td styel="display:none;"></td> でも入れたらいかがでしょう?
FKM

2016/06/15 03:34

空タグ<tr></td>の間に <td style="display:none; "></td> と入れてみて、構文エラーになりますでしょうか?
nobuzoh

2016/06/15 03:37

ちなみに、こちらの回答ではtable1のwidth、heightを指定していますが、 3が入るtdのwidth、heightを他のtdの倍に指定することでも可能でした。
nandemoiii

2016/06/15 03:43

<td style="display:none; "></td>を入れることで「不明な属性 `styel` が指定されています。」とエラーになり、またレイアウトも崩れてしまいますね....
nandemoiii

2016/06/15 03:45

すみません! CSSにて指定してあげれば、レイアウトもくずれることなく実現できました! ありがとうございました!
nandemoiii

2016/06/15 05:57

すみません、問題解決と思ったのですが... 現在空で挿入している<tr></tr>を使用せずに実現することは可能でしょうか。
guest

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

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問