Skip to content
Coda Pack Markup Examples
Markup Examples in Coda Packs
Share
Explore

HTML Examples

⁠
⁠
Hide outer wrapping <div>
Formatting
Bold
Source
bold
Markup
<span style="font-weight: bold;">bold</span>
Italics
Source
italics
Markup
<span style="font-style: italic;">italics</span>
Underline
Source
underline
Markup
<span style="text-decoration: underline;">underline</span>
Strikethrough
Source
strikethrough
Markup
<span style="text-decoration: line-through;">strikethrough</span>
Link
Basic link
Source
⁠
link
⁠
⁠
Markup
<span style="display: inline-block;"><a href="https://example.com">link</a></span>
Link to email
Source
⁠
link to email
⁠
⁠
Markup
<span style="display: inline-block;"><a href="mailto:fake@example.com">link to email</a></span>
Media
Image
Source
⁠
A bear
⁠
⁠
Markup
<span style="display: inline-block;"><img src="https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-Hh0nFAq8HE/27ac8d353837b9b3624ed22074be2037731a172e25598e874ed2971f962fd8db40e15e37bf1f6d8c65223da945823c8c98fbab1c36bbebeaa0b99c2df46b7aa99dc3911da1a22a25f23451ffb34e1a2efbd921069fbd64c701673be336f868e5f9278a33" alt="A bear" height="43" width="43"></span>
File
Status
Source
⁠
invoicesample.pdf
⁠
⁠
Markup
<span style="display: inline-block;"><img src="https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-Tvd0VL24g9/9f8ddb3d7cccc087ea19e513272f8b3bbb88f64687647c4d3605f50a110067301064d44b2e08d44406095561e7f3359af42628647adb8b8a649340d0a3f71757073145801fd685229622c5067619f2ca1cf437e93a72fb9a8c261a129c476d490fc9e04c" alt=""></span>
Notes
Files are turned into <img> tags.
Horizontal rule
Horizontal rule
Source
This
⁠
That
Markup
<span>This</span></div><hr><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>That</span>
Line breaks
Line breaks
Status
Source
Some text
More text
Markup
Some text
More text
Notes
If the source text doesn’t have any formatting then the value is passed as plain text instead of HTML.
Block quotes
Single line
Source
Quote here
Markup
<blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Quote here</span></blockquote>
Nested
Source
Multiple
Lines
Markup
<blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Multiple</span></blockquote><blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Lines</span></blockquote>
Blank line
Status
Source
Includes

a blank line
Markup
<blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Includes</span></blockquote><blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><br></blockquote><blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>a blank line</span></blockquote>
Notes
The empty line includes a <br> as content.
Columns
Columns
Source
Column 1
Column 2
Markup
<span>Column 1</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Column 2</span>
Lists
Ordered list
Source
foo
bar
Markup
<ol style="margin-block-start: 1em; margin-block-end: 1em;"><li style="text-align: left; list-style-type: decimal; margin-top: 0.5em; margin-bottom: 0.5em;"><span>foo</span></li><li style="text-align: left; list-style-type: decimal; margin-top: 0.5em; margin-bottom: 0.5em;"><span>bar</span></li></ol>
Unorded list
Source
foo
bar
Markup
<ul style="margin-block-start: 1em; margin-block-end: 1em;"><li style="text-align: left; list-style-type: disc; margin-top: 0.5em; margin-bottom: 0.5em;"><span>foo</span></li><li style="text-align: left; list-style-type: disc; margin-top: 0.5em; margin-bottom: 0.5em;"><span>bar</span></li></ul>
Unchecked
Source
unchecked
checked
Markup
<ul style="margin-block-start: 1em; margin-block-end: 1em;"><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><input type="checkbox" readonly="" style="width: 2em;"><span>unchecked</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><input type="checkbox" readonly="" style="width: 2em;" checked="true"><span>checked</span></div></ul>
Collapsible list
Source
One
Two

