teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問HTML/CSS　テーブルの結合

編集履歴

質問編集履歴

3

指摘修正しました。

2016/06/15 05:54

投稿

nandemoiii
nandemoiii

スコア14

test CHANGED
@@ -1 +1 @@
1
- テーブル
1
+ HTML/CSS　テーブルの結合
test CHANGED
@@ -1,39 +1,95 @@
1
+ ![イメージ説明](19c34c4b6691ee71fb40d63a83ff5c64.jpeg)
2
+
3
+
4
+
5
+ HTML/CSSにて画像のようにテーブルを結合したいのですが
6
+
7
+ 下記のようなソースではなぜか中央3番が詰まってしまい
8
+
9
+ うまくできません・・・
10
+
11
+
12
+
13
+ 画像のようにテーブルを結合する方法をご教授お願い致します。
14
+
15
+
16
+
1
17
  **--------HTML----------**
2
18
 
3
19
  ```<body>
4
20
 
5
- <table class="table">
21
+ <table summary="結合されたテーブル" class="table1">
6
22
 
7
- <tr>
23
+ <caption>テーブルの結合</caption>
8
24
 
9
- <td rowspan="3"></td>
25
+ <table class="table">
10
26
 
11
- <td colspan="4"></td>
27
+ <tr>
12
28
 
13
- </tr>
29
+ <td rowspan="3"></td>
14
30
 
15
- <tr>
31
+ <td colspan="4"></td>
16
32
 
17
- <td colspan="2"></td>
33
+ </tr>
18
34
 
19
- <td rowspan="3"></td>
35
+ <tr>
20
36
 
21
- </tr>
37
+ <td colspan="2"></td>
22
38
 
23
- <tr>
39
+ <td rowspan="3"></td>
24
40
 
25
- <td colspan="2"></td>
41
+ </tr>
26
42
 
27
- </tr>
43
+ <tr>
28
44
 
29
- <tr>
45
+ <td colspan="2"></td>
30
46
 
31
- <td colspan="3"></td>
47
+ </tr>
32
48
 
33
- </tr>
49
+ <tr>
34
50
 
51
+ <td colspan="3"></td>
52
+
53
+ </tr>
54
+
35
- </table>
55
+ </table>
36
56
 
37
57
  </body>
38
58
 
39
- ```
59
+ ```
60
+
61
+
62
+
63
+ **-------------CSS-------------------**
64
+
65
+ ```
66
+
67
+ lcaption {
68
+
69
+ caption-side:bottom;
70
+
71
+ margin-top:8px;
72
+
73
+ }
74
+
75
+
76
+
77
+ .table1 {
78
+
79
+ border-collapse:collapse;
80
+
81
+ }
82
+
83
+
84
+
85
+ .table1 td{
86
+
87
+ width:50px;
88
+
89
+ height:50px;
90
+
91
+ border:1px #2b2b2b solid;
92
+
93
+ text-align:center;
94
+
95
+ }

2

変更

2016/06/15 05:54

投稿

nandemoiii
nandemoiii

スコア14

test CHANGED
@@ -1 +1 @@
1
- HTML/CSS　テーブルの結合
1
+ テーブル
test CHANGED
@@ -1,26 +1,8 @@
1
- ![イメージ説明](19c34c4b6691ee71fb40d63a83ff5c64.jpeg)
2
-
3
-
4
-
5
- HTML/CSSにて画像のようにテーブルを結合したいのですが
6
-
7
- 下記のようなソースではなぜか中央3番が詰まってしまい
8
-
9
- うまくできません・・・
10
-
11
-
12
-
13
- 画像のようにテーブルを結合する方法をご教授お願い致します。
14
-
15
-
16
-
17
1
  **--------HTML----------**
18
2
 
19
3
  ```<body>
20
4
 
21
- <table summary="結合されたテーブル" class="table1">
5
+ <table class="table">
22
-
23
- <caption>テーブルの結合</caption>
24
6
 
25
7
  <tr>
26
8
 
@@ -55,41 +37,3 @@
55
37
  </body>
56
38
 
57
39
  ```
58
-
59
-
60
-
61
- **-------------CSS-------------------**
62
-
63
- ```
64
-
65
- lcaption {
66
-
67
- caption-side:bottom;
68
-
69
- margin-top:8px;
70
-
71
- }
72
-
73
-
74
-
75
- .table1 {
76
-
77
- border-collapse:collapse;
78
-
79
- }
80
-
81
-
82
-
83
- .table1 td{
84
-
85
- width:50px;
86
-
87
- height:50px;
88
-
89
- border:1px #2b2b2b solid;
90
-
91
- text-align:center;
92
-
93
- }
94
-
95
- ```

1

コードブロック追加しました。

2016/06/15 03:53

投稿

nandemoiii
nandemoiii

スコア14

test CHANGED
File without changes
test CHANGED
@@ -14,11 +14,11 @@
14
14
 
15
15
 
16
16
 
17
- --------HTML--------------------
17
+ **--------HTML----------**
18
18
 
19
- <body>
19
+ ```<body>
20
20
 
21
- <table summary=""結合されたテーブル class="table1">
21
+ <table summary="結合されたテーブル" class="table1">
22
22
 
23
23
  <caption>テーブルの結合</caption>
24
24
 
@@ -54,11 +54,15 @@
54
54
 
55
55
  </body>
56
56
 
57
+ ```
57
58
 
58
59
 
59
- -------------CSS-------------------
60
60
 
61
+ **-------------CSS-------------------**
62
+
63
+ ```
64
+
61
- caption {
65
+ lcaption {
62
66
 
63
67
  caption-side:bottom;
64
68
 
@@ -87,3 +91,5 @@
87
91
  text-align:center;
88
92
 
89
93
  }
94
+
95
+ ```