Cómo formatear tablas con Markdown

Con Markdown es posible crear tablas, aunque dada la simpleza de la sintaxis de Markdown, su gestión es quizás algo encorrosa. Además, tampoco es posible usar muchos de los elementos de la sintaxis de Markdown en el interior de las celdas de una tabla. Podrás poner el texto en negrita, en cursiva y poco más.

A pesar de las limitaciones, existen ciertos trucos que puedes seguir para formatear el texto de las celdas, que como no podría ser de otro modo, pasan por usar HTML. Eso sí; es imprescindible que la aplicación o herramienta que uses soporte HTML. Si nunca has usado HTML puedes consultar mi guía definitiva de HTML.

A continuación vamos a ver cómo agregar mediante HTML algunos de los elementos más comunes que se suelen agregar en las celdas.

Inserta saltos de línea

Puedes agregar saltos de línea en las celdas usando la etiqueta <br>. En el siguiente ejemplo vamos a insertar un salto de línea en una tabla:

| FIla   | Contenido |
| ------ | ----------- |
| Fila 1 | Primera línea<br> Segunda línea. |

La tabla anterior se debería renderizar así, mostrando el salto de línea donde corresponde:

Inserta Encabezados

Aunque no es demasiado habitual, también puedes insertar encabezados en el interior de una celda usando las etiquetes de encabezado <h1>, <h2>, <h3>, etc.

En el siguiente ejemplo insertamos un encabezado <h3> en una celda:

| Fila   | Contenido |
| ------ | ----------- |
| Fila 1 | <h3>Encabezado</h3> |

La tabla anterior se debería renderizar así, mostrando el encabezado:

Inserta párrafos

También puedes agregar párrafos a una celda usando la etiqueta de apertura <p> y la de cierre </p>. En el siguiente ejemplo vamos a insertar un párrafo en una celda de una tabla:

| Fila   | Contenido |
| ------ | ----------- |
| Fila 1 | <p>Primer párrafo.</p> <p>Segundo párrafo.</p> |

La tabla anterior se debería renderizar así, mostrando dos párrafos:

Inserta listas

También puedes agregar elementos como listas, para lo cual usarás las etiquetas HTML ul y li, o también ol y li, en función de si se trata de una lista numerada o no.

En el siguiente ejemplo insertamos una lista en el interior de una celda:

| Fila   | Contenido |
| ------ | ----------- |
| Fila 1 | Comprar <ul><li>Pátanos</li><li>Naranjas</li></ul> |

La tabla anterior se debería renderizar así, mostrando la lista de elementos:

Inserta enlaces

Como no podía ser de otro modo, también podrás insertar enlaces en el interior de una celda usando la etiqueta HTML a:

En el siguiente ejemplo insertamos un enlace en una celda:

| Fila   | Contenido |
| ------ | ----------- |
| Fila 1 | Visita <a href="https://edulazaro.com" alt="Mi web">mi web</a> |

La tabla anterior se debería renderizar así, mostrando el enlace:

Inserta código

También es posible insertar código en línea en el interior de una celda usando la etiqueta HTML code:

En el siguiente ejemplo insertamos código en una celda:

| Fila   | Contenido |
| ------ | ----------- |
| Fila 1 | <code>const ex = 4;</code>|

La tabla anterior se debería renderizar así, mostrando el código:

Inserta Imágenes

Esto tampoco es demasiado habitual. Podrás insertar imágenes en el interior de una celda usando la etiqueta HTML img.

En el siguiente ejemplo insertamos una imagen en una celda:

| Fila   | Contenido |
| ------ | ----------- |
| Fila 1 | <img src="https://edulazaro.com/img/zar.jpg" width="400" height="200"/>|

La tabla anterior se debería renderizar así, mostrando la imagen en la celda:

Fila	Contenido
Fila 1

Puedes insertar muchos otros elementos HTML e incluso componentes complejos.

Esto ha sido todo.