How to draw checkbox or tick mark in GitHub Markdown table?

GithubMarkdownGithub Flavored-Markdown

Github Problem Overview


I am able to draw checkbox in Github README.md lists using

- [ ] (for unchecked checkbox)
- [x] (for checked checkbox)

But this is not working in table. Does anybody know how to implement checkbox or checkmark in GitHub Markdown table?

Github Solutions


Solution 1 - Github

Try adding a - before the [] or [x]. That's an - followed by a blank space .

Below is an example from Github blog.

### Solar System Exploration, 1950s – 1960s

- [ ] Mercury
- [x] Venus
- [x] Earth (Orbit/Moon)
- [x] Mars
- [ ] Jupiter
- [ ] Saturn
- [ ] Uranus
- [ ] Neptune
- [ ] Comet Haley

It appears like below:

Resultant Image

Here's how one could do the same in a table:

| Task           | Time required | Assigned to   | Current Status | Finished | 
|----------------|---------------|---------------|----------------|-----------|
| Calendar Cache | > 5 hours  |  | in progress | - [x] ok?
| Object Cache   | > 5 hours  |  | in progress | [x] item1<br/>[ ] item2
| Object Cache   | > 5 hours  |  | in progress | <ul><li>- [x] item1</li><li>- [ ] item2</li></ul>
| Object Cache   | > 5 hours  |  | in progress | <ul><li>[x] item1</li><li>[ ] item2</li></ul>


- [x] works
- [x] works too

Here's how it looks:

enter image description here

Solution 2 - Github

Now emojis are supported! :white_check_mark: / :heavy_check_mark: gives a good impression and is widely supported:

Function | MySQL / MariaDB | PostgreSQL | SQLite
:------------ | :-------------| :-------------| :-------------
substr | :heavy_check_mark: |  :white_check_mark: | :heavy_check_mark:

renders to (here on older chromium 65.0.3x) :

enter image description here

Solution 3 - Github

I used &#9744; (☐) for [ ] and &#9745; (☑) for [x] and it works for marked.js which says it is compatible with Github markdown. I based my solution on answers for this question. See also this informative answer.

Update: I should have mentioned that when you do it this way, you do not need the <ul>, e.g:

| Unchecked | Checked |
| --------- | ------- |
| &#9744;   | &#9745; |

Solution 4 - Github

You can use emojis

Done? | Name
:---:| ---
⬜️| Nope
✅| Yep

Solution 5 - Github

|checked|unchecked|crossed|
|---|---|---|
|&check;|_|&cross;|
checked unchecked crossed
_

Where

✓ via HTML Entity Code
✗ via HTML Entity Code
_ via underscore character
and table via markdown table syntax.

Solution 6 - Github

There are very nice Emoji icons instructions available at

You can check them out. I hope you would find suitable icons for your writing.

Nice Emojis

Best,

Solution 7 - Github

Unfortunately, the accepted answer doesn't work for me (I'm using GitHub flavoured markdown).

It occurs to me since we're adding HTML elements, why not just add an <input> instead.

| demo                                              | demo |
| ------------------------------------------------- | ---- |
| <input type="checkbox" disabled checked /> works  |      |
| <input type="checkbox" disabled /> works here too |      |

This should work in any environment cuz it's plain HTML (see FYI below).

Rendered result

> FYI, this example was tested in VS Code markdown preview mode(GitHub flavoured), the screenshot is also taken in VS Code preview mode. It's not working on GitHub.

> Emoji mentioned above is a good alternative, if this doesn't work in your target environment.

Solution 8 - Github

09 2021

If you have an issue with the standard markdown code. You can use emojis.

Native Github

If you are using GitHub's default emojis, you can use these. Something to note is that there is no uncheck, so you have to use different emojis to get that look.

:white_large_square

:white_check_mark

Source

:white_large_square: https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md#geometric
:white_check_mark: https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md#other-symbol

Complete list https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md

Solution 9 - Github

Edit the document or wiki page, and use the - [ ] and - [x] syntax to update your task list. Furthermore you can refer to this link.

Solution 10 - Github

Here is what I have that helps you and others about markdown checkbox table. Enjoy!

| Projects | Operating Systems | Programming Languages   | CAM/CAD Programs | Microcontrollers and Processors | 
|---------------------------------- |---------------|---------------|----------------|-----------|
| <ul><li>[ ] Blog </li></ul>       | <ul><li>[ ] CentOS</li></ul>        | <ul><li>[ ] Python </li></ul> | <ul><li>[ ] AutoCAD Electrical </li></ul> | <ul><li>[ ] Arduino </li></ul> |
| <ul><li>[ ] PyGame</li></ul>   | <ul><li>[ ] Fedora </li></ul>       | <ul><li>[ ] C</li></ul> | <ul><li>[ ] 3DsMax </li></ul> |<ul><li>[ ] Raspberry Pi </li></ul> |
| <ul><li>[ ] Server Info Display</li></ul>| <ul><li>[ ] Ubuntu</li></ul> | <ul><li>[ ] C++ </li></ul> | <ul><li>[ ] Adobe AfterEffects </li></ul> |<ul><li>[ ]  </li></ul> |
| <ul><li>[ ] Twitter Subs Bot </li></ul> | <ul><li>[ ] ROS </li></ul>    | <ul><li>[ ] C# </li></ul> | <ul><li>[ ] Adobe Illustrator </li></ul> |<ul><li>[ ]  </li></ul> |

Solution 11 - Github

Following is how I draw a checkbox in a table!

| Checkbox Experiments | [ ] unchecked header  | [x] checked header  |
| ---------------------|:---------------------:|:-------------------:|
| checkbox             | [ ] row               | [x] row             |


Displays like this:
enter image description here

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGaurav BishnoiView Question on Stackoverflow
Solution 1 - GithubYashView Answer on Stackoverflow
Solution 2 - GithubdavidkonradView Answer on Stackoverflow
Solution 3 - Githubuser9645View Answer on Stackoverflow
Solution 4 - GithubBenjamin IntalView Answer on Stackoverflow
Solution 5 - GithubSpeedCoder5View Answer on Stackoverflow
Solution 6 - GithubturongView Answer on Stackoverflow
Solution 7 - GithubZayne LiuView Answer on Stackoverflow
Solution 8 - GithubDexterView Answer on Stackoverflow
Solution 9 - GithubJoseph CharlesView Answer on Stackoverflow
Solution 10 - GithubMusa ToktaşView Answer on Stackoverflow
Solution 11 - GithubvishwarajanandView Answer on Stackoverflow