忍者code 初級その28

前提・実現したいこと

テーブルの縦結合をした時に文字を縦方向中央にしたいです。

発生している問題・エラーメッセージ

<td rowspan="3">縦に結合</td>で縦に3行結合しても文字は1行目にあって縦方向中央に寄りません。

該当のソースコード

html
1
2<body>
3    <table border="1" width="300px">
4      <tr>
5        <th>名前</th>
6        <th>年齢</th>
7        <th>体重</th>
8        <th>身長</th>
9      </tr>
10      <tr align="center">
11        <td colspan="4">ここを横に結合しよう</td>
12      </tr>
13      <tr align="center">
14        <td rowspan="3">縦に結合</td>
15        <td>22歳</td>
16        <td>42kg</td>
17        <td>158cm</td>
18      </tr>
19      <tr align="center">
20
21        <td>18歳</td>
22        <td>62kg</td>
23        <td>174cm</td>
24      </tr>
25      <tr align="center">
26        <td>32歳</td>
27        <td>124kg</td>
28        <td>233cm</td>
29      </tr>
30    </table>
31</body>
32

試したこと

padding-topで上に余白をあけようとしましたが、表の1行目全部に余白がついてしまいました。

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

atomを使っています。

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

回答1件

ベストアンサー

valign="middle"を付加したらどうでしょうか。（初期値は middle なのでなくてもいいはずなんですが）

HTMLタグ/テーブルタグ/セル内の文字の位置を指定する - TAG index

html
1<body>
2    <table border="1" width="300px">
3      <tr>
4        <th>名前</th>
5        <th>年齢</th>
6        <th>体重</th>
7        <th>身長</th>
8      </tr>
9      <tr align="center">
10        <td colspan="4">ここを横に結合しよう</td>
11      </tr>
12      <tr align="center" valign="middle">
13        <td rowspan="3">縦に結合</td>
14        <td>22歳</td>
15        <td>42kg</td>
16        <td>158cm</td>
17      </tr>
18      <tr align="center">
19
20        <td>18歳</td>
21        <td>62kg</td>
22        <td>174cm</td>
23      </tr>
24      <tr align="center">
25        <td>32歳</td>
26        <td>124kg</td>
27        <td>233cm</td>
28      </tr>
29    </table>
30</body>