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?
fuente
scopeatributo realmente no haría mucha diferencia en este caso. Si lees para qué sirve, lo entenderás. Básicamente significa que esa columna es el encabezado de la fila o columna que contiene. El problema es que su uso no tiene sentido a menos que se reemplace<th>con un<td scope="row">.La primera opción ... Creo que es el enfoque mejor y más sencillo ...
fuente
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
fuente
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.
fuente
fuente