998

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?

Improve this question
3

15 Answers 15

Reset to default
1338

Try adding a - before the [ ] or [x]. That's an - followed by a blank space . An unchecked box also need a space between the brackets.

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

Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

There was a formatting mistake in question initially. It is working for lists but not for table.
This looks good, but the checkboxes are broken. If you click a checkbox, it does nothing. Ordinarily clicking a GitHub Markdown checkbox checks/unchecks it. Workaround is to manually edit the HTML, which isn't great, but doable.
This creates just the appearance of a checkbox. The item doesn't actually respond to click events, which cancels the purpose of them: check from md rendered mode, rather than raw text.
@DumpsterDoofus do you mean this does not work in issues/merge requests? As in general, while checkboxes are clickable in GitHub / GitLab issues and merge requests as, for such locations, it makes sense as sort of a shoping list, what woud be the meaning of user clicking on a checkbox in documentation? Would you really like to see your markdown edited?
@EduardoPignatelli It's Markdown. It's a static file. If the OP is wanting something interactable with just straight Markdown their expectations are in wrong place.
|
197

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

Improve this answer

9 Comments

This looks very nice in the rendered output but the downside is that it takes a lot of space in the "source code" and is not very readable there. And the readability is one of the major concepts of markdown.
I think this may be out of date as :white_check_mark: now looks like a green check box with a white check mark.
@davidkonrad, see stackoverflow.com/a/59674743/90287, specifically gist.github.com/rxaviers/7360908. I'm using Firefox 76.0.1 and Chrome 81.0.4044.138 on Windows.
@ERJAN, [OT] Yes, and many of them, +100. It is from the docs from an internal project, which provide homogene access to various dbms'es. Where native support differs, or a SQL function is missing, functionality are tweaked so using popular SQL-functions return the exact same regardless of platform, that is what the gray tickmark indicate. Cannot promise anything, but the domain for open sourcing it is bought, crudder.net. All I need is time.
Now in VS code marketplace.visualstudio.com/… required for emoji
|
154 
|checked|unchecked|crossed|
|---|---|---|
|&check;|_|&cross;|
|&#x2611;|&#x2610;|&#x2612;|
checked unchecked crossed
✓ _ ✗
☑ ☐ ☒

Where

Improve this answer

1 Comment

only this works in jupyter notebook preview.
121

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; |
Improve this answer

3 Comments

This works too aside from accepted answer. In fact, I have already used it successfully on GitHub. Thanks for pointing it out for everyone. I should have done that earlier.
&#10004; for '✔'
Note that some emoji characters render differently in GitHub issue display vs. in the editor: ☑ becomes a box check with a red mark despite looking black&white in the editor. The check mark button ✅ becomes a "white" check mark when rendered, despite looking green in the editor. The check mark ✔️ looks black in the editor, but gets rendered as a green check mark in the issue.
82

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,

Improve this answer

Comments

74

You can use emojis

Done? | Name
:---:| ---
⬜️| Nope
✅| Yep
Improve this answer

3 Comments

what should i write for using first emoji? I know, that second is ":heavy_check_mark:"
for uncheck box use :white_large_square and for check box use :white_check_mark
List of Github supported emojis
37

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.

Improve this answer

2 Comments

This won't display in Github
@LiamPillay, do you know why?
21

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

Improve this answer

Comments

18

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

Improve this answer

3 Comments

You can create tables with pipes | and hyphens - to create a table and inside of that table you can use the - [ ] and - [x] syntax. this is how i draw a checkbox.
@JosephCharles Please can you provide sample code to show how you got it working in a table?
This will not work and does not answer the question.
6

Dec 2023:

This is the only thing that worked for me.

Please make sure that you remove the whitespaces around the x, since GitHub adds them by default:

- [x]

Improve this answer

Comments

4

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> |
Improve this answer

Comments

2

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

Improve this answer

2 Comments

It's not working for me. Is it for Github flavored markdown?
I see, somehow it doesn't render with Github flavoured markdown. But works fine for other markdown previewers.
2

The following works well on GitHub

| Selection |        |
| --------- | ------ |
| <li>- [ ] </li> |  |

| Selection |        |
| --------- | ------ |
| <li>- [x] </li> |  |

enter image description here

Improve this answer

2 Comments

For some reason it also draws a bullet point underneath the checboxes for me: pbs.twimg.com/media/FwghXuYWwAIlhfC?format=png&name=240x240
I also got a bullet point rendering. Using a ul worked for me: <ul><li> - [ ] </li></ul>
0

Markdown accepts html tags so you can html tags like input checkboxes or radio button so you can use this solution for example:

<input type="checkbox id="task-1">
<label for="task-1">Do something ....</label>

And if you do your task you can add checked attribute to checkbox input for example:

<input type="checkbox id="task-1" checked>
<label for="task-1">Do something ....</label>
Improve this answer

1 Comment

<input type="checkbox" id="task-1"> <label for="task-1">Do something ....</label>
-1

by adding cross x in col without spaces you can check desired checkbox

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.