Comment écrire des listes dans une table de démarque?


200

Peut-on créer une liste (puces, numérotées ou non) à l'intérieur d'une table de démarques.

Un tableau ressemble à ceci:

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

Une liste ressemble à ceci:

* one
* two
* three

Puis-je les fusionner d'une manière ou d'une autre?

Réponses:


253

Oui, vous pouvez les fusionner en utilisant HTML. Lorsque je crée des tableaux dans des .mdfichiers à partir de Github, j'aime toujours utiliser du code HTML au lieu du markdown.

Github Flavored Markdown prend en charge le HTML de base dans un .mdfichier. Ce serait donc la réponse:

Markdown mélangé avec du 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|

Ou HTML pur:

<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>

Voici à quoi cela ressemble sur Github:


1
C'est très bien, mais existe-t-il un moyen de styliser la liste aussi? Supprimer les balles, les marges, etc.? Github, par exemple, ne semble pas accepter une style="list-style: none"balise sur l' ulélément.
Trebor Rude

@TreborRude Non, car Markdown n'est pas du HTML en fait. Mais si vous utilisez une bibliothèque (par exemple marked), vous avez probablement cette fonctionnalité (pour combiner HTML avec markdown).
Ionică Bizău

C'est bon, j'ai découvert qu'une <span>balise avec des <br/>balises intégrées faisait exactement ce que j'essayais de faire avec la liste stylée.
Trebor Rude

@TreborRude Bien sûr, vous pouvez toujours avoir plusieurs cellules de ligne. Il accepte probablement aussi les <p>balises.
Ionică Bizău

Je suis heureux de confirmer que le premier (intégré <ul><li>foo</li></ul>) fonctionne également sur Bitbucket Server.
nwinkler

91

Si vous voulez une liste sans puce (ou toute autre utilisation non standard) ou plusieurs lignes dans une cellule, utilisez <br />

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

2
Probablement parce qu'il y a trois ans, c'était la seule réponse raisonnable? Je suis d'accord avec vous que c'est une meilleure réponse, aujourd'hui.
William Daniel

14
Ceci est une réponse à Newline dans le tableau de démarque? , pas cette question sur les listes
Bergi

1
@Bergi J'ai voté pour votre suggestion. ;) La recherche Google m'a conduit à cette question et à la solution dont j'avais besoin. Je pense que c'est supportable (par exemple la liste non à puces) donc je le garde à cet endroit même.
Amio.io

3
Vous pouvez ajouter des puces avec des entités HTML: & bull; facebook-messenger<br/> & bull; skype
shawnhcorey


48

Pas que je sache, car toutes les références de démarque que je connais, comme celle-ci , mentionnent:

Le contenu des cellules doit être sur une seule ligne

Vous pouvez l'essayer avec ce générateur de tables de réduction (dont l'exemple ressemble à celui que vous mentionnez dans votre question, vous en avez peut-être déjà conscience).

Pandoc

Si vous utilisez le markdown de Pandoc (qui étend la syntaxe de markdown de John Gruber sur laquelle est basé le Markdown Flavored GitHub ), vous pouvez utiliser soit grid_tables:

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

ou 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
Le générateur de tables de réduction est incorrect car il accepte de nouvelles lignes qui, comme vous le dites, ne sont pas acceptées. Mais merci pour les précieuses informations.
Gabriel Petrovay

@GabrielPetrovay Le générateur de tables de Markdown étant un service relativement nouveau, je ne suis pas surpris;) Mais en ce qui concerne "Markdown Flavored GitHub", ma réponse est valable.
VonC

1
J'ai tendance à accepter votre réponse. Mais j'attends 1-2 jours de plus, peut-être que quelqu'un poste un hack (si la réponse est acceptée, personne ne le regardera, sauf les autres ayant le même problème)
Gabriel Petrovay

1
@GabrielPetrovay Je suis d'accord. Vous pouvez également contacter le support GitHub et voir ce qu'ils en disent. (et ensuite mettre à jour ma réponse ou publier la vôtre)
VonC

1
@ イ オ ニ カ ビ ザ ウ Je n'ai évidemment pas mentionné HTML. Avec HTML, vous pouvez recréer n'importe quelle fonctionnalité de démarque, donc ce n'est pas une solution valide. La question concerne le démarque, pas le HTML.
VonC

3

Une approche alternative, que j'ai récemment implémentée, consiste à utiliser le plugin div-table avec panflute .

Cela crée une table à partir d'un ensemble de divs clôturés (standard dans le pandoc implémentation du markdown), dans une disposition similaire à 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
:::::

Ressemble à:

entrez la description de l'image ici


2

Si vous utilisez l'approche html:

n'ajoutez pas de lignes vides

Comme ça:

<table>
    <tbody>

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

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

    </tbody>
</table>

le balisage sera rompu.

Supprimer les lignes vides:

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

0

une autre solution, vous pouvez ajouter une <br>balise à votre table

    |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|

entrez la description de l'image ici

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.