Markup
<ul style="margin-block-start: 1em; margin-block-end: 1em;"><li style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>One</span></li><li style="list-style-type: none; display: block;"><ul style="margin-block-start: 0; margin-block-end: 0;"><li style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Two</span></li></ul></li></ul><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><br></div>
Nested list
Source
One
Two
Three
Markup
<ol style="margin-block-start: 1em; margin-block-end: 1em;"><li style="text-align: left; list-style-type: decimal; margin-top: 0.5em; margin-bottom: 0.5em;"><span>One</span></li><li style="list-style-type: none; display: block;"><ol style="margin-block-start: 0; margin-block-end: 0;"><li style="text-align: left; list-style-type: lower-alpha; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Two</span></li><li style="text-align: left; list-style-type: lower-alpha; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Three</span></li></ol></li><li style="text-align: left; list-style-type: decimal; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Four</span></li></ol>
Code
Inline code
Source
Use the foo() method
Markup
<span>Use the </span><span style="font-family: monospace;">foo()</span><span> method</span>
Code block
Source
// This is code
foo();
Markup
<pre><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>// This is code</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>foo();</span></div></pre>
Inline code with formatting
Source
Use the foo(bar) method
Markup
<span>Use the </span><span style="font-family: monospace;">foo(</span><span style="font-family: monospace; font-weight: bold;">bar</span><span style="font-family: monospace;">)</span><span> method</span>
Code block with formatting
Source
// This is code
foo();
Markup
<pre><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>// This is </span><span style="font-weight: bold;">code</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>foo();</span></div></pre>
Headings
Heading 1
Source

Heading 1

Markup
<h1 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Heading 1</span></h1>
Heading 2
Source

Heading 2

Markup
<h2 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Heading 2</span></h2>
Heading 3
Source

Heading 3

Markup
<h3 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Heading 3</span></h3>
Pull quote
Pull quote
Status
Source
“This rules!”
Markup
<span>“This rules!”</span>
Notes
Converted to plain text.

Table
Text columns
Source
Text columns 2
⁠
Markup
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-OXyYmJig5Z" data-coda-display-column-id="c-ENfUpq8gZn" data-coda-view-config-hiddenuimask="64" data-coda-view-config-inheritsdefaultformat="false" data-coda-view-config-tablesearch="&quot;AlwaysShow&quot;"><caption style="text-align: left;"><h2>Text columns 2</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-ENfUpq8gZn" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Text</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-1SfQd4hga_" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;display&quot;:&quot;IconOnly&quot;,&quot;type&quot;:&quot;link&quot;}">Link</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">Apple</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><a href="https://example.com">https://example.com</a></td></tr></tbody></table></div>
Text columns w/ rich text
Source
Rich text columns 2
⁠

Markup
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-WtBrMnA9LR" data-coda-display-column-id="c-ENfUpq8gZn" data-coda-view-config-hiddenuimask="64" data-coda-view-config-inheritsdefaultformat="false" data-coda-view-config-tablesearch="&quot;AlwaysShow&quot;"><caption style="text-align: left;"><h2>Rich text columns 2</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-ENfUpq8gZn" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Formatting</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-st6jFe7C8d" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Headings</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-AvJiVxeC5z" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Lists</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-V74Ew5qK9U" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Code</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-eJ5H2bB8vF" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Quotes</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="font-weight: bold;">Bold</span></div></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><h1 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Heading 1</span></h1></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><ol style="margin-block-start: 1em; margin-block-end: 1em;"><li style="text-align: left; list-style-type: decimal; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Ordered</span></li><li style="text-align: left; list-style-type: decimal; margin-top: 0.5em; margin-bottom: 0.5em;"><span>List</span></li></ol></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="font-family: monospace;">Inline code</span></div></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Block quote</span></blockquote></td></tr><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="font-style: italic;">Italics</span></div></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><h2 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Heading 2</span></h2></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><ul style="margin-block-start: 1em; margin-block-end: 1em;"><li style="text-align: left; list-style-type: disc; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Unordered</span></li><li style="text-align: left; list-style-type: disc; margin-top: 0.5em; margin-bottom: 0.5em;"><span>List</span></li></ul></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><pre><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Code block</span></div></pre></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Pull quote</span></div></td></tr><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="text-decoration: underline;">Underline</span></div></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><h3 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Heading 3</span></h3></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><ul style="margin-block-start: 1em; margin-block-end: 1em;"><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><input type="checkbox" readonly="" style="width: 2em;"><span>Unchecked</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><input type="checkbox" readonly="" style="width: 2em;" checked="true"><span>Checked</span></div></ul></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><pre><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Formatted </span><span style="font-weight: bold;">code</span><span> block</span></div></pre></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"></td></tr><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="text-decoration: line-through;">Strikethrough</span></div></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"></td></tr></tbody></table></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><br></div>
Number columns
Source
Number columns 2
⁠

