Guía · Markdown → HTML
De tablas de Markdown a tablas HTML
La tabla de barras es la parte de Markdown que más gente ha visto fallar. Se ve bien en GitHub y en otro sitio sale como un párrafo lleno de barras.
Esto repasa la sintaxis que sobrevive a la conversión, cómo queda el HTML del otro lado, y los tres errores que devuelven una tabla a ser texto.
Qué necesita una tabla para ser una tabla
Las tablas de barras no son parte de CommonMark. Vienen de GitHub Flavoured Markdown, lo que significa que el conversor tiene que decidir soportarlas — y algunos no lo hacen. Este sí.
Hacen falta tres cosas. Una fila de encabezado. Una fila de guiones debajo. Y al menos una fila de contenido. Si falta cualquiera de las tres, te salen párrafos.
- 01Escribe la fila de encabezado con una barra entre celdas. Las barras de los extremos son opcionales, pero hacen mucho más fácil ver una tabla desalineada.
- 02Escribe la fila de guiones justo debajo, sin ninguna línea vacía en medio. Tres guiones por columna es el mínimo seguro.
- 03Escribe las filas de contenido. No hace falta que cuadren en el código: las celdas se separan por las barras, no por las columnas.
| Part | Qty |
| ---- | --- |
| Bolt | 12 |
| Nut | 12 |<table>
<thead>
<tr>
<th scope="col">Part</th>
<th scope="col">Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bolt</td>
<td>12</td>
</tr>
</tbody>
</table>El atributo scope, y por qué está ahí
Las celdas de encabezado salen como <th scope="col">, no como <td> en negrita. Ese atributo es la única razón por la que un lector de pantalla puede anunciar «Qty, 12» en lugar de leer un número suelto sin saber a qué columna pertenece.
No cuesta nada y es la diferencia entre una tabla y una cuadrícula de números. Un diseño falseado con divs no puede expresarlo, y ese es el argumento más fuerte para no construir uno nunca.
Alineación: la fila de los dos puntos
Los dos puntos en la fila de guiones fijan la alineación por columna. A la izquierda alinea a la izquierda, en ambos lados centra, a la derecha alinea a la derecha — que es lo que quieres para números.
En el HTML obtienes una clase, no un estilo en línea: align-left, align-center o align-right. Los estilos en línea se eliminan de todas las salidas de este sitio, porque un atributo style es la puerta por la que entra la inyección de CSS.
Eso significa que la salida de página completa ya trae la alineación funcionando: la hoja de estilos del <head> define esas tres clases. La salida en fragmento las deja para tu propio CSS, que es justo el sentido del fragmento: tres reglas de una línea y encaja con tu sitio en vez de pelearse con él.
| Item | Cost |
| :--- | ---: |
| Bolt | 0.40 |<th scope="col" class="align-left">Item</th>
<th scope="col" class="align-right">Cost</th>
...
<td class="align-left">Bolt</td>
<td class="align-right">0.40</td>Cuando la tabla sale como un párrafo
Tres causas, en el orden en que aparecen.
- 01Una línea vacía entre el encabezado y la fila de guiones. Eso lo parte en dos párrafos antes de que el analizador de tablas llegue a verlo.
- 02Una barra dentro del texto de una celda. Escápala como \| o la celda se parte en dos y la fila acaba con más celdas que el encabezado.
- 03Guiones de menos. Un solo guión por columna funciona en algunos analizadores y en otros no; tres es la versión en la que todos están de acuerdo.
Celdas con algo más que texto
El Markdown en línea funciona dentro de las celdas: negrita, cursiva, código en línea, enlaces. El contenido de bloque no — ni listas, ni párrafos, ni bloques de código cercados. Es un límite de la propia sintaxis de tablas, no de este conversor.
Un salto de línea dentro de una celda necesita un <br> literal, escrito a mano. Aquí el HTML crudo dentro de Markdown se pasa tal cual en lugar de escaparse, así que funciona, y se sanea a la salida como todo lo demás.
Eso es todo lo que en una tabla de barras se comporta distinto una vez es HTML. El conversor acepta Markdown pegado o un archivo .md soltado encima, y nada sale de tu navegador.
MD → HTML