Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.

Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.

Print Friendly, PDF & Email
Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
Valora esta entrada
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos e informaciones en un documento web. ¡O así debería ser!

Antes de que sigas leyendo me gustaría remarcar que antiguamente las tablas tuvieron su época dorada en las que eran usadas para maquetar páginas web.

De hecho, en algunos centros formativos IFCD0110 siguen enseñando a maquetar páginas con tablas… y cada vez que lo veo me provoca una cierta angustia porqué pienso que aunque está bien ver como se hacía antiguamente no se le debería dedicar tiempo en exceso.

Maquetar con tablas es algo completamente obsoleto a día de hoy y no se debería hacer.
¡Resiste la tentación!

Antiguamente se usaban una serie de atributos para dar formato visual a las tablas. Colores, anchos, … todo esto no se debe hacer con html sino con CSS.

En la entrada de hoy voy ahorrarme de hablar de todos estos atributos que ya no tienen ningún sentido a día de hoy en las webs modernas.

Soy de la opinión que no merece la pena que los alumnos pierdan el tiempo machacando conceptos que pertenecen a otra época.

Etiquetas html básicas para tablas

Menos es más. Cuando se trata de escribir tablas hazlo teniendo en cuenta que debes ser metódico y sin complicarte. No existe una única forma de escribir tablas en html.

Las etiquetas mínimas indispensables que debes aprender son:

  1. <table> – Se usa para indicar una tabla.
  2. <tr> – Se usa para indicar una fila.
  3. <td> – Se usa para indicar una celda.

Los atributos indispensables son

  1. colspan – Es un atributo de la etiqueta <td> para indicar una afectación sobre 2 columnas. El resultado es que une en una misma fila varias celdas.
  2. rowspan – Es un atributo de la etiqueta <td> para indicar una afectación sobre 2 filas. El resultado es que une en una misma columna varias celdas.

Con estas etiquetas te basta para subsistir. Ahora bien, si quieres darle un toque de calidad sigue leyendo.

Ejemplo de tabla html
Ejemplo de tabla html

Etiquetas html semánticas para tablas

Para que los motores de búsqueda entiendan mejor el contenido dentro de una tabla disponemos de las etiquetas

  1. <thead>
  2. <tbody>
  3. <tfooter>
  4. <caption>

Estas etiquetas nos permiten agrupar el contenido de una tabla.

Ya existían en html4 pero con html5 han pasado a tener significado semántico y por tanto han pasado a ser recursos html para estructurar la información de un documento web.

Como curiosidad notaréis que es indistinto el orden en que pongáis las etiquetas.

Si queréis alguna visualización concreta recordar que esto se debe hacer siempre con CSS.

Etiquetas thead tbody tfoot caption
Etiquetas thead tbody tfoot caption

Querido lector, espero que este resumen te haya sido de utilidad. Como ves el html es fácil de entender. Simplemente necesita un poquito de práctica. Si te ha gustado esta entrada…coge el teclado y ¡a escribir! Y si te animas déjame un comentario para anirmarme a seguir creando material 😉

Entradas relacionadas:

Validadores de código HTML y CSS
- 383
Incluso los programadores y diseñadores más experimentados cometen errores de sintaxis o vocabulario picando código en lenguaje html, css, javascript y cualquier otro lenguaje de programación. Nos pas...
Como usar los encabezados h1 a h6 en html
- 189
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
Etiquetas xmp, pre y code en HTML
- 690
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Ejemplo de creación de página web con capas y migración a HTML5
- 742
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...
Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Meta etiquetas en HTML : meta tags
- 477
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Introducción al HTML
- 527
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
La importancia de la etiqueta < title > para el SEO
- 129
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
- 238
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca se sabe si algún día volverán a ser de utilidad!...
Qué es un favicon y para que sirve
- 101
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.