Olá a todos, já faz um tempo que não pergunto algo, isso é algo que está me incomodando há algum tempo, a própria pergunta está no título:
Qual é a sua maneira preferida de escrever tabelas HTML com cabeçalhos verticais?
Por cabeçalho vertical, quero dizer que a tabela tem a <th>tag header ( ) no lado esquerdo (geralmente)
Cabeçalho 1 dados dados dados
Cabeçalho 2 dados dados dados
Cabeçalho 3 dados dados dados
Eles se parecem com isso, até agora eu vim com duas opções
Primeira opção
<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>
A principal vantagem deste modo é que você tem os cabeçalhos direita (na verdade esquerda) junto aos dados que ela representa, o que eu não gosto, porém, é que os <thead>, <tbody>e <tfoot>marcas estão faltando, e não há nenhuma maneira de incluí-los sem quebrar o elementos bem colocados juntos, o que me leva à segunda opção.
Segunda opçao
<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>
A principal vantagem aqui é que você tem uma tabela html totalmente descritivo, as desvantagens são que uma representação adequada precisa de um pouco de CSS para os tbodye theadtags e que a relação entre os cabeçalhos e os dados não é muito claro como eu tinha minhas dúvidas ao criar a marcação.
Portanto, as duas formas renderizam a tabela como deveria, aqui está uma cópia:
Com os cabeçalhos no lado esquerdo ou direito, se preferir, alguma sugestão, alternativa, problemas com o navegador?