Як писати списки всередині таблиці розмітки?


201

Чи можна створити список (кулі, пронумеровані чи ні) всередині таблиці розмітки.

Таблиця виглядає так:

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

Список виглядає приблизно так:

* one
* two
* three

Чи можу я їх якось злити?

Відповіді:


254

Так, ви можете об'єднати їх за допомогою HTML. Коли я створюю таблиці у .mdфайлах з Github, я завжди люблю використовувати HTML-код замість розмітки.

Github Flavored Markdown підтримує основний HTML у .mdфайлі. Отже, це була б відповідь:

Відмітка змішана з 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|

Або чистий HTML:

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

Ось як це виглядає на Github:


1
Це чудово, але чи є спосіб також створити список? Видалити кулі, поля тощо? Наприклад, Github, схоже, не приймає style="list-style: none"тег на ulелемент.
Trebor Rude

@TreborRude Ні, тому що Markdown насправді не HTML. Але якщо ви використовуєте бібліотеку (наприклад marked), напевно, у вас є ця функція (поєднувати HTML з розміткою).
Ionică Bizău

Це нормально, я дізнався, що <span>тег із вбудованими <br/>тегами робив саме те, що я намагався зробити зі списком стилів.
Trebor Rude

@TreborRude Звичайно, ви все одно можете мати декілька комірок лінії. Можливо, він також приймає <p>теги.
Ionică Bizău

Я радий підтвердити, що перший (вбудований <ul><li>foo</li></ul>) також працює на Bitbucket Server.
nwinkler

91

Якщо ви хочете, щоб список без пулі (або будь-яке інше нестандартне використання) або більше рядків використовувались у комірці <br />

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

2
Можливо, тому, що три роки тому це була єдина розумна відповідь? Я згоден з вами, що сьогодні це краща відповідь.
Вільям Даніель

14
Це відповідь на Newline в таблиці розмітки? , не це питання щодо списків
Бергі

1
@Bergi Я підтримав вашу пропозицію. ;) Пошук у Google привів мене до цього питання, і це рішення, яке мені було потрібно. Я думаю, що це можна перенести (наприклад, список без букв), тому я зберігаю його саме там.
Amio.io

3
Ви можете додати кулі з HTML-сутностями: & bull; facebook-messenger<br/> & bull; skype
shawnhcorey

markdown lint прапори це як не вбудований html
andrei.ciprian

48

Не те, про що я знаю, тому що всі відомі мені позначення, як ця , згадуються:

Вміст комірок повинен містити лише один рядок

Ви можете спробувати цей генератор таблиць Markdown (чий приклад схожий на той, який ви згадуєте у своєму запитанні, тож ви, можливо, вже знаєте про це).

Пандок

Якщо ви використовуєте розмітку Pandoc (яка розширює синтаксис розмітки Джона Грубера, на якому базується GitHub Flavored Markdown ), ви можете використовувати grid_tables:

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

або 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 помиляється, оскільки приймає нові рядки, які, як ви цитуєте, не приймаються. Але дякую за цінну інформацію.
Габріель Петрова

@GabrielPetrovay Генератор таблиць Markdown - це порівняно нова послуга, я не здивований;) Але щодо "GitHub Flavored Markdown" моя відповідь стоїть.
VonC

1
Я схильний прийняти вашу відповідь. Але я чекаю ще 1-2 дні, можливо, хтось
опублікує

1
@GabrielPetrovay Я згоден. Ви також можете зв’язатися зі службою підтримки GitHub і подивитися, що вони мають про це сказати. (а потім оновіть мою відповідь або опублікуйте свою власну)
VonC

1
@ イ オ ニ カ ビ ザ ウ Я, очевидно, не згадав HTML. За допомогою HTML ви можете відтворити будь-яку функцію розмітки, тому це не є дійсним рішенням. Питання стосується розмітки , а не HTML.
VonC

3

Альтернативний підхід, який я нещодавно реалізував, - це використовувати плагін div-table з panflute .

Це створює таблицю з набору обгороджених дівок (стандарт в pandoc розмітки), у аналогічному макеті до 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
:::::

Виглядає наче:

введіть тут опис зображення


2

Якщо ви використовуєте html-підхід:

не додавати порожні рядки

Подобається це:

<table>
    <tbody>

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

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

    </tbody>
</table>

розмітка зламається.

Видаліть порожні рядки:

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

0

інше рішення, ви можете додати <br>тег до свого столу

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

введіть тут опис зображення

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.