コーディングでテーブルを作っているのですがうまくいきません。

前提・実現したいこと

↑同じデザインのテーブルを作りたいのですがうまく作れません。
どのように作ればいいのでしょうか？

該当のソースコード

html
1          <table class="list">
2            <tbody>
3              <tr class="day">
4                <td>月</td>
5                <td>火</td>
6                <td>水</td>
7                <td>木</td>
8                <td>金</td>
9                <td>土</td>
10                <td>日</td>
11              </tr>
12              <tr class="treatment">
13                <th>一般診療</th>
14                <td>正午～15：00（初診・再診）</td>
15                <td>▲</td>
16                <td>●</td>
17                <td>●</td>
18                <td>●</td>
19                <td>●</td>
20                <td>※</td>
21                <td>-</td>
22                <td>-</td>
23              </tr>
24              <!-- <tr class="treatment">
25                <th>予約診療</th>
26                <td></td>
27                <td></td>
28                <td></td>
29                <td></td>
30                <td></td>
31                <td></td>
32                <td></td>
33                <td></td>
34                <td></td>
35              </tr> -->
36            </tbody>
37          </table>
38

css
1.list {
2width: 100%;
3margin: 0 auto 0 5%;
4background-color: #e4e4e4;
5border-radius: 5px;
6}
7.list tr.day {
8display: flex;
9justify-content: flex-end;
10align-items: flex-end;
11}
12.list tr.day td {
13padding: 2% 0;
14flex: 0 0 7%;
15text-align: center;
16} 
17.list tr.treatment {
18display: flex;
19justify-content: center;
20flex-flow: nowrap;
21}
22.list tr.treatment th {
23text-align: center;
24background-color: #eee;
25width: 19%;
26}
27.list tr.treatment td {
28  text-align: center;
29  background-color: #fff;
30  font-size: 74%;
31  padding: 0 2%;
32  line-height: 2.9;
33}

試したこと

ネットでググって調べたり試行錯誤したのですがデザイン通りにできませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2019/08/08 02:48

「できません」「うまくいきません」だと状況を説明する情報が全くないので「やってみた結果、どうなったか」を他者にわかるようにしてください。動かないのであればエラーメッセージ、レイアウトであれば画面キャプチャです。

m.ts10806

2019/08/08 02:50

あと「.accessMap .acceptance」も提示いただかないと他者にはCSSが効かない状況になってます。

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

回答1件

ベストアンサー

横のセルと結合するにはcolspan
縦のセルと結合するにはrowspan
を利用します。
それぞれ入れた分だけ、考慮してセルを入れなければなりません。

簡易例

html
1colspan2
2<table border=1>
3    <tr>
4        <td colspan="2">1</td>
5    </tr>
6    <tr>
7        <td>2</td>
8        <td>3</td>
9    </tr>
10</table>
11
12rowspan2
13<table border=1>
14    <tr>
15        <td rowspan="2">1</td>
16        <td>2</td>
17    </tr>
18    <tr>
19        <td>3</td>
20    </tr>
21</table>
22
23colspan3
24<table border=1>
25    <tr>
26        <td colspan="3">1</td>
27    </tr>
28    <tr>
29        <td>2</td>
30        <td>3</td>
31        <td>4</td>
32    </tr>
33</table>
34
35rowspan3
36<table border=1>
37    <tr>
38        <td rowspan="3">1</td>
39        <td>2</td>
40    </tr>
41    <tr>
42        <td>3</td>
43    </tr>
44    <tr>
45        <td>4</td>
46    </tr>
47</table>