Markup
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-ub2eJ7ONcZ" data-coda-display-column-id="c-Jzfr4h1qR5" data-coda-view-config-hiddenuimask="64" data-coda-view-config-inheritsdefaultformat="false" data-coda-view-config-tablesearch="&quot;AlwaysShow&quot;"><caption style="text-align: left;"><h2>Number columns 2</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-Jzfr4h1qR5" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;precision&quot;:22,&quot;type&quot;:&quot;num&quot;}">Number</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-aqCbhVFlil" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;precision&quot;:22,&quot;type&quot;:&quot;per&quot;}">Percent</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-BkK29XAG13" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;code&quot;:&quot;USD&quot;,&quot;type&quot;:&quot;curr&quot;}">Currency</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-w93mdA5u8r" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;maximum&quot;:{&quot;type&quot;:1,&quot;value&quot;:100},&quot;minimum&quot;:{&quot;type&quot;:1,&quot;value&quot;:0},&quot;step&quot;:{&quot;type&quot;:1,&quot;value&quot;:1},&quot;type&quot;:&quot;slider&quot;}">Slider</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-unBvfIF1_O" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;color&quot;:{&quot;colorId&quot;:&quot;Blue&quot;,&quot;type&quot;:&quot;SolidColor&quot;},&quot;displayType&quot;:&quot;Progress&quot;,&quot;maximum&quot;:{&quot;type&quot;:1,&quot;value&quot;:100},&quot;minimum&quot;:{&quot;type&quot;:1,&quot;value&quot;:0},&quot;step&quot;:{&quot;type&quot;:1,&quot;value&quot;:1},&quot;type&quot;:&quot;slider&quot;}">Progress</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-FEl0sLIKQP" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;iconSet&quot;:&quot;star&quot;,&quot;maximum&quot;:5,&quot;type&quot;:&quot;scale&quot;}">Scale</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">50</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">50%</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">$50.00</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">50</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">50</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">3</td></tr></tbody></table></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><br></div>
Date columns
Source
Date columns 2
⁠

Markup
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-QK_r_0inbi" data-coda-display-column-id="c-tJouf9x0s-" data-coda-view-config-hiddenuimask="64" data-coda-view-config-inheritsdefaultformat="false" data-coda-view-config-tablesearch="&quot;AlwaysShow&quot;"><caption style="text-align: left;"><h2>Date columns 2</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-tJouf9x0s-" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;format&quot;:1,&quot;type&quot;:&quot;dp&quot;}">Date</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-tg1jpxA4DR" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;timeFormat&quot;:2,&quot;type&quot;:&quot;time&quot;}">Time</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-ROaD_ZuPdA" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;dateFormat&quot;:1,&quot;timeFormat&quot;:2,&quot;type&quot;:&quot;dt&quot;}">Date and time</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-O92fSisD6v" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;precision&quot;:4,&quot;type&quot;:&quot;dur&quot;}">Duration</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">10/20/2023</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">9:00 AM</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">10/20/2023, 7:00 PM</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">10 mins</td></tr></tbody></table></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><br></div>
Boolean columns
Source
Boolean columns 2
⁠

Markup
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-NfUROMfXOj" data-coda-display-column-id="c-SET31GKImU" data-coda-view-config-hiddenuimask="64" data-coda-view-config-inheritsdefaultformat="false" data-coda-view-config-tablesearch="&quot;AlwaysShow&quot;"><caption style="text-align: left;"><h2>Boolean columns 2</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-SET31GKImU" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;displayType&quot;:&quot;Check&quot;,&quot;type&quot;:&quot;check&quot;}">Checkbox</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-bUc1gOOXSD" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;displayType&quot;:&quot;Toggle&quot;,&quot;type&quot;:&quot;check&quot;}">Toggle</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">false</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">true</td></tr></tbody></table></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><br></div>
People columns
Source
People columns 2
⁠

Markup
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-UzkWr1o4Ho" data-coda-display-column-id="c-RvlzXuCFDg" data-coda-view-config-hiddenuimask="64" data-coda-view-config-inheritsdefaultformat="false" data-coda-view-config-tablesearch="&quot;AlwaysShow&quot;"><caption style="text-align: left;"><h2>People columns 2</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-RvlzXuCFDg" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">People</th><th style="width: 187px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-NbDBSxXV0C" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;autocomplete&quot;:true,&quot;display&quot;:&quot;IconAndEmail&quot;,&quot;type&quot;:&quot;email&quot;}">Email</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-FgkdMfEuLH" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;imageIcon&quot;:&quot;facebook-like&quot;,&quot;type&quot;:&quot;reaction&quot;}">Thumbs up</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><a href="mailto:koleda.eric@gmail.com">Eric Koleda</a></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><a href="foo@example.com">foo@example.com</a></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><span><a href="mailto:koleda.eric@gmail.com">Eric Koleda</a></span></td></tr></tbody></table></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><br></div>
Button columns
Source
Button columns 2
⁠
Markup
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-CPBC4eEyqx" data-coda-display-column-id="c-0bspVUNzPd" data-coda-view-config-hiddenuimask="64" data-coda-view-config-inheritsdefaultformat="false" data-coda-view-config-tablesearch="&quot;AlwaysShow&quot;"><caption style="text-align: left;"><h2>Button columns 2</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-0bspVUNzPd" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;actionBuilderOptions&quot;:{&quot;hasDestination&quot;:false,&quot;type&quot;:&quot;Structured Builder&quot;},&quot;actionFormula&quot;:{&quot;type&quot;:2,&quot;value&quot;:&quot;OpenRow(thisRow)&quot;},&quot;alertType&quot;:&quot;All&quot;,&quot;color&quot;:&quot;Blue&quot;,&quot;imageIcon&quot;:&quot;resize-diagonal&quot;,&quot;text&quot;:{&quot;type&quot;:3,&quot;value&quot;:&quot;Open row&quot;},&quot;type&quot;:&quot;button&quot;}">Button</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">Open row</td></tr></tbody></table></div>
Media columns
Status
Source
Media columns 2
⁠

