HTMLのtableタグを使って以下のような表はどのようにしたら作成可能でしょうか。
下図のように３行３列で１列目と３列目の１行目と２行目を結合。２列目は２行目と３行目を結合させたいです。

以下のコードで試しているのですが3列目が上手くいきません。
どこをどう修正すればよいでしょうか。
アドバイス頂ければ幸いです。

HTML
1<!DOCTYPE>
2<html lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
5<meta http-equiv="Content-Style-Type" content="text/css">
6<title>サンプル</title>
7<style>
8table , td, th {
9	border: 1px solid #595959;
10	border-collapse: collapse;
11}
12td, th {
13	padding: 3px;
14	width: 30px;
15	height: 25px;
16}
17</style>
18</head>
19
20<body>
21<form method="post" action="#">
22<table>
23	<tbody>
24		<tr>
25			<td rowspan="2"></td>
26			<td></td>
27			<td></td>
28		</tr>
29		<tr>
30			<td rowspan="2"></td>
31			<td></td>
32		</tr>
33		<tr>
34			<td></td>
35			<td></td>
36		</tr>
37	</tbody>
38</table>
39</form>
40</body>
41</html>

行動規範の内容に同意します

回答5件

html
1<table>
2	<tbody>
3		<tr>
4			<td rowspan="2"></td>
5			<td class="ss"></td>
6			<td rowspan="2"></td>
7		</tr>
8		<tr>
9			<td rowspan="2"></td>
10		</tr>
11		<tr>
12			<td class="ss"></td>
13			<td class="ss"></td>
14		</tr>
15	</tbody>
16</table>
17

css
1table , td {
2	border: 1px solid #595959;
3	border-collapse: collapse;
4}
5td {
6	padding: 3px;
7	width: 30px;
8	height: 4em;
9}
10.ss {height:2em}

高さが低くなるセルにクラスを当ててわかりやすくしてます。
高さの指定がないと2行3列のテーブルに見えます。

【追記】
こちらのサイトで複雑な表組みを簡単に組めます。
ご参考まで。
Table Tag Generator

投稿2017/06/27 08:26

編集2017/06/27 08:34

onodo

総合スコア97

clubman

2017/06/29 11:28

ご回答ありがとうございます。紹介して頂いたサイトではすでに試してみたのですが、上手く行かなかったのでこちらで質問させていただきました。ただ提示して頂いたやり方もあるのですね。今回のパターンでは良いのですが、結合のパターンが動的になっており無数にあるのでロジックが複雑になりそうです。

行動規範の内容に同意します

行の高さが確定できないので命題のようなテーブルはおすすめできませんが
どうせ推奨外であれば、ケツにダミーセルをつけるという手もあります

HTML
1<style>
2table{
3  border-collapse: collapse;
4}
5td, th {
6    border: 1px solid #595959;
7    padding: 3px;
8    width: 30px;
9    height: 25px;
10}
11td:last-child{
12border:solid 0px; 
13}
14</style>
15<table>
16<tbody>
17<tr>
18<td rowspan="2"></td>
19<td></td>
20<td rowspan="2"></td>
21<td></td>
22</tr>
23<tr>
24<td rowspan="2"></td>
25<td></td>
26</tr>
27<tr>
28<td></td>
29<td></td>
30<td></td>
31</tr>
32</tbody>
33</table>

ダミーを使わないで高さを指定

HTML
1<style>
2table{
3  border-collapse: collapse;
4}
5td, th {
6    border: 1px solid #595959;
7    padding: 3px;
8    width: 30px;
9    height: 25px;
10}
11td[rowspan="2"]{ height:50px;}
12</style>
13<table>
14<tbody>
15<tr>
16<td rowspan="2"></td>
17<td></td>
18<td rowspan="2"></td>
19</tr>
20<tr>
21<td rowspan="2"></td>
22</tr>
23<tr>
24<td></td>
25<td></td>
26</tr>
27</tbody>
28</table>

投稿2017/06/27 06:41

編集2017/06/27 08:22

yambejp

総合スコア114769

clubman

2017/06/27 08:06

ご回答ありがとうございます。やはり正攻法では無理なのでしょうか。提示したのはサンプルのHTMLで、実際は動的にtableエリアが作成され結合のパターンが無数にあるためダミーセルをつけるなどロジックが複雑になることは避けたいのです。

yambejp

2017/06/27 08:19 編集

そうなると単にセルに高さを指定することです追記しておきました

yambejp

2017/06/27 12:49

IEで動作が不安定ですね

clubman

2017/06/29 11:30

今回はiPadのSafari限定なのでIEで動作が不安定で問題ありません。Safariでも問題ないか確認してみます。ありがとうございました。

行動規範の内容に同意します

rowspanごとにCSS決め打ちしてよろしければ、こんな感じで。

HTML
1<table>
2    <tbody>
3        <tr>
4            <td rowspan="2">1</td>
5            <td>1</td>
6            <td rowspan="2">1</td>
7        </tr>
8        <tr>
9            <td rowspan="2">2</td>
10        </tr>
11        <tr>
12            <td>3</td>
13            <td>3</td>
14        </tr>
15    </tbody>
16</table>

CSS
1td[rowspan="2"], th[rowspan="2"] {
2    height: 57px;
3}

投稿2017/06/27 08:38

Lhankor_Mhy

総合スコア36074

clubman

2017/06/29 11:33

ご回答ありがとうございます。yambejpさんと似たような感じでしょうか。参考にさせていただきます。

行動規範の内容に同意します

レイアウトだろうと勝手に判断して、CSS グリッドレイアウトをおすすめします。

CSS グリッドレイアウト (MDN)
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

CSS Grid Layout を極める！（基礎編）
http://qiita.com/kura07/items/e633b35e33e43240d363

投稿2017/06/27 08:10

x_x

総合スコア13749

clubman

2017/06/29 11:24

ご回答ありがとうございます。これは知りませんでした。紹介して頂いたサイトを見て使えるか考えてみます。ありがとうございます。

行動規範の内容に同意します

<table>
    <tbody>
        <tr>
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
        </tr>
    </tbody>
</table>

こうですかね。
もう少し試行錯誤すれば出来るかと思います。

投稿2017/06/27 06:39