3 etiquetas y algo más para crear tablas en HTML

Crear tablas en HTML es un elemento básico para mostrar datos y antes de la existencia de los div o frameworks como Bootstrap eran la mejor forma para maquetar la estructura de una página web. Hoy te cuento las 3 etiquetas HTML que necesitas para crear tablas.

<Table>, la madre para crear tablas

Ya hicimos antes una introducción a HTML y explicamos el uso de etiquetas. Por la misma razón para crear tablas necesitarás hacer uso de algunas de ellas. La principal etiqueta para crear una tabla es <table>,  que le indica al navegador que lee nuestra página web que lo próximo que se escribirá es una tabla.

Un buen ejemplo de uso de las tablas es un indice, como el que vimos en el artículo sobre como crear un indice para los artículos de tu blog. Si quisiéramos hacerlo deberíamos comenzar escribiendo la etiqueta <table> no olvidando cerrarla inmediatamente para evitar que afecte los resultados.

<table>
….
</table>

<Tr>, Filas para tablas

Ahora que ya hemos empezado a crear tablas, debemos entender la estructura que estas tienen. Una tabla es como una rejilla en la que se intersectan filas(horizontales) y columnas(verticales), lo que permite ubicar el contenido entre las coordenadas correctas.

La etiqueta <tr>, permite abrir una nueva fila al momento de crear tablas. Siguiendo con el ejemplo de el indice, podríamos abrir unas 5 filas, de tal forma que podamos ubicar en ella el titulo de las secciónes de nuestro articulo.

<table>
<tr>…</tr>
<tr>…</tr>
<tr>…</tr>
<tr>…</tr>
<tr>…</tr>
</table>

<td>,Las tablas necesitan celdas

Hasta aqui todo se ve bien, pero con lo que hemos hecho no es suficiente. Ya dijimos que había una intersección entre filas y columnas, entonces con <td> vamos a crear las que nos hagan falta.

En el caso del indice, nuestra tabla será de una sola columna, cruzada por 5 filas. La idea es que en cada una de las columnas, podamos incluir el titulo de la sección de nuestro articulo, si estuviéramos construyendo el indice de este articulo, podríamos incluir un titulo para el mismo, lo que quedaría algo asi:

<table>
<tr><td>CONTENIDO DEL ARTICULO</td></tr>
<tr><td>La etiqueta table</td></tr>
<tr><td>La etiqueta tr</td></tr>
<tr><td>La etiqueta td</td></tr>
<tr><td>Un par de datos extra</td></tr>
</table>

Un par de datos extra para crear tablas

Hay mucho más que decir al respecto de crear tablas, algunos datos más puristas como el uso de las etiquetas  <thead> o <tbody>, el trabajo con propiedades como border o width o la utilización de rowspan o colspan.

Todos estos y otros detalles los profundizo en una de las clases prácticas de mi curso de HTML, que además incluye mi soporte por correo electrónico, ante cualquier duda que pueda quedarte al trabajar para crear tablas en HTML.

¡Nos leemos!