¿Cómo escribir listas dentro de una tabla de rebajas?


200

¿Se puede crear una lista (viñetas, numeradas o no) dentro de una tabla de rebajas.

Una mesa se ve así:

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Una lista se ve así:

* one
* two
* three

¿Puedo fusionarlos de alguna manera?

Respuestas:


253

Sí, puedes fusionarlos usando HTML. Cuando creo tablas en .mdarchivos desde Github, siempre me gusta usar código HTML en lugar de rebajas.

Markdown con sabor a Github admite HTML básico en .mdarchivos. Entonces esta sería la respuesta:

Markdown mezclado con HTML:

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
| <ul><li>item1</li><li>item2</li></ul>| See the list | from the first column|

O HTML puro:

<table>
  <tbody>
    <tr>
      <th>Tables</th>
      <th align="center">Are</th>
      <th align="right">Cool</th>
    </tr>
    <tr>
      <td>col 3 is</td>
      <td align="center">right-aligned</td>
      <td align="right">$1600</td>
    </tr>
    <tr>
      <td>col 2 is</td>
      <td align="center">centered</td>
      <td align="right">$12</td>
    </tr>
    <tr>
      <td>zebra stripes</td>
      <td align="center">are neat</td>
      <td align="right">$1</td>
    </tr>
    <tr>
      <td>
        <ul>
          <li>item1</li>
          <li>item2</li>
        </ul>
      </td>
      <td align="center">See the list</td>
      <td align="right">from the first column</td>
    </tr>
  </tbody>
</table>

Así es como se ve en Github:


1
Esto es genial, pero ¿hay alguna forma de diseñar la lista también? ¿Eliminar balas, márgenes, etc.? Github, por ejemplo, no parece aceptar una style="list-style: none"etiqueta en el ulelemento.
Trebor Rude

@TreborRude No, porque Markdown no es HTML en realidad. Pero si usa una biblioteca (p marked. Ej. ), Probablemente tenga esta característica (para combinar HTML con Markdown).
Ionică Bizău

Está bien, descubrí que una <span>etiqueta con <br/>etiquetas incrustadas hizo exactamente lo que estaba tratando de hacer con la lista de estilos.
Trebor Rude

@TreborRude Claro, aún puede tener múltiples celdas de línea. Probablemente también acepta <p>etiquetas.
Ionică Bizău

Me complace confirmar que el primero (incrustado <ul><li>foo</li></ul>) también funciona en Bitbucket Server.
nwinkler

91

Si desea una lista sin viñetas (o cualquier otro uso no estándar) o más líneas en un uso de celda <br />

| Event         | Platform      | Description |
| ------------- |-----------| -----:|
| `message_received`| `facebook-messenger`<br/>`skype`|

2
¿Probablemente porque hace tres años era la única respuesta razonable? Estoy de acuerdo con usted en que esta es una mejor respuesta hoy.
William Daniel

14
¿Esta es una respuesta a Newline en la tabla de rebajas? , no esta pregunta sobre listas
Bergi

1
@Bergi He votado tu sugerencia. ;) La búsqueda en Google me llevó a esta pregunta y esta es la solución que necesitaba. Creo que es soportable (por ejemplo, una lista sin viñetas), así que lo guardo en este mismo lugar.
Amio.io

3
Puede agregar viñetas con entidades HTML: & bull; facebook-messenger<br/> & toro; skype
shawnhcorey

banderas de rebajas pelusa esto como ningún HTML en línea
andrei.ciprian

48

No es que yo sepa, porque todas las referencias de descuento que conozco, como esta , mencionan:

El contenido de la celda debe estar solo en una línea

Puedes probarlo con ese generador de tablas de rebajas (cuyo ejemplo se parece al que menciona en su pregunta, por lo que es posible que ya lo sepa).

Pandoc

Si está utilizando la rebaja de Pandoc (que se extiende la sintaxis de rebaja de John Gruber en la que se basa la rebaja con sabor de GitHub ) puede usar grid_tables:

+---------------+---------------+--------------------+
| Fruit         | Price         | Advantages         |
+===============+===============+====================+
| Bananas       | $1.34         | - built-in wrapper |
|               |               | - bright color     |
+---------------+---------------+--------------------+
| Oranges       | $2.10         | - cures scurvy     |
|               |               | - tasty            |
+---------------+---------------+--------------------+

o multiline_tables .

-------------------------------------------------------------
 Centered   Default           Right Left
  Header    Aligned         Aligned Aligned
----------- ------- --------------- -------------------------
   First    row                12.0 Example of a row that
                                    spans multiple lines.

  Second    row                 5.0 Here's another one. Note
                                    the blank line between
                                    rows.
-------------------------------------------------------------

1
Markdown Tables Generator está equivocado porque acepta nuevas líneas que, como usted cita, no son aceptadas. Pero gracias por la valiosa información.
Gabriel Petrovay

@GabrielPetrovay El generador de tablas de Markdown es un servicio relativamente nuevo, no me sorprende;) Pero con respecto a "Markdown con sabor a GitHub", mi respuesta se mantiene.
VonC

1
Tiendo a aceptar tu respuesta. Pero espero 1-2 días más, tal vez alguien publique un truco (si la respuesta es aceptada, nadie lo verá, excepto otros con el mismo problema)
Gabriel Petrovay

1
@GabrielPetrovay Estoy de acuerdo. También puede ponerse en contacto con el soporte de GitHub y ver qué tienen que decir al respecto. (y luego actualice mi respuesta o publique la suya propia)
VonC

1
@ イ オ ニ カ ビ ザ ウ Obviamente no mencioné HTML. Con HTML, puede recrear cualquier función de reducción, por lo que no es una solución válida. La pregunta es sobre rebajas, no HTML.
VonC

3

Un enfoque alternativo, que he implementado recientemente, es usar el complemento div-table con panflute .

Esto crea una tabla a partir de un conjunto de divs cercados (estándar en la implementación de pandoc de markdown), en un diseño similar a html:

---
panflute-filters: [div-table]
panflute-path: 'panflute/docs/source'
---

::::: {.divtable}
:::: {.tcaption}
a caption here (optional), only the first paragraph is used.
::::
:::: {.thead}
[Header 1]{width=0.4 align=center}
[Header 2]{width=0.6 align=default}
::::
:::: {.trow}
::: {.tcell}

1. any
2. normal markdown
3. can go in a cell

:::
::: {.tcell}
![](https://pixabay.com/get/e832b60e2cf7043ed1584d05fb0938c9bd22ffd41cb2144894f9c57aae/bird-1771435_1280.png?attachment){width=50%}

some text
:::
::::
:::: {.trow bypara=true}
If bypara=true

Then each paragraph will be treated as a separate column
::::
any text outside a div will be ignored
:::::

Parece:

ingrese la descripción de la imagen aquí


2

Si usa el enfoque html:

no agregue líneas en blanco

Me gusta esto:

<table>
    <tbody>

        <tr>
            <td>1</td>
            <td>2</td>
        </tr>

        <tr>
            <td>1</td>
            <td>2</td>
        </tr>

    </tbody>
</table>

el marcado se romperá.

Eliminar líneas en blanco:

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

0

otra solución, puedes agregar una <br>etiqueta a tu mesa

    |Method name| Behavior |
    |--|--|
    | OnAwakeLogicController(); | Its called when MainLogicController is loaded into the memory , its also hold the following actions :- <br> 1. Checking Audio Settings <br>2. Initializing Level Controller|

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.