HTMLで写真にあるようなデザインをコーディングしたいのですができません。。

こちらの写真のようなデザインの表を作りたくて色々試してみたいのですが、なかなかできません。

どなたか分かる方教えていただけるととても助かります。。

宜しくお願いします。

kei344

2017/04/19 07:44

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

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

回答2件

<th> ないし <td> タグの colspan, rowspan を組み合わせることで、「横にxセル分の領域を持つセル」「縦にyセル分の領域を持つセル」を作ることができます。これを使いましょう。

html
1<table>
2  <thead>
3    <tr>
4      <th rowspan="2">タイトルA</th>
5      <th rowspan="2">タイトルB</th>
6      <th colspan="6">親タイトルA</th>
7      <th colspan="2">親タイトルB</th>
8    </tr>
9    <tr>
10      <th>子タイトルA-1</th>
11      <th>子タイトルA-2</th>
12      <th>子タイトルA-3</th>
13      <th>子タイトルA-4</th>
14      <th>子タイトルA-5</th>
15      <th>子タイトルA-6</th>
16      <th>子タイトルB-1</th>
17      <th>子タイトルB-1</th>
18    </tr>
19  </thead>
20  <tbody>
21  ...

投稿2017/04/19 07:47

編集2017/04/19 07:52

tacsheaven

総合スコア13703

ShunYoshizawa

2017/04/19 09:52

ご回答ありがとうございました！

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

ベストアンサー

とくに特殊な処理もないので、見たままやればよいのでは？

HTML
1<table border>
2<thead>
3<tr>
4<th rowspan=2>タイトル</th>
5<th rowspan=2>タイトル</th>
6<th colspan=6>親タイトル</th>
7<th colspan=2>親タイトル</th>
8</tr>
9<tr>
10<th>子タイトル</th>
11<th>子タイトル</th>
12<th>子タイトル</th>
13<th>子タイトル</th>
14<th>子タイトル</th>
15<th>子タイトル</th>
16<th>子タイトル</th>
17<th>子タイトル</th>
18</tr>
19</thead>
20<tbody>
21<tr>
22<td>内容</td>
23<td>内容</td>
24<td>内容</td>
25<td>内容</td>
26<td>内容</td>
27<td>内容</td>
28<td>内容</td>
29<td>内容</td>
30<td>内容</td>
31<td>内容</td>
32</tr>
33</tbody>
34</table>