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


Answers

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

Question

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 la etiqueta de encabezado ( <th> ) en el lado izquierdo (generalmente)

Header 1 data data data
Header 2 data data data
Header 3 data data data

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 tiene los encabezados correctos (en realidad, a la izquierda) al lado de los datos que representa, pero lo que no me gusta es que <thead> las <thead> , <tbody> y <tfoot> , y no hay forma de incluirlos 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 tienes una tabla html completamente descriptiva, los inconvenientes son que la representación adecuada necesita un poco de CSS para las etiquetas tbody y thead 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:


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




[Mejor enlace] [ http://www.broculos.net/2013/12/vertical-text-for-table-headers-with-css.html]

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>