Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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?
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:
–
–
–
–
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) :
–
–
–
–
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 |
| --------- | ------- |
| ☐ | ☑ |
–
–
https://gist.github.com/rxaviers/7360908
or at https://github.com/StylishThemes/GitHub-Dark/wiki/Emoji
You can check them out. I hope you would find suitable icons for your writing.
Best,
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.
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
–
–
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> |
Following is how I draw a checkbox in a table!
| Checkbox Experiments | [ ] unchecked header | [x] checked header |
| ---------------------|:---------------------:|:-------------------:|
| checkbox | [ ] row | [x] row |
Displays like this:
–
–
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
