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


Hola, hace un tiempo que no 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 tu forma preferida de escribir tablas HTML que tienen encabezados verticales?

Por encabezado vertical quiero decir que la tabla tiene el encabezado (<th>) etiqueta en el lado izquierdo (generalmente)

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

Se ven así, hasta ahora he encontrado 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 tienes los encabezados correctos (en realidad, a la izquierda) al lado de los datos que representa, pero lo que no me gusta es que el <thead>, <tbody> y <tfoot> faltan etiquetas, y no hay forma de incluirlas sin romper los elementos colocados 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 tiene una tabla html completamente descriptiva, los inconvenientes son que la representación adecuada necesita un poco de CSS para el tbody y thead etiquetas y que la relación entre los encabezados y los datos no es muy clara ya que tenía mis dudas al crear el marcado.


Por lo tanto, en ambos sentidos la mesa debe ser como debería ser, aquí una trampa:

render
Con los encabezados en el lado izquierdo o derecho si lo prefieres, entonces, ¿alguna sugerencia, alternativas, problemas con el navegador?


76
2018-06-16 06:45


origen


Respuestas:


Primero, su segunda opción no es un HTML completamente válido en el sentido de que todas las filas (TR) en una tabla deben contener un número igual de columnas (TD). Su encabezado tiene 1 mientras que el cuerpo tiene 3. Debe 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 de la sección 11.2.3.

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


35
2018-06-16 06:51



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


4
2018-06-16 07:08



Honestamente, opción 1. Sugiero que vea 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 en los lectores de pantalla.

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


1
2018-01-03 15:39



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>


-2
2017-07-14 12:47