¿La forma más común de escribir una tabla HTML con encabezados verticales?

Hola a todos, ha pasado un tiempo desde que pregunté algo, esto es algo que me ha estado molestando por un tiempo, la pregunta en sí está en el título:

¿Cuál es su forma preferida de escribir tablas HTML que tienen encabezados verticales?

Por encabezado vertical me refiero a que la tabla tiene la <th>etiqueta header ( ) en el lado izquierdo (generalmente)

Encabezado 1 datos datos datos
Encabezado 2 datos datos datos
Encabezado 3 datos datos datos

Se ven así, hasta ahora se me han ocurrido dos opciones

Primera opción

   
    <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>
   

La principal ventaja de esta forma es que usted tiene los encabezados de la derecha (en realidad la izquierda) junto a los datos a los que representa, lo que no me gusta, sin embargo, es que los <thead>, <tbody>y <tfoot>las etiquetas se pierden, y no hay manera de incluirlos sin romper el nicelly colocó elementos juntos, lo que me lleva a la segunda opción.

Segunda opción

   
        <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>
   

La principal ventaja aquí es que usted tiene una tabla HTML totalmente descriptiva, los inconvenientes son que la representación adecuada necesita un poco de CSS para los tbodyy theadlas etiquetas y que la relación entre las cabeceras y los datos no es muy claro, ya que tenía mis dudas al crear el marcado.

Entonces, en ambos sentidos, renderice la tabla como debería, aquí un pitcure:

Con los encabezados en el lado izquierdo o derecho si lo prefiere, entonces, ¿alguna sugerencia, alternativa, problemas del navegador?

Primero, su segunda opción no es HTML del todo válido en el sentido de que todas las filas (TR) de una tabla deben contener el mismo número de columnas (TD). Su encabezado tiene 1 mientras que el cuerpo tiene 3. Debería usar el atributo colspan para arreglar eso.

Referencia: "Las secciones THEAD, TFOOT y TBODY deben contener el mismo número de columnas". - Último párrafo del apartado 11.2.3 .

Dicho esto , la primera opción es el mejor enfoque en mi opinión porque es legible independientemente de si tengo CSS habilitado o no. Algunos navegadores (o rastreadores de motores de búsqueda) no utilizan CSS y, como tal, hará que sus datos no tengan sentido, ya que el encabezado representará columnas en lugar de filas.

La primera opción ... Creo que es el enfoque mejor y más sencillo ...

Honestamente, opción 1. Le sugiero que mire este ejemplo de W3.org (enlace a continuación). Creo que este método es el mejor, porque de esta manera sus títulos también se interpretarán directamente en los lectores de pantalla.

https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only

Si desea mostrar un elemento de control enlazado a datos (como un repetidor asp) en su tabla, la primera opción no será posible. La segunda opción se puede utilizar de la siguiente manera.

<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>