『verticalalign=top』が効かせたい

初心者で申し訳ありません。。。
結合したセル内のテキストを中央に揃えたいが『verticalalign=top』が効きません。

###発生している問題・エラーメッセージ
結合したセル内のテキストを中央に揃えたいが『verticalalign=top』が効きません。

エラーメッセージ

###該当のソースコード

<style>

table {border-collapse: collapse; width:400px;height:200px;width:100%;table-layout: fixed;}

th.test {font-weight:bold;}
th.test1 {font-weight:normal;text-align: left;
vertical-align: top;}


th {
width:100%;
layout: fixed;
font-size: 14px;    
font-family: "Meiryo",sans-serif;
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}


td {
width:100%;
layout: fixed;
text-align: center;
vertical-align: top;
font-size: 14px;    
font-family: "Meiryo",sans-serif;
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}

</style>


<table>
<thead>

<tr>
<th class="test">
1
</th>
<th>
2
</th>
<th>
3
</th>
</tr>
</thead>
<tbody>
<tr>

<th class="test1">4
</th>
<td>
5
</td>
<td>
6
</td>
</tr>
<tr>
<th class="test1">
7
</th>
<td>
8
</td>
<td>
9
</td>
</tr>
<tr>
<th class="test1">
10
</th>
<td>
11
</td>
<td>
12
</td>
</tr>
<tr>
<th class="test1">
13
</th>
<td>
14
</td>
<td>
15
</td>
</tr>
<tr>
<th class="test1">
16
</th>
<td>
17
</td>
<td>
18
</td>
</tr>
<tr>
<th class="test1">
19
</th>
<td>
20
</td>
<td>21</td>
</tr>


<tr>
<th class="test1">
22
</th>

<td rowspan=3 colspan=3 alignItems=center verticalalign=top >問題の個所</td>
</tr>
<tr><th class="test1">
23
</th>
</tr>
		
<tr>
<th class="test1">24
</th>

</tr>
</tbody>
</table>

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
現状のまま、中央に揃えて表示出来れば助かります。

kei344

2017/07/11 07:27

問題が再現しません。ブラウザのバージョンなどの情報を質問文に追記ください。https://jsfiddle.net/245fzpod/

hirohiro22

2017/07/11 07:34

大変申し訳ありません。59.0.3071.115（Official Build）（64 ビット）にて確認しております。こちらの環境では、結合されたセル内の「問題の個所」を中央揃えにしたいのですが、上部にセンタリングされております。

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

回答2件

ベストアンサー

質問の意図として
上下中央なのだと思いますが
HTMLの属性であれば
verticalalignではなくvalignです

またvalignのtopは上段揃えです
valignのmiddleが中央揃えになります

CSSを利用する方がすっきりするため
CSSプロパティのvertical-alignで記載してみました

html
1<style>
2.mondaino_kasho {
3    text-align: center;
4    vertical-align: middle;
5}
6</style>
7
8    <table>
9        <thead>
10            <tr>
11                <th class="test">1</th>
12                <th>2</th>
13                <th>3</th>
14            </tr>
15        </thead>
16        <tbody>
17
18            <tr>
19                <th class="test1">19</th>
20                <td>20</td>
21                <td>21</td>
22            </tr>
23            <tr>
24                <th class="test1">22</th>
25                <td rowspan=3 colspan=3 class="mondaino_kasho">問題の個所</td>
26            </tr>
27            <tr>
28                <th class="test1">23</th>
29            </tr>
30            <tr>
31                <th class="test1">24</th>
32            </tr>
33        </tbody>
34    </table>
35