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

Question

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?

Check out GitHub Blog https://github.blog/2014-04-28-task-lists-in-all-markdown-documents/ — Sagynbek Kenzhebaev, Jun 15 '20 at 15:42
Markdown requires you to add some text after the checkbox. E.g., `- [ ] myLabel` — Piano Telope, Sep 01 '20 at 15:41
Seems that checkboxes are not available with [Stackoverflow's Markdown](https://stackoverflow.com/editing-help)! — Avatar, May 10 '22 at 09:01

score 1037 · Accepted Answer · edited Mar 17 '23 at 09:26

1037

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:

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:

edited Mar 17 '23 at 09:26

petter

1,765
18
22

answered Nov 17 '17 at 06:35

Yash

11,486
4
19
35

3

There was a formatting mistake in question initially. It is working for lists but not for table. – Gaurav Bishnoi Nov 17 '17 at 06:39
24

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. – DumpsterDoofus Sep 27 '18 at 01:45
1

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. – Eduardo Pignatelli May 16 '19 at 08:48
4

@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? – Joël Aug 22 '19 at 08:44
To me it honestly seems broken on GitHub's side. – Daniel W. Nov 18 '20 at 11:47
This markdown checkbox also works for the Github "projects" tab, inside your Cards on your Kanban board. – MaylorTaylor Nov 24 '20 at 06:58
Make sure the don't have spaces between parentheses and `x`. `[ x ]` won't work but `[x]` will. – Amit Levy Jan 03 '21 at 13:25
(FYI) Sadly, this solution does not currently not work in Azure Devops – HerChip Feb 20 '23 at 13:20

score 172 · Answer 2 · answered Apr 04 '19 at 18:48

172

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

answered Apr 04 '19 at 18:48

davidkonrad

83,997
17
205
265

3

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. – Daniel Feb 09 '20 at 15:24
8

I think this may be out of date as `:white_check_mark:` now looks like a green check box with a white check mark. – Rami A. May 18 '20 at 00:26
@davidkonrad, see https://stackoverflow.com/a/59674743/90287, specifically https://gist.github.com/rxaviers/7360908. I'm using Firefox 76.0.1 and Chrome 81.0.4044.138 on Windows. – Rami A. May 18 '20 at 01:12
hi, do u actually have this table that shows what functions are supported in what database? – ERJAN Feb 21 '21 at 16:25
1

@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. – davidkonrad Feb 21 '21 at 19:54
@davidkonrad thx u David! i wish it was online, but not yet.. i will wait – ERJAN Feb 21 '21 at 20:39
@davidkonrad, pls do upload it on github if possible – ERJAN Feb 21 '21 at 20:39
If anyone is looking for a red cross its code is `:x:` – Menyus Apr 18 '21 at 08:04
1

Now in VS code https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji required for emoji – JyotiKumarPoddar Dec 30 '22 at 10:12

user9645 · Answer 3 · 2019-01-10T13:51:20.693

109

I used ☐ (☐) for [ ] and ☑ (☑) 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; |

edited Jan 10 '19 at 13:51

answered Jan 09 '19 at 19:06

user9645

6,286
6
29
43

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. – Gaurav Bishnoi Jan 10 '19 at 01:16
14

✔ for '✔' – Mawardy Apr 13 '20 at 01:21
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. – Ingo Steinke Jul 15 '22 at 10:33

SpeedCoder5 · Answer 4 · 2022-08-17T23:21:08.617

98

|checked|unchecked|crossed|
|---|---|---|
|&check;|_|&cross;|
|&#x2611;|&#x2610;|&#x2612;|

checked	unchecked	crossed
✓	_	✗
☑	☐	☒

Where

✓ via HTML Entity Code
✗ via HTML Entity Code
_ via underscore character
☑, ☐ and ☒ via HTML ballot box codes
table via markdown table syntax.

edited Aug 17 '22 at 23:21

answered Mar 14 '20 at 21:31

SpeedCoder5

8,188
6
33
34

score 70 · Answer 5 · answered Jan 10 '20 at 02:24

70

There are very nice Emoji icons instructions available at

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

Best,

answered Jan 10 '20 at 02:24

turong

1,474
9
14

score 68 · Answer 6 · answered Jan 28 '19 at 16:46

68

You can use emojis

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

answered Jan 28 '19 at 16:46

Benjamin Intal

2,748
1
25
26

3

what should i write for using first emoji? I know, that second is ":heavy_check_mark:" – Eldar Jul 13 '21 at 23:01
4

for uncheck box use `:white_large_square` and for check box use `:white_check_mark` – Dexter Sep 01 '21 at 05:35
1

List of Github [supported emojis](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) – InsertCheesyLine Jun 02 '22 at 12:49

Zayne Liu · Answer 7 · 2022-04-15T12:57:21.227

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

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.

This won't display in Github – Liam Pillay Apr 05 '22 at 22:36 — Liam Pillay, Apr 05 '22 at 22:36

score 15 · Answer 8 · edited Dec 13 '21 at 19:32

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

score 14 · Answer 9 · edited Dec 30 '18 at 12:54

14

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

edited Dec 30 '18 at 12:54

karel

5,489
46
45
50

answered Nov 17 '17 at 06:34

Joseph Charles

656
6
17

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. – Joseph Charles Nov 17 '17 at 06:45
@JosephCharles Please can you provide sample code to show how you got it working in a table? – Pocketsand Nov 07 '19 at 17:12
7

This will not work and does not answer the question. – coisnepe Nov 13 '19 at 14:11

score 3 · Answer 10 · answered Mar 27 '18 at 20:40

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

score 1 · Answer 11 · answered Nov 17 '17 at 06:40

1

Following is how I draw a checkbox in a table!

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

Displays like this:

answered Nov 17 '17 at 06:40

vishwarajanand

1,021
13
23

10

It's not working for me. Is it for Github flavored markdown? – Gaurav Bishnoi Nov 17 '17 at 06:46
I see, somehow it doesn't render with `Github flavoured markdown`. But works fine for other markdown previewers. – vishwarajanand Nov 17 '17 at 06:54

score 0 · Answer 12 · answered Feb 24 '23 at 15:02

0

The following works well on GitHub

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

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

answered Feb 24 '23 at 15:02

dimitrieh

401
3
17

For some reason it also draws a bullet point underneath the checboxes for me: https://pbs.twimg.com/media/FwghXuYWwAIlhfC?format=png&name=240x240 – saulius2 May 19 '23 at 17:35

score -1 · Answer 13 · answered Apr 11 '23 at 15:59

-1

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

answered Apr 11 '23 at 15:59

usama saeed

21
3

1

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](/help/how-to-answer). – Community Apr 15 '23 at 12:08

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

13 Answers13

09 2021

Native Github

Source