Para quienes no estéis familiarizados con el concepto, HTML (HyperText Markup Language) es un lenguaje de programación empleado en el desarrollo de páginas web. En concreto, es utilizado para estructurar las páginas en cuanto a su contenido. Esto es muy importante desde el punto de vista funcional, pero también desde otros puntos de vista adicionales como la indexación por parte de los algoritmos de los buscadores y el consecuente posicionamiento en los mismos. Y, para ello, las tablas HTML resultan fundamentales.

¿Pero qué son estas tablas en HTML? En resumidas cuentas, las tablas HTML son tablas que nos permiten darle una organización a los datos de nuestra página web como son los textos, las imágenes, los enlaces e incluso otras tablas. ¿Cómo? A través de celdas dispuestas en filas y columnas. Gracias a estas tablas, definidas con la etiqueta de <table>, podemos jerarquizar la información. A continuación, veremos cómo generar una tabla HTML online de una manera sencilla. Saber sacarle partido puede marcar una gran diferencia.

 

Generar tablas HTML online

Para crear tablas con HTML tenemos que tener en cuenta los tres elementos básicos: el contenedor principal (<table>), la representación de las filas contenedoras de las celdas (<tr>) y la representación de las celdas (<td>). Con dichos elementos podremos generar tablas fácilmente. Por ejemplo, imaginemos que queremos generar una tabla con dos filas y dos columnas. En ese caso, tendríamos que escribir el siguiente código para que apareciese dicha tabla que nos permitiese contemplar la estructura que queremos que sea contemplada:

<table>

<tr>

<td>Fila 1, Columna 1</td>

<td> Fila 1, Columna 2</td>

</tr>

<tr>

<td>Fila 2, Columna 1</td>

<td>Fila 2, Columna 2</td>

</tr>

</table>

Eso sí, la tabla que hemos generado es una tabla sin bordes. Para contar con bordes que nos permitan visualizar de manera más clara nuestra tabla deberemos insertar un atributo específico en la etiqueta <table>: el atributo border. Veamos un ejemplo donde el borde de nuestra tabla medirá un píxel: <table border=»1″>. Esos bordes para tablas html son mucho más importantes de lo que pueda parecer. Sin ellos, la estructura visual de la tabla quedaría muy perjudicada. Y, como puedes ver, es muy sencillo de incorporar.

Hay otros dos atributos que también conviene manejar correctamente. Uno es el atributo colspan, que permite combinar dos o más columnas en una, y otro es el atributo rowspan, que nos permite combinar dos o más filas en una. Veamos un sencillo ejemplo de tabla html con rowspan y colspan:

<table border=»1″>

<tr>

<th>Columna 1</th>

<th>Columna 2</th>

<th>Columna 3</th>

</tr>

<tr><td rowspan=»2″>Fila 1 Celda 1</td><td>Fila 1 Celda 2</td><td>Fila 1 Celda 3</td></tr>

<tr><td>Fila 2 Celda 2</td><td>Fila 2 Celda 3</td></tr>

<tr><td colspan=»3″>Fila 3 Celda 1</td></tr>

</table>

 

Tablas HTML con imágenes

Como decíamos antes, las tablas HTML nos permiten estructura toda la información de una página web concreta. Y eso abarca tanto informaciones textuales como informaciones visuales. ¿Necesitas generar una tabla en HTML que incorpore imágenes? Pues es posible. Lo único que tienes que hacer es incorporar la etiqueta <img> junto con el nombre del archivo entre comillas. Además, hay otros atributos como width, height o border que nos dan la posibilidad de controlar el ancho de la imagen, la altura de la imagen y la existencia o no de bordes.

Como puedes ver, en cierto sentido manejar el lenguaje HTML puede resultar fácil. Especialmente cuando sigues las indicaciones. No obstante, la tarea se puede volver progresivamente más complicada. Tanto si estás tratando de aprender como si estás intentando desarrollar algo, contar con profesionales de la programación es más que recomendable. Una cosa es saber crear tablas con HTML y otra muy distinta saber crearlas bien a un nivel más complejo y sofisticado. ¡Mucho ánimo!