Maneira mais comum de escrever uma tabela HTML com cabeçalhos verticais?

95

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:

render
Com os cabeçalhos no lado esquerdo ou direito, se preferir, alguma sugestão, alternativa, problemas com o navegador?

html css datatable semantic-markup Tristian
fonte

Respostas:

45

Primeiro, sua segunda opção não é um HTML muito válido no sentido de que todas as linhas (TR) em uma tabela devem conter um número igual de colunas (TD). Seu cabeçalho tem 1, enquanto o corpo tem 3. Você deve usar o atributo colspan para corrigir isso.

Referência: "As seções THEAD, TFOOT e TBODY devem conter o mesmo número de colunas." - Último parágrafo da seção 11.2.3 .

Com isso dito , a primeira opção é a melhor abordagem na minha opinião, porque é legível, independentemente de eu ter ou não habilitado o CSS. Alguns navegadores (ou rastreadores de mecanismos de pesquisa) não usam CSS e, como tal, seus dados não farão sentido, pois o cabeçalho representará colunas em vez de linhas.

Francois Deschenes
fonte
É mesmo necessário que ele conserte aquele primeiro problema que você mencionou? Já que se você adicionar apenas uma célula, ela automaticamente ocupa o primeiro espaço e o resto é ignorado?
LouwHopley
oi obrigado por destacar a marcação inválida, vou corrigi-lo.
Tristian
@Nideo - adicionei uma referência da documentação HTML4 em meu post que afirma claramente que THEAD, TFOOT e TBODY devem conter o mesmo número de colunas.
François Deschenes
@Triztian - Mais uma coisa. O TFOOT deve estar diretamente abaixo do THEAD (e antes dos TBODYs). Novamente, isso é abordado na seção 11.2.3 da especificação HTML.
François Deschenes
1
@prodigitalson - O scopeatributo não faria muita diferença neste caso. Se você ler para que serve, você entenderá. Basicamente, significa que essa coluna é o cabeçalho da linha ou coluna que contém. O problema é que seu uso não faz sentido, a menos que substitua o <th>por um <td scope="row">.
François Deschenes
5

A primeira opção ... Acho que é a abordagem melhor e simples ..

Philemon philip Kunjumon
fonte
0

Se você quiser mostrar um elemento de controle vinculado a dados (como repetidor asp) em sua tabela, a primeira opção não será possível. A segunda opção pode ser usada da seguinte maneira.

<asp:Repeater ID="hours" runat="server">
    <HeaderTemplate>
    <table id="vertical-table">
        <thead>
            <tr><th colspan="0">hours:</th></tr>
            <tr><th colspan="1">Monday</th></tr>
            <tr><th colspan="1">Tuesday</th></tr>
            <tr><th colspan="1">Wednesday</th></tr>
            <tr><th colspan="1">Thursday</th></tr>
            <tr><th colspan="1">Friday</th></tr>
            <tr><th colspan="1">Saturday</th></tr>
            <tr><th colspan="1">Sunday</th></tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    <ItemTemplate>
            <tr><td><%# Container.DataItem %></td></tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
    </table>
    </FooterTemplate>
</asp:Repeater>
Barry Guvenkaya
fonte
-3 

div.vertical {
  margin-left: -85px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: left;
}
<table>
  <thead>
    <tr>
      <th class="vertical">
        <div class="vertical">Really long and complex title 1</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 2</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 3</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>a, b, c</td>
      <td>1, 2, 3</td>
    </tr>
  </tbody>
</table>

Deenathaiyalan Shanmugam
fonte
3
Adicione uma explicação de como sua resposta aborda o problema identificado na pergunta.
blurfus