# Listas y tablas (/es/create/list-table)

<!-- agent-signals: reading_time_min: 4 · est_tokens: 1495 · updated: 2026-09-23 -->
Related: [Dar formato al texto](/es/create/text.md), [Formato de código](/es/create/code.md), [Imágenes e inserciones](/es/create/image-embeds.md), [Archivos](/es/create/files.md)

<div id="lists">
  ## Listas [#listas]
</div>

Las listas siguen la sintaxis oficial de [Markdown](https://www.markdownguide.org/basic-syntax/#lists-1).

<div id="ordered-list">
  ### Lista ordenada [#lista-ordenada]
</div>

Para crear una lista ordenada, agrega números seguidos de un punto antes de cada elemento.

1. Primer elemento
2. Segundo elemento
3. Tercer elemento
4. Cuarto elemento

```mdx
1. Primer elemento
2. Segundo elemento
3. Tercer elemento
4. Cuarto elemento
```

<div id="unordered-list">
  ### Lista sin orden [#lista-sin-orden]
</div>

Para crear una lista sin orden, agrega guiones (`-`), asteriscos (`*`) o signos más (`+`) antes de los elementos de la lista.

* Primer elemento
* Segundo elemento
* Tercer elemento
* Cuarto elemento

```mdx
- Primer elemento
- Segundo elemento
- Tercer elemento
- Cuarto elemento
```

<div id="nested-list">
  ### Lista anidada [#lista-anidada]
</div>

Sangra los elementos de la lista para anidarlos.

* Primer elemento
* Segundo elemento
  * Elemento adicional
  * Elemento adicional
* Tercer elemento

```mdx
- Primer elemento
- Segundo elemento
  - Elemento adicional
  - Elemento adicional
- Tercer elemento
```

<div id="task-list">
  ### Lista de tareas [#lista-de-tareas]
</div>

Para crear una lista de tareas, agrega `[ ]` para una casilla sin marcar o `[x]` para una casilla marcada después de los marcadores de lista sin orden.

* [x] Elemento completado
* [ ] Elemento incompleto

```mdx
- [x] Elemento completado
- [ ] Elemento incompleto
```

<div id="tables">
  ## Tablas [#tablas]
</div>

Las tablas siguen la [sintaxis oficial de Markdown](https://www.markdownguide.org/extended-syntax/#tables).

Para añadir una tabla, usa tres o más guiones (`---`) para crear el encabezado de cada columna y usa barras verticales (`|`) para separar cada columna. Por compatibilidad, también debes añadir una barra vertical al principio y al final de cada fila.

| Propiedad | Descripción                          |
| --------- | ------------------------------------ |
| Nombre    | Nombre completo del usuario          |
| Edad      | Edad indicada                        |
| Ingreso   | Si el usuario se unió a la comunidad |

```mdx
| Property | Descripción                           |
| -------- | ------------------------------------- |
| Name     | Nombre completo del usuario           |
| Age      | Edad reportada                        |
| Joined   | Si el usuario se unió a la comunidad  |
```

<div id="escape-pipe-characters">
  ### Escapar caracteres de barra vertical [#escapar-caracteres-de-barra-vertical]
</div>

Para incluir un carácter de barra vertical literal (`|`) en una celda de tabla, antepón una barra invertida (`\|`). Escapa los caracteres de barra vertical incluso cuando aparezcan dentro de código en línea. De lo contrario, la barra vertical se interpreta como un separador de columnas y puede causar errores de análisis durante la vista previa o la validación.

| Valor         | Descripción                                      |
| ------------- | ------------------------------------------------ |
| `read\|write` | Un valor que contiene una barra vertical literal |

```mdx
| Value         | Description                       |
| ------------- | --------------------------------- |
| `read\|write` | A value containing a literal pipe |
```

<div id="column-alignment">
  ### Alineación de columnas [#alineación-de-columnas]
</div>

Usa dos puntos en la fila de separación para alinear el contenido de las columnas:

| Alineado a la izquierda | Alineado al centro | Alineado a la derecha |
| :---------------------- | :----------------: | --------------------: |
| Izquierda               |       Centro       |               Derecha |
| Texto                   |        Texto       |                 Texto |

```mdx
| Alineado a la izquierda | Alineado al centro | Alineado a la derecha |
| :----------- | :------------: | ------------: |
| Izquierda         | Centro         | Derecha         |
| Texto         | Texto           | Texto          |
```

<div id="column-widths">
  ### Ancho de columnas [#ancho-de-columnas]
</div>

Las tablas de Markdown ajustan el ancho de sus columnas automáticamente según el contenido. Para controlar el ancho de las columnas, escribe la tabla en HTML y agrega un elemento `<colgroup>` que defina un ancho en cada `<col>`.

En el modo visual del [editor](/es/editor), arrastra el borde de una columna para cambiar su ancho. El editor convierte la tabla a HTML y escribe los anchos del `<colgroup>` por ti.

Cuando cada `<col>` declara un ancho, mediante el atributo `width` o un estilo en línea, la tabla usa tus anchos y ajusta el contenido largo dentro de cada columna. Si a algún `<col>` le falta el ancho, Mintlify ignora los anchos declarados y ajusta las columnas según el contenido. Las tablas demasiado anchas para la página siguen desplazándose horizontalmente.

<table>
  <colgroup>
    <col width="25%" />

    <col width="15%" />

    <col width="60%" />
  </colgroup>

  <thead>
    <tr>
      <th>
        Parámetro
      </th>

      <th>
        Tipo
      </th>

      <th>
        Descripción
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        name
      </td>

      <td>
        string
      </td>

      <td>
        Nombre completo del usuario
      </td>
    </tr>

    <tr>
      <td>
        age
      </td>

      <td>
        number
      </td>

      <td>
        Edad reportada del usuario
      </td>
    </tr>
  </tbody>
</table>

```html
<table>
  <colgroup>
    <col width="25%" />
    <col width="15%" />
    <col width="60%" />
  </colgroup>
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>name</td>
      <td>string</td>
      <td>Full name of the user</td>
    </tr>
    <tr>
      <td>age</td>
      <td>number</td>
      <td>Reported age of the user</td>
    </tr>
  </tbody>
</table>
```