Markup
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-3MdgQJvT0z" data-coda-display-column-id="c-UVydru8xyC" data-coda-view-config-hiddenuimask="64" data-coda-view-config-inheritsdefaultformat="false" data-coda-view-config-tablesearch="&quot;AlwaysShow&quot;"><caption style="text-align: left;"><h2>Media columns 2</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-UVydru8xyC" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;shape&quot;:&quot;original&quot;,&quot;showName&quot;:false,&quot;size&quot;:&quot;medium&quot;,&quot;type&quot;:&quot;imageAttachments&quot;}">Image</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-HvA6fHkelt" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;height&quot;:{&quot;type&quot;:1,&quot;value&quot;:0},&quot;style&quot;:&quot;auto&quot;,&quot;type&quot;:&quot;image&quot;,&quot;width&quot;:{&quot;type&quot;:1,&quot;value&quot;:50}}">Image URL</th><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-Myhb52PQoV" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;showName&quot;:true,&quot;type&quot;:&quot;fileAttachments&quot;}">File</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><span><img src="https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-fGmaY_X3mP/073ef97ea564b90cf95be21ac13a574b36e334931c5baf9245a2036f4ad54691ca24d24106b34a2173b7f2cacb2bbf425ab5e134a15f7a6e762975904bd55a272f8e43f6d3bde5a0db5c3774644a34ac2c41fa9d2cc9d19ba4be246792f0a1b2633bbec6" alt="1F600_color.png" height="43" width="43"></span></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><img src="https://static.thenounproject.com/png/151542-200.png" width="50"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><span><img src="https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-RlFm5DXOkm/45caff0eacc5bff04f7e3aaa424eccb54c78634302a0eb823ff39a1b977b018f43ba5889805f20fdf6af7533f2c0f3050c6ef89407078154412d313aef8b69d919474fb9c365e0edd89a1d2d44d3b19892378bb934a7117c1c534169f8af6d3539f9ec35" alt=""></span></td></tr></tbody></table></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><br></div>
Notes
The file is rendered in an <img> tag.
Dropdown columns
Status
Source
Table 2
⁠

Markup
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-Ne9m9X-o3L" data-coda-display-column-id="c-oFtFRHzU3q" data-coda-view-config-hiddenuimask="64" data-coda-view-config-inheritsdefaultformat="false" data-coda-view-config-tablesearch="&quot;AlwaysShow&quot;"><caption style="text-align: left;"><h2>Table 2</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-oFtFRHzU3q" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{&quot;multiple&quot;:false,&quot;type&quot;:&quot;sl&quot;}">Select list</th><th style="width: 191px; text-align: left; border-top: none; border-right: none; border-bottom: 1px solid #e0e0e0; border-left: none;" data-coda-column-id="c-mzqyaXHr1H" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Relation</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;">Apple</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;height:36px;"><span><a href="https://coda.io/d/_dYh3vyeakVr#Text-columns_tuEDkljT/r1&amp;view=modal">Apple</a></span></td></tr></tbody></table></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><br></div>
Notes
Relation values link back to the source doc, which may not always be desirable.
Button
Button
Status
Source
⁠
Open hyperlink
⁠
⁠
Markup
<span style="display: inline-block;">Open hyperlink</span>
Notes
The button label is returned as plain text.
Colors
Text color
Source
Blue
Markup
<span style="color: rgb(15, 88, 189);">Blue</span>
Background color
Source
Blue background
Markup
<span style="background-color: rgb(221, 237, 253);">Blue background</span>
Escaping markup
In rich text
Source
This is <b>cool</b>
Markup
<span>This </span><span style="font-weight: bold;">is</span><span> &lt;b&gt;cool&lt;/b&gt;</span>
In plain text
Status
Source
This is <b>cool</b>
Markup
This is <b>cool</b>
Notes
If the source text doesn’t have any formatting then the value is passed as plain text instead of HTML.
⁠
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.