こんにちは、私が何かを尋ねてからしばらく経ちました。これはしばらくの間私を悩ませてきたものです。質問自体はタイトルにあります：
垂直方向のヘッダーを持つHTMLテーブルを作成するための好ましい方法は何ですか？
垂直ヘッダーとは、テーブル<th>の左側に（一般的に）ヘッダー（）タグがあることを意味します
ヘッダー1データデータデータ
ヘッダー2データデータデータ
ヘッダー3データデータデータ
彼らはこのように見えます、これまでのところ私は2つのオプションを考え出しました
最初のオプション
<table id="vertical-1">
<caption>First Way</caption>
<tr>
<th>Header 1</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
</table>
この方法の主な利点は、それが表すデータの隣にヘッダーが右（実際には左）にあることです。ただし、私が好きでないの<thead>は<tbody>、<tfoot>タグとタグが欠落していることです。 nicellyが要素を一緒に配置したため、2番目のオプションに移動しました。
2番目のオプション
<style type="text/css">
#vertical-2 thead,#vertical-2 tbody{
display:inline-block;
}
</style>
<table id="vertical-2">
<caption>Second Way</caption>
<thead>
<tr>
<th colspan="3">Header 1</th>
</tr>
<tr>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th colspan="3">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Footer</td>
</tr>
</tfoot>
</table>
ここでの主な利点は、完全に説明的なhtmlテーブルがあることです。欠点は、tbodyとtheadタグに少しCSSが必要であり、作成時に疑問があったため、ヘッダーとデータの関係があまり明確でないことです。マークアップ。
したがって、どちらの方法でもテーブルを適切にレンダリングします。ここではピットキュアを使用しています。
ヘッダーを左側または右側に配置したい場合、提案、代替案、ブラウザーの問題はありますか？