Añadir una tabla a tu publicación usando markdown

:bookmark: Esta guía explica cómo agregar tablas a tus publicaciones de Discourse usando Markdown.

:person_raising_hand: Nivel de usuario requerido: Todos los usuarios

Agregar tablas a tus publicaciones puede ayudar a presentar datos en un formato estructurado y fácil de leer. Esta guía te mostrará cómo crear tablas en Markdown en Discourse, cubriendo los conceptos básicos de las tablas, la alineación y características especiales como agregar emojis e imágenes.

Uso del Creador de Tablas

Discourse incluye un Creador de Tablas incorporado que te permite crear y editar tablas usando una interfaz similar a una hoja de cálculo; no se requieren conocimientos de Markdown.

Para insertar una nueva tabla:

  1. Abre el compositor
  2. Haz clic en el botón :heavy_plus_sign: en la barra de herramientas (el menú de opciones)
  3. Selecciona Insertar tabla
  4. Usa el editor de hoja de cálculo para agregar tus encabezados y datos
  5. Haz clic en Construir Tabla para insertar la tabla Markdown generada en tu publicación

Para editar una tabla existente en una publicación, haz clic en el botón :pencil2: Editar Tabla que aparece encima de la tabla (visible para los usuarios con permisos de edición). Esto abre el mismo editor de hoja de cálculo precargado con los datos de la tabla.

Creación de una tabla simple

Crear una tabla en Discourse usando Markdown es sencillo. Aquí tienes una guía paso a paso:

  1. Comienza definiendo el encabezado:
  • La primera fila de tu tabla contendrá los encabezados para cada columna.
  • La segunda fila separa los encabezados del resto de la tabla.

Aquí tienes un ejemplo para una tabla con tres columnas:

| Col A | Col B | Col C |
|---|---|---|

Esto da como resultado:

Col A Col B Col C
  1. Agrega filas de datos:
  • Cada fila comienza y termina con el carácter |.
  • Asegúrate de que el número de columnas coincida con el del encabezado.

Ejemplo:

| Col A | Col B | Col C |
|---|---|---|
| A1 | B1 | C1 |
| A2 | B2 | :smile: |

Esto da como resultado:

Col A Col B Col C
A1 B1 C1
A2 B2 :smile:

Alineación

Puedes controlar la alineación del contenido de las columnas con dos puntos (:):

  • Alineado a la izquierda: |:---|
  • Centrado: |:---:|
  • Alineado a la derecha: |---:|

Ejemplo:

| Izquierda | Centro | Derecha |
|:---|:---:|---:|
| Mi contenido está a la izquierda | Soy el centro del mundo | Me gusta estar a la derecha |
| :waxing_gibbous_moon: | :full_moon: | :waning_gibbous_moon: |

Esto da como resultado:

Izquierda Centro Derecha
Mi contenido está a la izquierda Soy el centro del mundo Me gusta estar a la derecha
:waxing_gibbous_moon: :full_moon: :waning_gibbous_moon:

Enlaces clicables en tablas

Agregar enlaces clicables dentro de tablas puede ser útil para dirigir a los usuarios a recursos específicos o contenido externo.

Para incluir un enlace clicable, utiliza la sintaxis estándar de enlaces de Markdown dentro de una celda de tabla. El formato es [Texto del enlace](URL).

Ejemplo:

