Pregunta

¿Es necesario tener <th> en cualquier mesa? incluso si la tabla no tiene rumbo?

tabla tiene otros 3 <thead> etiqueta <tbody> <tfoot> es necesario el uso de todos, incluso si no tengo nada para la tabla de pie de página. Firefox por defecto poner todo esto en código.

y es necesario, <th> siempre debe estar en un <thead>

y si tengo un título en el contenido recibido del cliente, y sentido está fuera de la mesa, pero relacionado con la tabla a continuación, ¿cómo debo poner que la partida para la tabla

Como tabla anterior

<h3>Heading of table<h3>
<table>......</table>

como encabezamiento de la tabla

<table>
<thead><tr rowspan=3><th>Heading of table</th></tr></thead>

o como una leyenda de la tabla

<table>
<caption> Heading of table</caption>

Lo que es bueno para el lector de pantalla y semánticamente correcto?

¿Fue útil?

Solución

De acuerdo con la DTD HTML este es el modelo de contenido para las tablas HTML:

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION  - - (%inline;)*     -- table caption -->
<!ELEMENT THEAD    - O (TR)+           -- table header -->
<!ELEMENT TFOOT    - O (TR)+           -- table footer -->
<!ELEMENT TBODY    O O (TR)+           -- table body -->
<!ELEMENT COLGROUP - O (COL)*          -- table column group -->
<!ELEMENT COL      - O EMPTY           -- table column -->
<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

Así que esto es ilegal sintaxis:

<thead><th>Heading of table</th></thead>

Debe ser:

<thead><tr><th>Heading of table</th></tr></thead>

Los elementos <th> no son necesarios en cualquier lugar. Son simplemente uno de los dos tipos de células (el otro es <td>) que se pueden utilizar en una fila de la tabla. A <thead> es una sección de la tabla opcional que puede contener una o más filas.

Editar En cuanto a ¿Por qué para utilizar <thead> hay varias razones:

  1. Semántica: Esta diferenciación entre el contenido de la tabla y "metadatos". Esta es la más utilizada para delimitar entre encabezados de columna y filas de datos;
  2. Accesibilidad: Ayuda a las personas que utilizan lectores de pantalla para entender el contenido de la tabla;
  3. Medios para no Pantalla: Impresión de una tabla de varias páginas pueden permitir poner el contenido <thead> en la parte superior de cada página para que la gente pueda entender lo que las columnas es decir, sin parpadeo de vuelta varias páginas;
  4. Styling: CSS se puede aplicar a <tbody> elementos, elementos <thead>, ambos o alguna otra combinación. Se le da algo más que escribir un selector en contra;
  5. Javascript: esta surge con frecuencia cuando se utiliza jQuery y bibliotecas similares. La información adicional es útil en la escritura de código.

Como ejemplo de (5) es posible hacer esto:

$("table > tbody > tr:nth-child(odd)").addClass("odd");

El elemento <thead> significa aquellas filas no ser de estilo de esa manera. O puede ser que hacer:

$("table > tbody > tr").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

por:

tr.hover { background: yellow; }

que de nuevo excluye las filas <thead>.

Por último, muchos de estos mismos argumentos se aplican al uso de elementos <th> sobre los elementos <td>: usted está indicando que esta celda no es sino una cabecera de datos de algún tipo. A menudo, tales células se agrupan en una o más filas en la sección <thead> o ser la primera celda de cada fila dependiendo de la estructura y la naturaleza de su mesa.

Otros consejos

Use <th>s si está mostrando datos tabulares - utilizar uno para cada columna. Es agradable para sus usuarios habituales y esencial para los lectores de pantalla. No utilice <th>s si está utilizando la tabla con fines de diseño (u otros esquemas nefastos ...)

No, no es necesario tener XX. Pero no parece que estés usando º derecha. En general, usted tiene uno para cada columna. Un ejemplo sencillo de º utilizados correctamente es:

<table>
<tr><th>Breed</th><th>Name</th></tr>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>

También puede hacer:

<table>
<thead><tr><th>Breed</th><th>Name</th></tr></thead>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>

La respuesta es

SÍ!

si está utilizando tablas para mostrar datos tabulares .

Los datos tabulares se organizan en filas y columnas para una razón. El significado del dato en una celda de la tabla está definida por el sentido de la columna y la fila en la que aparece.

Es importante para identificar las células que dan sentido a las filas y columnas en lugar separado de las células que contienen solo datos.

Por ejemplo, la siguiente tabla transmite absolutamente ninguna información significativa:

34 56 90 15
45 65 85 30
50 55 70 35

Los números sólo tienen sentido si las filas y columnas se dan nombres. Esos nombres están marcados usando <th>:

    Feb May Aug Nov
ITH
JFK
IST

Por supuesto, todavía no saben lo que significan esos números por lo que se necesita <caption>:

Average Temperatures by Month at Selected Airports
    Feb May Aug Nov
ITH
JFK
IST

Por último, es importante tener en cuenta detalles tales como las unidades de medida, fuentes de datos, etc. Ese tipo de información por lo general va en el pie de página de la tabla:

Average Temperatures by Month at Selected Airports
    Feb May Aug Nov
ITH
JFK
IST
Temperatures in °F. Source: Publication #456 MNMO

El título de la tabla entra en <caption> . El <thead> y secciones <tfoot> son especialmente útiles cuando crece una mesa grande. Ver ¿Cómo lidiar con los saltos de página cuando imprimir un gran tabla HTML para un ejemplo.

Puede utilizar <colgroups> a agrupar lógicamente los datos relacionados.

Usted desea utilizar lo describe mejor sus datos.

<caption> describirá toda la tabla. th creará una sola célula que se utiliza generalmente para describir una columna (pero también se puede utilizar para encabezados de fila).

thead, tfoot y tbody. todos pueden ser utilizados y se proporcionan todos opcionales que están en ese orden, si se utiliza, y usted tiene sólo una thead y uno tfoot (pero puede tener múltiples tbody. Muchos navegadores (todos?) los añadiremos implícitamente si no' t, pero la especificación dice que son opcionales.

th puede aparecer dentro de cualquier tr independientemente del lugar en el tr es.

<table>
     <tr>
        <td>text</td>
     </tr>      
</table>

Esta es la tabla mínimo que puedo imaginar.

Los beneficios son la semántica. Los medios <th> T capaz H eader. Utilizarlo para el marcado de las cabeceras de las columnas. Generalmente dentro de un <thead>.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top