Skip to content
Gallery
Coda Pack Markup Examples
Markup Examples in Coda Packs
Share
Explore
Parsing parameters

icon picker
HTML Examples

⁠
⁠
Hide outer wrapping <div>
Formatting
Bold
Source
Markup
<span style="font-weight: bold;">bold</span>
Italics
Source
Markup
<span style="font-style: italic;">italics</span>
Underline
Source
Markup
<span style="text-decoration: underline;">underline</span>
Strikethrough
Source
Markup
<span style="text-decoration: line-through;">strikethrough</span>
Link
Basic link
Source
Markup
<span style="display: inline-block;"><a href="https://example.com">link</a></span>
Link to email
Source
Markup
<span style="display: inline-block;"><a href="mailto:fake@example.com">link to email</a></span>
Media
Image
Source
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
Bug
Source
Markup
<span style="display: inline-block;"><img src="https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-Tvd0VL24g9/9f8ddb3d7cccc087ea19e513272f8b3bbb88f64687647c4d3605f50a110067301064d44b2e08d44406095561e7f3359af42628647adb8b8a649340d0a3f71757073145801fd685229622c5067619f2ca1cf437e93a72fb9a8c261a129c476d490fc9e04c" alt=""></span>
Notes
Horizontal rule
Horizontal rule
Source
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
Bug
Source
Markup
Some text More text
Notes
Block quotes
Single line
Source
Markup
<blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Quote here</span></blockquote>
Nested
Source
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
Warning
Source
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
Columns
Columns
Source
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
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
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
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
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
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
Markup
<span>Use the </span><span style="font-family: monospace;">foo()</span><span> method</span>
Code block
Source
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>
Code block with formatting
Source
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
Markup
<h2 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Heading 2</span></h2>
Heading 3
Source
Markup
<h3 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Heading 3</span></h3>
Pull quote
Pull quote
Status
Warning
Source
Markup
<span>“This rules!”</span>
Notes
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;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
Bug
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
Dropdown columns
Status
Warning
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_tuljT/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
Button
Button
Status
Warning
Source
Markup
<span style="display: inline-block;">Open hyperlink</span>
Notes
Colors
Text color
Source
Markup
<span style="color: rgb(15, 88, 189);">Blue</span>
Background color
Source
Markup
<span style="background-color: rgb(221, 237, 253);">Blue background</span>
Escaping markup
In rich text
Source
Markup
<span>This </span><span style="font-weight: bold;">is</span><span> &lt;b&gt;cool&lt;/b&gt;</span>
In plain text
Status
Bug
Source
Markup
This is <b>cool</b>
Notes
⁠
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.