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

編集履歴

質問編集履歴

3

指摘修正しました。

2016/06/15 05:54

投稿

nandemoiii
nandemoiii

スコア14

title CHANGED
@@ -1,1 +1,1 @@
1
- テーブル
1
+ HTML/CSS　テーブルの結合
body CHANGED
@@ -1,20 +1,48 @@
1
+ ![イメージ説明](19c34c4b6691ee71fb40d63a83ff5c64.jpeg)
2
+
3
+ HTML/CSSにて画像のようにテーブルを結合したいのですが
4
+ 下記のようなソースではなぜか中央3番が詰まってしまい
5
+ うまくできません・・・
6
+
7
+ 画像のようにテーブルを結合する方法をご教授お願い致します。
8
+
1
9
  **--------HTML----------**
2
10
  ```<body>
11
+ <table summary="結合されたテーブル" class="table1">
12
+ <caption>テーブルの結合</caption>
3
- <table class="table">
13
+ <table class="table">
4
- <tr>
14
+ <tr>
5
- <td rowspan="3"></td>
15
+ <td rowspan="3"></td>
6
- <td colspan="4"></td>
16
+ <td colspan="4"></td>
7
- </tr>
17
+ </tr>
8
- <tr>
18
+ <tr>
9
- <td colspan="2"></td>
19
+ <td colspan="2"></td>
10
- <td rowspan="3"></td>
20
+ <td rowspan="3"></td>
11
- </tr>
21
+ </tr>
12
- <tr>
22
+ <tr>
13
- <td colspan="2"></td>
23
+ <td colspan="2"></td>
14
- </tr>
24
+ </tr>
15
- <tr>
25
+ <tr>
16
- <td colspan="3"></td>
26
+ <td colspan="3"></td>
17
- </tr>
27
+ </tr>
18
- </table>
28
+ </table>
19
29
  </body>
20
- ```
30
+ ```
31
+
32
+ **-------------CSS-------------------**
33
+ ```
34
+ lcaption {
35
+ caption-side:bottom;
36
+ margin-top:8px;
37
+ }
38
+
39
+ .table1 {
40
+ border-collapse:collapse;
41
+ }
42
+
43
+ .table1 td{
44
+ width:50px;
45
+ height:50px;
46
+ border:1px #2b2b2b solid;
47
+ text-align:center;
48
+ }

2

変更

2016/06/15 05:54

投稿

nandemoiii
nandemoiii

スコア14

title CHANGED
@@ -1,1 +1,1 @@
1
- HTML/CSS　テーブルの結合
1
+ テーブル
body CHANGED
@@ -1,15 +1,6 @@
1
- ![イメージ説明](19c34c4b6691ee71fb40d63a83ff5c64.jpeg)
2
-
3
- HTML/CSSにて画像のようにテーブルを結合したいのですが
4
- 下記のようなソースではなぜか中央3番が詰まってしまい
5
- うまくできません・・・
6
-
7
- 画像のようにテーブルを結合する方法をご教授お願い致します。
8
-
9
1
  **--------HTML----------**
10
2
  ```<body>
11
- <table summary="結合されたテーブル" class="table1">
3
+ <table class="table">
12
- <caption>テーブルの結合</caption>
13
4
  <tr>
14
5
  <td rowspan="3"></td>
15
6
  <td colspan="4"></td>
@@ -26,23 +17,4 @@
26
17
  </tr>
27
18
  </table>
28
19
  </body>
29
- ```
30
-
31
- **-------------CSS-------------------**
32
- ```
33
- lcaption {
34
- caption-side:bottom;
35
- margin-top:8px;
36
- }
37
-
38
- .table1 {
39
- border-collapse:collapse;
40
- }
41
-
42
- .table1 td{
43
- width:50px;
44
- height:50px;
45
- border:1px #2b2b2b solid;
46
- text-align:center;
47
- }
48
20
  ```

1

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

2016/06/15 03:53

投稿

nandemoiii
nandemoiii

スコア14

title CHANGED
File without changes
body CHANGED
@@ -6,9 +6,9 @@
6
6
 
7
7
  画像のようにテーブルを結合する方法をご教授お願い致します。
8
8
 
9
- --------HTML--------------------
9
+ **--------HTML----------**
10
- <body>
10
+ ```<body>
11
- <table summary=""結合されたテーブル class="table1">
11
+ <table summary="結合されたテーブル" class="table1">
12
12
  <caption>テーブルの結合</caption>
13
13
  <tr>
14
14
  <td rowspan="3"></td>
@@ -26,9 +26,11 @@
26
26
  </tr>
27
27
  </table>
28
28
  </body>
29
+ ```
29
30
 
30
- -------------CSS-------------------
31
+ **-------------CSS-------------------**
32
+ ```
31
- caption {
33
+ lcaption {
32
34
  caption-side:bottom;
33
35
  margin-top:8px;
34
36
  }
@@ -42,4 +44,5 @@
42
44
  height:50px;
43
45
  border:1px #2b2b2b solid;
44
46
  text-align:center;
45
- }
47
+ }
48
+ ```