Markdown es el formato en el que escribo casi todo: README, documentación del complemento, notas de la versión, descripciones de solicitudes de extracción, registro de cambios para WP Adminify, la mitad de mis notas internas. Se aparta de cada construcción excepto una. En el momento en que se trata de una tabla, dejo de escribir y empiezo a contar caracteres de tubería, y el flujo desaparece. Agregue una columna a una tabla de cinco filas y editará seis líneas a mano, más la fila delimitadora, y no sabrá si lo hizo bien hasta que se renderice la página.
TL;Dr: los Generador de mesa de descuento le brinda una cuadrícula estilo hoja de cálculo, genera un Markdown con sabor a GitHub válido a medida que escribe e importa CSV, pasta de hoja de cálculo o una tabla de Markdown existente para que pueda reestructurarla. Establezca la alineación por columna con un clic y exporte Markdown, HTML o CSV. Todo se ejecuta en su navegador.
La herramienta existe porque la sintaxis de la tabla es la única parte de Markdown donde el formato de origen lucha activamente contra la edición. Esta guía cubre cómo funcionan las tablas GFM, las reglas que deciden si las suyas representan, las trampas de escape que rompen filas y cómo usar el generador para los flujos de trabajo de los que generalmente provienen: una hoja de cálculo, el resultado de una consulta o una tabla que alguien ya escribió.
¿qué es una tabla de Markdown?
Una tabla Markdown consta de tres ingredientes apilados en un orden fijo: una fila de encabezado, una fila delimitadora y cero o más filas de cuerpo. Las tablas no forman parte del Markdown principal en absoluto: son una extensión definida por Especificaciones de Markdown con sabor a GitHub, razón por la cual una tabla puede renderizarse en GitHub y aparecer como canalizaciones literales en otros lugares. Las celdas están separadas por caracteres de canalización y cada fila ocupa exactamente una línea.
| Tool | Category | Offline |
| --- | --- | --- |
| JSON Formatter | Coding | Yes |
| YAML to JSON | Data | Yes |
La fila delimitadora es la parte que la convierte en una tabla en lugar de un párrafo que contiene tuberías. Debe ser la segunda línea, debe constar de guiones con dos puntos opcionales y debe tener el mismo número de celdas que el encabezado. Si se equivoca, el renderizador trata todo el bloque como texto ordinario, razón por la cual " mi tabla representa como texto sin formato" Casi siempre es un problema de fila delimitadora.
Las tablas no forman parte de la especificación CommonMark original. Llegaron como una extensión de Markdown con sabor a GitHub y posteriormente se adoptaron en casi todas partes: GitHub, GitLab, Bitbucket, Obsidian, Notion, Docusaurus, MkDocs, VitePress, Hugo, Jekyll, Discord y la mayoría de los generadores de sitios estáticos. "Casi" es la palabra operativa. Un renderizador mínimo de CommonMark sin extensiones mostrará su tabla como tuberías literales y la solución es emitir HTML, lo que el generador puede hacer con un clic en las pestañas de salida.
Por qué la sintaxis es más difícil de mantener de lo que parece
Leer una tabla de Markdown es fácil. Mantener uno es donde se esconde el costo y proviene de cuatro lugares.
La estructura vive en puntuación. No hay límite de celda excepto un carácter que también aparece en expresiones regulares, comandos de shell y tipos de unión TypeScript. Se debe escapar de cada uno de los que están dentro de una celda o la fila gana silenciosamente una columna.
La alineación está codificada en la ubicación de los dos puntos. Un dos puntos a la izquierda significa alineado a la izquierda, un dos puntos a ambos lados significa centrado, un dos puntos a la derecha significa alineado a la derecha. No hay ninguna palabra clave para recordarlo y la diferencia entre ---: y :--- es un personaje consecutivo que nadie lee atentamente.
La edición es multilínea. Agregar una columna significa tocar cada fila más el delimitador. Reordenar filas significa cortar y pegar sin retroalimentación visual. Eliminar una columna es una búsqueda del enésimo tubo en cada línea.
La alineación de la fuente es manual. No se requieren columnas acolchadas (los renderizadores ignoran espacios adicionales), pero es imposible leer tablas sin acolchar en una diferencia, por lo que las personas las rellenan a mano y luego las vuelven a rellenar cada vez que crece el contenido de una celda 's.
Un editor de cuadrícula elimina los cuatro. Editas celdas; se genera la sintaxis. Esa es la premisa completa de la herramienta.
Cómo utilizar el generador de tablas de Markdown
Paso 1: obtenga sus datos en la cuadrícula
Tres rutas de entrada, dependiendo de dónde ya vivan los datos.
Escríbelo. La cuadrícula se abre con una muestra llena. Sobrescriba las celdas o presione Borrar para obtener un tres por tres vacío y comience de nuevo.
Pegar de una hoja de cálculo. Abra el panel Importar y pegue una gama copiada de Excel, Google Sheets, Numbers o LibreOffice. Las hojas de cálculo colocan texto con pestañas separadas en el portapapeles y el importador lo detecta automáticamente; no es necesario decirle qué delimitador está utilizando.
Pegue CSV o una mesa existente. El mismo panel acepta CSV, exportaciones separadas en punto y coma (el valor predeterminado en muchos lugares europeos), texto delimitado por tuberías y tablas de Markdown. Si el texto parece una tabla de Markdown (una línea de encabezado seguida de una fila delimitadora), se analiza como una sola, incluidas las alineaciones de sus columnas, para que pueda cargar una tabla desde un README, reestructurarla y pegarla nuevamente.
La importación de CSV sigue las reglas RFC 4180 en lugar de dividirse ingenuamente en comas. Un campo citado puede contener comas, saltos de línea y comillas duplicadas que representan un carácter de comilla literal. Eso importa más de lo que parece: cualquier exportación que contenga una dirección, una descripción o un precio en una configuración regional que utilice comas romperá una división ingenua y no lo notará hasta que le falte una columna. Si su CSV es lo suficientemente grande como para que desee inspeccionarlo antes de importarlo, el Visor de CSV primero lo abre en una cuadrícula ordenable.
Paso 2: Dale forma a la mesa
Los controles alrededor de la cuadrícula cubren las operaciones que son dolorosas en Markdown crudo:
- Fila y Columna agregar al final de la cuadrícula.
- Las flechas al lado de cada fila la mueven hacia arriba o hacia abajo, lo que resulta útil para solicitar una tabla comparativa según lo que más te importe.
- El botón menos en el encabezado de una fila o columna lo elimina en cada fila a la vez.
- Transponer intercambia filas y columnas. Los datos pegados de un informe suelen estar orientados de forma incorrecta para un documento y la transposición es con un clic en lugar de un nuevo tipo completo.
Paso 3: establezca la alineación por columna
El encabezado de cada columna lleva tres botones de alineación: izquierda, centro, derecha. Haga clic en uno para aplicarlo, haga clic en él nuevamente para regresar al renderizador 's predeterminado. El generador escribe los dos puntos correspondientes en la fila delimitadora.
Vale la pena usar la alineación deliberadamente. Columnas numéricas (precios, recuentos, porcentajes, duraciones) leídas mucho mejor alineadas a la derecha, porque los dígitos se alinean por valor posicional. Los valores de estado cortos parecen ordenados centrados. El texto pertenece a la izquierda. Esto no es decoración; una columna de números alineada a la derecha es realmente más rápida de escanear en busca del valor más grande.
Paso 4: elija el formato de salida y cópielo
Trei tabele de urmărire:
Marcación produce GFM. El Columnas acolchadas alternar controla si las celdas están rellenas de espacios para que la fuente sin formato se alinee en un editor monoespaciado. El relleno no cambia nada sobre cómo se representa la tabla; es puramente para quien lee el archivo en una diferencia. Tuberías exteriores controla el tubo delantero y trasero en cada fila; Ambos estilos son válidos y el estilo del tubo delantero es, con diferencia, la convención más común.
HTML produce a <table> en compañía de <thead> y <tbody> y en línea text-align estilos que coinciden con las alineaciones de sus columnas. Úselo para renderizadores que carecen de soporte para tablas, para plantillas de correo electrónico o cuando lo necesite colspan y celdas multilínea que Markdown no puede expresar. Si quieres ir en la otra dirección y levantar una mesa de una página web, HTML para rebajar lo maneja.
CSV le devuelve la cuadrícula como datos, citados correctamente, para pegarlos en una hoja de cálculo o alimentarlos a un script.
Copie al portapapeles o descárguelo como .md, .html, o .csv archivo
Las reglas de escape que realmente rompen las mesas
Dos caracteres causan casi todas las tablas de Markdown rotas y el generador maneja ambos automáticamente, pero debes conocer las reglas de las tablas que editas a mano.
La pipa. Un tubo literal dentro de una celda debe escribirse como \|. Sin la barra invertida, el renderizador ve un separador de columnas y su fila gana una celda, eliminando cada columna después de ella. Esto muerde con más fuerza la documentación técnica, donde las celdas contienen legítimamente cosas como string | null, grep foo | wc -l, o una alternancia de expresiones regulares. El escape funciona incluso dentro de los tramos de código de retroceso, un caso poco común en el que Markdown's habitual "los tramos de código son literales" La regla no se aplica.
La nueva línea. Las tablas GFM son estrictamente una fila por línea, por lo que una celda no puede contener una ruptura de línea real. La solución universal es un HTML <br> etiqueta. Cuando pegas contenido multilínea en la cuadrícula, el generador inserta la etiqueta por ti; cuando importa una tabla que contiene <br>, vuelve a convertirse en una ruptura de línea real en el editor para que la celda sea cómoda de editar.
Vale la pena memorizar dos reglas más porque causan " mi tabla no renderiza" informes que no tienen nada que ver con la tabla en sí. Primero, una tabla necesita una línea en blanco antes cuando sigue un párrafo. En segundo lugar, dentro de un elemento de la lista, toda la tabla debe tener una sangría en la columna de contenido del elemento de la lista & #39;; de lo contrario, la lista se traga la primera línea y la fila delimitadora cae en el lugar equivocado.
De dónde provienen las tablas y cómo fluye cada caso
Una hoja de cálculo que te enviaron
Copie el rango, péguelo en el panel Importar, cárguelo en la cuadrícula, elimine las columnas que nadie necesita, alinee a la derecha la numérica, copie el Markdown. Menos de un minuto para una tabla que tardaría diez en formatearse a mano.
Un resultado de consulta o una respuesta API
Los datos que comienzan como JSON generalmente necesitan un salto. Conviértelo con JSON a CSV, luego pegue el CSV en el importador. Yendo en sentido contrario (una tabla de Markdown que necesita como datos), exporte CSV desde las pestañas de salida y ejecútelo CSV a JSON.
Una tabla que ya existe en un README
Péguelo en el panel Importar. Vuelve a la cuadrícula con sus alineaciones intactas, por lo que agregar una columna o reordenar filas es una edición normal en lugar de una reescritura. Este es el flujo de trabajo que más uso: las tablas de documentación crecen una fila a la vez durante meses y luego necesitan una reestructuración de una sola vez.
Una tabla comparativa que estás escribiendo desde cero
Comience con la cuadrícula, escriba como crea y deje que el relleno se ordene solo. Escribir una comparación en una cuadrícula en lugar de en la sintaxis de la tubería mantiene su atención sobre si la comparación es justa y no sobre si las columnas se alinean.
Documentación que tiene que funcionar en varios renderizadores
Genere Markdown para las plataformas que admiten tablas GFM, luego cambie la pestaña de salida a HTML para la que no lo hace. Misma cuadrícula, dos exportaciones, sin reescritura. Si su canalización convierte Markdown a HTML de todos modos, Rebaja a HTML le muestra exactamente lo que produce la conversión.
Tablas de rebajas versus tablas HTML
| ponderación | Tabla de rebajas | Tabla HTML |
|---|---|---|
| Legibilidad de la fuente | Alto: escaneable como texto sin formato | Bajo: las etiquetas dominan el contenido |
| Celdas multilínea | Sólo vía <br> |
Nativo, cualquier contenido en bloque |
| Células fusionadas | No compatible | colspan y rowspan |
| Alineación por columna | Sí, vía delimitador colons | Sí, vía CSS o atributos |
| Control de estilo | nadie | Css completo |
| Soporte del renderizador | Extensión del GFM, generalizada pero no universal | Universal dondequiera que se permita HTML |
| Diferencia | Bien, una línea por fila | Pobres, muchas líneas por fila |
La regla práctica: use Markdown hasta que necesite una celda fusionada, un elemento de bloque dentro de una celda o un estilo específico. Luego cambie esa tabla a HTML y deje el resto del documento en paz. La mayoría de los renderizadores de Markdown pasan HTML sin formato, por lo que es normal mezclar los dos en un archivo.
Una nota sobre privacidad
Las tablas que la gente construye son a menudo las que preferirían no cargar: precios aún no anunciados, plantilla, puntos de referencia internos, datos de un cliente 's pegados de una hoja de cálculo.
El generador es JavaScript del lado del cliente. La cuadrícula, el analizador de importaciones y cada ejecución de exportación en la página, y nada de lo que pegas sale de tu máquina. Cárguelo una vez y seguirá funcionando sin conexión. Ese es el mismo principio detrás de todo en Toolz.dev, y vale la pena leer el razonamiento completo en la guía Privacidad de datos en herramientas en línea. Si está creando un conjunto más amplio de utilidades basadas en navegador para el trabajo diario, el Guía de herramientas de codificación y el Kit de herramientas para desarrolladores web cubra lo que más le permita ganar un marcador.
Consejos prácticos
Mantenga el encabezado corto. Con el relleno activado, la celda más ancha de una columna establece el ancho de cada fila en la fuente. Un encabezado detallado hace que el archivo sin formato sea ruidoso sin ningún beneficio de renderizado.
No tema la salida sin rellenar para los archivos generados. Si una tabla está escrita por un script y nunca se lee como fuente, desactive el relleno y guarde los bytes.
Ordene antes de pegar. Reordenar filas con un clic de flecha a la vez está bien para cinco filas y es tedioso para cincuenta. Ordene primero la hoja de cálculo y luego importe.
Esté atento a la fila de encabezado vacía. Con "La primera fila es encabezado" apagado, el generador emite un encabezado vacío encima de sus datos, porque GFM no tiene forma de expresar una tabla sin encabezado. Algunos renderizadores lo muestran como una delgada fila en blanco. Si le molesta, exporte HTML, que no necesita ningún encabezado.
Verifique el resultado renderizado, no la fuente. La fuente acolchada que parece perfecta aún puede generar errores si la fila delimitadora tiene el número incorrecto de celdas. Pegue en la vista previa de cualquier plataforma en la que esté publicando antes de llamarla terminada.
preguntasrán el
¿Cómo creo una tabla en Markdown?
Una tabla de Markdown necesita una fila de encabezado, una fila delimitadora de guiones y una fila por registro, con celdas separadas por caracteres de tubería. Complete la cuadrícula en el generador y la herramienta escribe esa sintaxis para usted, incluida la fila delimitadora y cualquier columna de alineación.
¿Cómo alineo las columnas en una tabla de reducción?
La alineación se establece con dos puntos en la fila delimitadora: un dos puntos a la izquierda se alinea hacia la izquierda, dos puntos a ambos lados hacia el centro y un dos puntos a la derecha se alinea hacia la derecha. Elija una alineación de un encabezado de columna en el editor y la ubicación correcta de los dos puntos se generará automáticamente.
¿Puedo convertir un rango de Hojas de cálculo de Excel o Google en una tabla de rebajas?
Sí. Copie las celdas de su hoja de cálculo y péguelas en el panel de importación. Las hojas de cálculo colocan texto separado por pestañas en el portapapeles, que el importador detecta automáticamente y se carga en la cuadrícula.
¿Cómo pongo un carácter de tubería dentro de una celda de tabla?
Se debe escapar de una tubería literal con una barra invertida o el renderizador la leerá como un separador de columnas. Escriba la tubería normalmente en el editor y el generador se le escapará en la salida.
¿Puede una celda de tabla de rebajas contener varias líneas?
No con nuevas líneas reales, porque las tablas GFM tienen estrictamente una fila por línea. La solución habitual es una etiqueta de salto de línea HTML dentro de la celda, que esta herramienta inserta automáticamente cuando una celda que pegas contiene un salto de línea.
¿Por qué mi tabla se renderiza como texto sin formato en github?
La fila delimitadora es casi siempre la causa: debe ser la segunda línea y debe tener el mismo número de celdas que el encabezado. Una línea en blanco que falta antes de la tabla también puede detener su representación cuando la tabla sigue un párrafo o se encuentra dentro de una lista.
¿Tengo que rellenar las columnas para que la fuente se alinee?
No. Los renderizadores ignoran espacios adicionales, por lo que una tabla sin relleno se muestra de manera idéntica. El relleno existe para humanos que leen el archivo sin formato en un editor o en una diferencia. Apáguelo con el interruptor de salida acolchado si prefiere una fuente compacta.
¿Se admiten las tablas de Markdown en todas partes?
Las tablas son una extensión de marcado con sabor a GitHub en lugar de parte de la especificación CommonMark original. GitHub, GitLab, Obsidian, Notion, Docusaurus y la mayoría de los generadores de sitios estáticos los admiten, pero algunos renderizadores mínimos no. Cambie la salida a HTML si la suya es una de ellas.
