mintlify__docs/es/create/list-table.mdx

---
title: "Listas y tablas"
description: "Da formato a datos estructurados con tablas en Markdown, listas ordenadas y no ordenadas, estructuras anidadas y casillas de tareas."
keywords: ["ordenadas", "no ordenadas", "tablas en Markdown", "formato de tablas"]
---

<div id="lists">
  ## Listas
</div>

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

<div id="ordered-list">
  ### 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
</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
</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
</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
</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
</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
</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
</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>
```