Explain Codes LogoExplain Codes Logo

How to write lists inside a markdown table?

html
markdown
tables
html-tags
Alex KataevbyAlex Kataev·Aug 6, 2024
TLDR

To create a list inside a markdown table, utilize line breaks (<br>) to initiate new list items directly within the cell:

| Tasks | Progress | | -------------- | -------------- | | Today's Tasks | ✅ Completed<br>⌛ In-progress<br>❌ Not started |

Appearing as:

TasksProgress
Today's Tasks✅ Completed
⌛ In-progress
❌ Not started

You want to use <br> for line breaks, and emojis or symbols to visually signify list items for clarity and brevity.

Utilizing HTML in markdown

The beauty of Github Flavored Markdown (GFM) is that it supports basic HTML within markdown whereby you can create more intricately designed tables using <ul> and <li> HTML tags:

| Feature | Details | | ----------- | ----------| | Benefits | <ul><li>Efficient</li><li>Scalable</li></ul> |

This markdown will produce:

FeatureDetails
Benefits<ul><li>Efficient</li><li>Scalable</li></ul>

Remember, leveraging a mixture of markdown with HTML allows great control over the table aesthetics.

Creating tables using pure HTML

When it comes to dealing with complex table layouts or deep-rooted desire for control over the tables, consider utilizing pure HTML:

<!-- HTML humor: Why do programmers confuse Halloween and Christmas? Because Oct 31 == Dec 25 --> <table> <tr> <th>Plan</th> <th>Features</th> </tr> <tr> <td>Basic</td> <td> <ul> <li>Feature 1</li> <li>Feature 2</li> </ul> </td> </tr> </table>

With HTML, tags like <table> and <tbody> help you construct organized tables and integrate lists effortlessly using <ul> and <li> tags.

Advanced table structures

With Pandoc's multiline_tables, you can extend markdown and design complex table layouts along with integral list content. It also gives the ability to simulate line breaks with the <br> tag inside table cells.

Panflute or div-table plugins are corkers to experience more advanced features. They can create HTML-like tables within your markdown documents. For example, fenced divs in Pandoc can render HTML-level layouts.

The div-table plugin with bypara=true can treat paragraphs as separate table columns and supports elements like captions and images. Always remember Pandas are great at multi-tasking.