| Columna A | Columna B | Columna C |
|---|---|---|
| [Google](https://www.google.com) | Texto de ejemplo | Otro enlace |

Esto da como resultado:

Columna A Columna B Columna C
Google Texto de ejemplo Otro enlace

Imágenes en tablas

Para usar imágenes en tablas, deberás usar el carácter de escape \\ antes de la barra vertical | en el código de la imagen después de haberla subido.

Ejemplo:

Imagen | Descripción
---|---
![Un Chihuahua disfrutando de un espresso \|411x500, 30%](upload://yHjzeeWrEA1oWYMT9ATBOPudbKk.jpeg) | Un Chihuahua disfrutando de un espresso en un café.

Esto da como resultado:

Image Description
A Chihuahua enjoying espresso in a cafe.

Imágenes Clicables en Tablas

Para hacer una imagen clicable, puedes anidar la sintaxis Markdown de la imagen dentro de la sintaxis Markdown del enlace. Aquí está el formato básico:

[![texto alternativo](URL de la imagen)](URL del enlace)

El texto alternativo es importante para la accesibilidad, ya que describe la imagen si no se carga o si es utilizada por lectores de pantalla. Siempre usa texto alternativo significativo.

Aquí te mostramos cómo puedes incorporar imágenes clicables en una tabla Markdown:

| Imagen 1 | 
|---|
| [![Logo de Discourse](upload://38VzhGhUKzAURX4FN7LfBEpX6r1.png)](https://meta.discourse.org/)

Esto da como resultado:

Image 1
Discourse Logo

Copiar y pegar tablas

Puedes copiar tablas desde documentos externos o hojas de cálculo y pegarlas directamente en las publicaciones, Discourse las convertirá automáticamente a Markdown.

Si creas tablas con frecuencia, también puedes usar herramientas como TableConvert para convertir tablas de otros formatos (CSV, JSON, etc.) a Markdown.

77 Me gusta

Great guide!

Also, if you have a Spreadsheet or a CSV file, and don’t want to convert it manually, I always use this online tool: Markdown Tables generator - TablesGenerator.com

37 Me gusta

Is there any way to add the vertical borders between columns, without using CSS?

2 Me gusta

Sadly no. You’d have to add it on the css customize section

Something like that should do it :

.cooked table td, .cooked table th, .d-editor-preview table td, .d-editor-preview table th {
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}
7 Me gusta

Thanks. I don’t have admin rights, so unfortunately I can’t modify CSS.

I was hoping an ASCII character like a plus sign would add a vertical border in the table. eg:

+---+---+ 

Sounds like that’s not available.

1 me gusta

How to add a custom class attribute to the table?

1 me gusta

How can we make a table of clickable thumbnails ?
I don’t want to use a “hyperlink thumbnail” which would lead you to a new page but rather use Discord’s slideshow tool.
I know we can make thumbnails by using ![title|230x180](image-url) but apparently the vertical bar | inside the brackets breaks the table.
Is there a way around this problem ?

2 Me gusta

You can use html to make a clickable thumbnail, it will be less perfect, but it’ll work

<a href=""><img src="" width="" height=""></a>

Edit: uh wait, I just have a little doubt, I’m not sure html is supported in tables

2 Me gusta

As I said, I don’t want hyperlink images that open a new page.

I want clickable thumbnails that open directly in Discourse and let you slide through the gallery without leaving the website. Just like this :





but inside a table.

1 me gusta

Here’s a table with clickable thumbnails in it

Your picture My picture

jeezus

Here’s how I did it

<table>
<tr><th>Your picture</th><th>My picture</th></tr>
<tr>
<td>

![Bayon%20temple|271x180](upload://icDRdwwiwP7yGzIQNRNG9R8pLTN.jpg)

</td><td>

![jeezus|225x225](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/d/0/d0cea6798be0f38d39a73056bc45a57ec8a55fba.jpg)

</td>
</tr>
</table>
8 Me gusta

Thanks, I actually found the same solution in the mean time but that’s perfect !
Would’ve been more handy in Mardown entirely but this is great already.

Boom baby !

4 Me gusta

You can do it in pure markdown by escaping the pipe in the images, as we discussed here: Pictures don't upload well into tables because of the straight bar symbol

11 Me gusta

Perfect ! Thank you :rofl:

1 me gusta

Is there a way to make it responsive? I mean the width of the table to adjust based on the screen size?

Thanks

2 Me gusta

It’s already responsive-ish, but it can be optimized

.md-table {
    width: 100%;
}

.md-table table {
    width: 100%;
}

This would be the base to something like this, the table will use all the width of the post on bigger screens. And when you reduce the size of the window, it will adapt.

But it won’t be perfect. If you have only two small columns the table will seem empty, if you have a lot of columns, it will not fit on smaller screens. But it’s a start

6 Me gusta

Lo más difícil para mí en la sintaxis de Markdown es crear tablas. No necesito tablas muy complicadas: solo simples. Pero incluso para tablas simples, la sintaxis de las tablas es… terrible…

Y aquí aparece TableConvert, una herramienta en línea que no solo genera tablas en Markdown, sino que también las edita. Es muy fácil convertir tablas de JSON, CSV, Excel, LaTeX y HTML a tablas en Markdown.

3 Me gusta

No es para tanto:

hello there
minimal table
|hello|there|
|-|-|
|minimal|table|

Pero compartir herramientas también es siempre bueno. :hammer_and_wrench:

5 Me gusta

Siempre olvido la sintaxis porque creo tablas quizás una vez cada tres meses :man_facepalming:

5 Me gusta

¡Solo recuerda la tecla pipe y ya estás al 90% del camino!

6 Me gusta

Sería genial tener un comportamiento similar al de las tablas responsivas de Bootstrap.
Si una tabla es más grande que tu pantalla, se vuelve horizontalmente desplazable. No podría ser más sencillo y funciona muy bien.

2 Me gusta