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

4.1
(12)

Publicado

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.

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.

Ejercicios recomendados


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 animarme a seguir creando material 😉

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 4.1 / 5. Votos: 12

Todavía no hay votos. Sé el primero en valorar la entrada.

2 respuestas a «Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.»

  1. Avatar de jose mauricio perez

    Buenas tardes, yo tengo un formulario que lleno y guardo en una base de datos, luego lo consulto y lo convierto en PDF (Mpdf) pero cuando esos datos llegan a la tabla del pdf llegan sin formato (todo el texto junto sin enter, ni viñetas ni nada) como hago para que ese pdf sea agradable a la vista del usuario.

    lo que quiero es que cuando la consulta se cargue en la tabla que genera el PDF salga el texto organizado
    gracias

    1. Avatar de Francesc Ricart

      buenos días,
      la cuestión no tiene relación con el contenido del escrito.
      aún así ten en cuenta que estás copiando todo el documento pero no el css. mira de copiarlo como una imagen.
      saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *