logo carlos astudillo

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!

¿Quieres aprender a crear un negocio online sin renunciar a tu empleo invirtiendo desde 60 minutos al día?


Envio correos cada semana para que lo consigas, aplicando ideas concretas con las que descrubrirás cosas como:

✅ Las bases para que tu negocio online se haga realidad sin descuidar a tu familia ni tu empleo.

✅ La mejor forma para organizar tu tiempo, para que empieces a dar forma a tu proyecto..

✅ Ideas para generar ingresos, que te permitan aumentar tu sueldo aunque tu jefe no quiera hacerlo.

✅ Estrategias para conseguir tus primeros clientes que paguen lo que realmente vale tu trabajo.


Mis correos incluyen historias curiosas y experiencias que llevan alguna lección practica en medio y por supuesto tambien mis productos y servicios (que de algo hay que vivir). Envio varios correos por semana, unas menos y otras más. No regalo nada por suscribirse, pero cada email es un regalo que puede ser la chispa que te faltaba para encender la llama. Te unes cuando quieres y te das de baja de la misma forma, y tan amigos. Si te suscribes recibirás un correo para que confirmes que realmente quieres apuntarte. Nunca esta demás mirar en la carpeta de spam que a veces puedo caer ahí.


Responsable: Carlos Astudillo; Finalidad: Para comunicarme contigo y hacerte llegar información de nuevos contenidos y productos que voy publicando; Legitimación: Tu consentimiento informado; Destinatario: Siteground, donde alojo este sitio web. Lo guardaré ademas en la base de datos de mi cuenta Mailerlite; Derechos: Acceso, rectificación, limitación y eliminación de tus datos si me lo pides; Plazo de conservación de los datos: Hasta que me pidas la eliminación de los datos entregados por ti en este formulario.