Markdown Table Checkmarks.md

Checkbox Tables in Markdown

An attempt to make a list of the supported ways to make a table with checkboxes in Markdown.

Results as of October 2023.

---

Below is the style element that formats the colors of the colored check mark emojis.

<style>span[class="checked"]{color: green;}</style> <style>span[class="unchecked"]{color: red;}</style>

<style>span[class="checked"]{color: green;}</style>
<style>span[class="unchecked"]{color: red;}</style>

---

Below is the style element that formats the "Read-Only" Checkbox style. It is invisible in VS Code, and printed as plaintext in Github markdown.

<style>input[type='checkbox'][readonly]{pointer-events: none;}</style>

<style>input[type='checkbox'][readonly]{pointer-events: none;}</style>

---

Checkmark Style	Checked	Unchecked	VS Code Markdown	Github Markdown	Checked Plaintext	Unchecked Plaintext	Notes
Check Mark Symbol and Cross Mark Emojis	✅	❌	Yes	Yes	Unicode "Check Mark Symbol" \u2705	Unicode "Cross Mark" \u274c	Can be written :white_check_mark:, and the cross mark can be written :x: on Github.
Grey Check Box with Check	☑️		Plain symbol	Plain symbol in Chrome	Unicode "Check Box with Check" \u2611\ufe0f		Can be written :ballot_box_with_check: on Github. In Safari and Firefox, this renders as a nice grey checkbox. In Chrome and VS Code, this renders as the plain symbol. There is no cooresponding unchecked symbol.
Plain Check Box with Check	☑	☐	Yes	Yes	Unicode "Check Box with Check" \u2611	Unicode "Ballot" \u2610	This is the plain symbol. Very simply drawn, but is widely supported.
Check Mark Emojis	✔	✘	Yes	Yes	Unicode "Heavy Check Mark" \u2714	Unicode "Heavy Ballot X" \u2718	There is no Github shortcut for these Unicode characters. These can be encoded with HTML Entity ✔ (✔) and ✘ (✘).
Colored Check Mark Emojis	✔	✘	Yes	No	<span class="checked">✔</span>	<span class="unchecked">✘</span>	Use CSS rules to color the checkmarks. These can be encoded with HTML Entity &#x2714; (✔) and &#x2718; (✘).
HTML Entity Code	✓	✗	Yes	Yes	HTML &check;	HTML &cross;
HTML Disabled Checkbox Element			Yes	Does not render	<input type="checkbox" disabled checked>	<input type="checkbox" disabled>	HTML Disabled Checkbox. Since they are disabled, they appear greyed out. These do not render at all in Github Markdown.
HTML Read-Only Checkbox Element			Yes	Does not render	<input type="checkbox" readonly tabindex=-1 checked>	<input type="checkbox" readonly tabindex=-1>	HTML Read-only Checkbox. Using CSS and tabindex=-1 to make them not modifiable. These do not render at all in Github Markdown.
Markdown list in HTML List Element			No	Clickable in Safari	<ul><li>- [x] </li></ul>	<ul><li>- [ ] </li></ul>	Using Markdown checkmark list in HTML element. If the <ul></ul> code is omitted, the checkmark will overlap the column edge of the table in Chrome and Firefox. In Safari, this produces a button that is clickable once. Renders as a bullet in VS Code. Does not work in the "Preview" pane of Github, but does work in normal rendering.

Links for further reading:

• https://emojipedia.org/
• https://github.github.com/gfm/
• https://gist.github.com/rxaviers/7360908
• https://www.programmingbasic.com/create-checkbox-inside-markdown-table-github
• https://stackoverflow.com/questions/47344571/how-to-draw-checkbox-or-tick-mark-in-github-markdown-table
• https://launchhubstudio.com/blog/comparison-table-html-css
• https://gist.github.com/seanh/13a93686bf4c2cb16e658b3cf96807f2

Side Note: Checkboxes in VS Code Markdown

Using the normal Markdown syntax, VS Code does not inherently support checkboxes in lists.

 - [x] checked
 - [ ] not checked

This can be enabled by a few different Markdown extensions

• https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

  • Adds non-clickable checkboxes.
  • Also adds a other useful features, such as Markdown formatting and table of contents.

• https://marketplace.visualstudio.com/items?itemName=bierner.markdown-checkbox

  • Adds clickable checkboxes.

This is awesome!