Etiquetas de tabla HTML TH y TD

Las tablas han tenido una mala reputación durante mucho tiempo diseño web. Hace muchos años, las tablas HTML se usaban para el diseño, lo que obviamente no era para lo que estaban destinadas. A medida que CSS se hizo popular para el diseño de sitios web, la idea de que "las mesas son malas"se apoderó. Desafortunadamente, mucha gente entendió mal que esto significa que las tablas HTML son malas, todo el tiempo. Ese no es el caso en absoluto. La realidad es que las tablas HTML son malas cuando se usan para algo diferente a su verdadero propósito, que es mostrar datos tabulares (hojas de cálculo, calendarios, etc.). Si está creando un sitio web y tiene una página con este tipo de datos tabulares, no debe dudar en utilizar un Tabla HTML en tu pagina.

Qué hacer y ¿Hacer?

La

 etiqueta, o etiqueta de "datos de tabla", crea celdas de tabla dentro de una fila de tabla en una tabla HTML. Esta es la etiqueta HTML que contiene cualquier texto e imágenes. Básicamente, esta es la etiqueta de caballo de batalla de su mesa. Las etiquetas contendrán el contenido de la tabla HTML.

La

 o "encabezado de tabla" es similar a la  de muchas maneras. Puede contener el mismo tipo de información (aunque no colocaría una imagen en un ), pero define esa celda específica como un encabezado de tabla.

La mayoría de los navegadores web cambian el peso de la fuente a negrita y centran el contenido en una celda. Por supuesto, puedes usar Estilos CSS para que esos encabezados de tabla, así como el contenido de sus etiquetas, tengan el aspecto que le gustaría que se vieran en la página web renderizada.

Cuándo debe usar En vez de ?

La

La etiqueta debe usarse cuando desee designar el contenido de la celda como un encabezado para esa columna o fila. Las celdas del encabezado de la tabla generalmente se encuentran en la parte superior de la tabla o en el costado, básicamente, los encabezados en la parte superior de las columnas o los encabezados a la izquierda o al comienzo de una fila. Estos encabezados se utilizan para definir cuál es el contenido debajo o al lado de ellos, lo que hace que la tabla y su contenido sean mucho más fáciles de revisar y procesar rápidamente.

No utilice para estilizar tus células. Debido a que los navegadores tienden a mostrar las celdas del encabezado de la tabla de manera diferente, algunos diseñadores web perezosos pueden intentar aprovechar esto y usar la etiqueta cuando quieren que el contenido esté en negrita y centrado. Esto es malo por varias razones:

1. No puede confiar en que los navegadores web siempre muestren el contenido de esa manera. Los navegadores futuros pueden cambiar el color de forma predeterminada o no realizar ningún cambio visual en  contenido. Nunca debe confiar únicamente en los estilos de navegador predeterminados y nunca debe usar un elemento HTML debido a su "apariencia" por defecto.
2. Es semánticamente incorrecto. Los agentes de usuario que leen el texto pueden agregar un formato audible como "encabezado de fila: su texto" para indicar que está en un célula. Además, algunas aplicaciones web imprimen los encabezados de las tablas en la parte superior de cada página, lo que dar lugar a problemas si la celda no es en realidad un encabezado, sino que se utiliza por razones de estilo solo. En pocas palabras, el uso de etiquetas de esta manera puede causar problemas de accesibilidad a muchos usuarios, especialmente a aquellos que usan dispositivos asistidos para acceder al contenido de su sitio.
3. Deberías usar CSS para definir cómo se ven las células. La separación de estilo (CSS) y estructura (HTML) ha sido una de las mejores prácticas en el diseño web durante muchos años. Una vez más, use a porque el contenido de esa celda es un encabezado, no porque le guste la forma en que el navegador probablemente muestre ese contenido de forma predeterminada.