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

The most difficult thing for me to do in Markdown syntax is creating tables. I do not need very complicated tables: just simple ones. But even for simple tables, the syntax for tables is … terrible…

And here comes an online TableConvert which is not only a markdown table generator but also a markdown table editor. It’s an easy thing to convert json, csv, excel, latex table and html table into markdown tables.

3 Me gusta

It’s not all that bad:

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

But sharing tools is always good too. :hammer_and_wrench:

5 Me gusta

I always forget the syntax because I create tables maybe once every 3 months :man_facepalming:

5 Me gusta

Just remember the pipe key and you are 90% of the way there!

6 Me gusta

A behavior similar to bootstrap responsive tables would be neat.
If a table is larger than your screen, it’s becomes horizontally scrollable. Couldn’t be simplier, and it works well.

2 Me gusta