Skip to content
Coda Pack Markup Examples
Markup Examples in Coda Packs
Share
Explore
Parsing Examples
Search
Style
Format
Variant
Source
Markup
Text Source
Canvas Source
Status
Notes
Refresh Pack column(s)
Formatting
Bold
bold
**bold**
bold


Render
Bold
bold
<span style="font-weight: bold;">bold</span>
bold


Render
Italics
italics
*italics*
italics


Render
Italics
italics
<span style="font-style: italic;">italics</span>
italics


Render
Underline
underline
underline
underline

Markdown doesn’t have a standard way to express underline.
Render
Underline
underline
<span style="text-decoration: underline;">underline</span>
underline


Render
Strikethrough
strikethrough
~~strikethrough~~
strikethrough


Render
Strikethrough
strikethrough
<span style="text-decoration: line-through;">strikethrough</span>
strikethrough


Render
Link
Basic link
⁠
link
⁠
⁠
[link](https://example.com)
⁠
link
⁠
⁠


Render
Link to email
⁠
link to email
⁠
⁠
[link to email](mailto:fake@example.com)
⁠
link to email
⁠
⁠


Render
Basic link
⁠
link
⁠
⁠
<span style="display: inline-block;"><a href="https://example.com">link</a></span>
⁠
link
⁠
⁠


Render
Link to email
⁠
link to email
⁠
⁠
<span style="display: inline-block;"><a href="mailto:fake@example.com">link to email</a></span>
⁠
link to email
⁠
⁠


Render
Media
Image
⁠
A bear
⁠
⁠
![image.png](https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-hio0OxCzxy/5d54c120c9bf9da2e66a5e18fa8f1b84b1b18d970f640a8f280aeed5fc0e71d3a5c73e0dc86a34454f32a2d69a68027a29bebeb602ccc25fd829b09ab264eec03601c0f7e8551f18f2b1ae748fc9e2e1468613396dd1f0cc888f0edcddee5efc5cd8df66)
⁠
A bear
⁠
⁠

The alt text isn’t preserved.
Render
Image in canvas
⁠
A bear
⁠
⁠
​
⁠
A bear
⁠
⁠
Images in canvases (columns, pages) are lost.
Render
File in canvas
⁠
invoicesample.pdf
202.7 kB
⁠
⁠
​
⁠
invoicesample.pdf
202.7 kB
⁠
⁠
Files in canvases (columns, pages) are lost.
Render
Image
⁠
A bear
⁠
⁠
<span style="display: inline-block;"><img src="https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-Hh0nFAq8HE/27ac8d353837b9b3624ed22074be2037731a172e25598e874ed2971f962fd8db40e15e37bf1f6d8c65223da945823c8c98fbab1c36bbebeaa0b99c2df46b7aa99dc3911da1a22a25f23451ffb34e1a2efbd921069fbd64c701673be336f868e5f9278a33" alt="A bear" height="43" width="43"></span>
⁠
A bear
⁠
⁠


Render
File
⁠
invoicesample.pdf
⁠
⁠
![invoicesample.pdf](https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-Tvd0VL24g9/9f8ddb3d7cccc087ea19e513272f8b3bbb88f64687647c4d3605f50a110067301064d44b2e08d44406095561e7f3359af42628647adb8b8a649340d0a3f71757073145801fd685229622c5067619f2ca1cf437e93a72fb9a8c261a129c476d490fc9e04c)
⁠
invoicesample.pdf
⁠
⁠

Files are turned into images.

Render
File
⁠
invoicesample.pdf
⁠
⁠
<span style="display: inline-block;"><img src="https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-Tvd0VL24g9/9f8ddb3d7cccc087ea19e513272f8b3bbb88f64687647c4d3605f50a110067301064d44b2e08d44406095561e7f3359af42628647adb8b8a649340d0a3f71757073145801fd685229622c5067619f2ca1cf437e93a72fb9a8c261a129c476d490fc9e04c" alt=""></span>
⁠
invoicesample.pdf
⁠
⁠

Files are turned into <img> tags.
Render
Lists
Ordered list
foo
bar
1. foo
2. bar
foo
bar


Render
Ordered list
foo
bar
<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>
foo
bar


Render
Unorded list
foo
bar
- foo
- bar
foo
bar


Render
Unorded list
foo
bar
<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>
foo
bar


Render
Unchecked
unchecked
checked
- [ ] unchecked
- [x] checked
unchecked
checked


Render
Unchecked
unchecked
checked
<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>
unchecked
checked


Render
Collapsible list
One
Two
>> One
>> Two
​
One
Two
Incorrectly converted to block quotes.
Render
Collapsible list
One
Two

<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>
​
One
Two


Render
Nested list
One
Two
Three
Four
1. One
1. Two
2. Three
2. Four
One
Two
Three
Four


Render
Nested list
One
Two
Three
Four
<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>
One
Two
Three
Four


Render
Code
Inline code
Use the foo() method
Use the `foo()` method
Use the foo() method


Render
Inline code
Use the foo() method
<span>Use the </span><span style="font-family: monospace;">foo()</span><span> method</span>
Use the foo() method


Render
Code block
// This is code
foo();
```
// This is code
foo();
```
// This is code
foo();


Render
Code block
// This is code
foo();
<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>
// This is code
foo();


Render
Inline code with formatting
Use the foo(bar) method
Use the `foo(``**bar**``)` method
Use the foo(bar) method

The text formatting in the inline code is preserved with markdown syntax, which breaks the code. Additionally, the inline code is split into multiple segments, with no space inbetween.
Render
Inline code with formatting
Use the foo(bar) method
<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>
Use the foo(bar) method


Render
Code block with formatting
// This is code
foo();
```
// This is **code**
foo();
```
// This is code
foo();

The text formatting in the code block is preserved with markdown syntax, which breaks the code.
Render
Code block with formatting
// This is code
foo();
<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>
// This is code
foo();


Render
Inline code with backtick
Enter the value a`b
Enter the value `a`b`
Enter the value a`b

The code span is not escaped properly.
Render
Code block with triple backtick
a
```
b
```
a
```
b
```
a
```
b

The code block is not escaped properly.
Render
Horizontal rule
​
This
⁠
That
This

That
This
⁠
That

The horizontal rule is lost.
Render
​
This
⁠
That
<span>This</span></div><hr><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>That</span>
This
⁠
That


Render
Headings
Heading 1

Heading 1

# Heading 1

Heading 1



Render
Heading 1

Heading 1

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

Heading 1



Render
Heading 2

Heading 2

## Heading 2

Heading 2



Render
Heading 2

Heading 2

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

Heading 2



Render
Heading 3

Heading 3

### Heading 3

Heading 3



Render
Heading 3

Heading 3

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

Heading 3



Render
Line breaks
​
Some text
More text
Some text
More text
Some text
More text


Render
​
Some text
More text
Some text
More text
Some text
More text

If the source text doesn’t have any formatting then the value is passed as plain text instead of HTML.
Render
Block quotes
Single line
Quote here
> Quote here
Quote here


Render
Multiple lines
Multiple
Lines
> Multiple
> Lines
Multiple
Lines


Render
Blank line
Includes

a blank line
> Includes
>
> a blank line
Includes

a blank line


Render
Single line
Quote here
<blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Quote here</span></blockquote>
Quote here


Render
Nested
Multiple
Lines
<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>
Multiple
Lines


Render
Blank line
Includes

a blank line
<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>
Includes

a blank line

The empty line includes a <br> as content.
Render
Pull quote
​
“This rules!”
" “This rules!”
“This rules!”

Markdown doesn’t have a pull quote syntax.
An extra leading quote is inserted.
Render
​
“This rules!”
<span>“This rules!”</span>
“This rules!”

Converted to plain text.

Render
Escaping markup
In rich text
This is **cool**
This **is** **cool**
This is **cool**

Markdown markup in the source text isn’t encoded.
Render
In plain text
This is **cool**
This is **cool**
This is **cool**

Markdown markup in the source text isn’t encoded.
Render
In rich text
This is <b>cool</b>
<span>This </span><span style="font-weight: bold;">is</span><span> &lt;b&gt;cool&lt;/b&gt;</span>
This is <b>cool</b>


Render
In plain text
This is <b>cool</b>
This is <b>cool</b>
This is <b>cool</b>

If the source text doesn’t have any formatting then the value is passed as plain text instead of HTML.
Render
Colors
Text color
Blue
Blue
Blue

Markdown doesn’t support color.
Render
Text color
Blue
<span style="color: rgb(15, 88, 189);">Blue</span>
Blue


Render
Background color
Blue background
Blue background
Blue background

Markdown doesn’t support color.
Render
Background color
Blue background
<span style="background-color: rgb(221, 237, 253);">Blue background</span>
Blue background


Render
Button
​
Open hyperlink
​
The button label is displayed as plain text.
Render
​
<span style="display: inline-block;">Open hyperlink</span>
​
The button label is returned as plain text.
Render
Columns
​
Column 1
Column 2
Column 1
Column 2
​
Column 1
Column 2
The side-by-side nature of column is lost.
Render
​
Column 1
Column 2
<span>Column 1</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Column 2</span>
​
Column 1
Column 2

Render
Table
Text columns
## Text columns
| Text | Link |
| --- | --- |
| Apple | https://example.com |
​
​
Edits to the table contents doesn’t cause the formula to recalculate.
Render
Text columns
<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>
​

Render
Text columns w/ rich text
## Rich text columns | Formatting | Headings | Lists | Code | Quotes | | --- | --- | --- | --- | --- | | **Bold** | Heading 1 | Ordered<br/>List | `Inline code` | Block quote | | *Italics* | Heading 2 | Unordered<br/>List | ```<br/>Code block<br/>``` | Pull quote | | Underline | Heading 3 | Unchecked<br/>Checked | ```<br/>Formatted **code** block<br/>``` | | | ~~Strikethrough~~ | | | | |
​
Some formatting is retained, but most is lost and some is serialized incorrectly.

Render
Text columns w/ rich text
<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>
​

Render
Number columns
## Number columns | Number | Percent | Currency | Slider | Progress | Scale | | --- | --- | --- | --- | --- | --- | | 50 | 50% | $50.00 | 50 | 50 | 3 |
​

Render
Number columns
<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>
​

Render
Date columns
## Date columns
| Date | Time | Date and time | Duration |
| --- | --- | --- | --- |
| 10/20/2023 | 9:00 AM | 10/20/2023, 7:00 PM | 10 mins |
​
​

Render
Date columns
<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>
​

Render
Boolean columns
## Boolean columns
| Checkbox | Toggle |
| --- | --- |
| false | true |
​
​

Render
Boolean columns
<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>
​

Render
People columns
## People columns
| People | Email | Thumbs up |
| --- | --- | --- |
| Eric Koleda | foo@example.com | Eric Koleda |
​
​

Render
People columns
<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>
​

Render
Button columns
## Button columns
| Button |
| --- |
| model |
​
​
The button is rendered as the string “model”.
Render
Button columns
<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>
​

Render
Media columns
## Media columns | Image | Image URL | File | | --- | --- | --- | | 1F600_color.png | https://static.thenounproject.com/png/151542-200.png | blogpost.docx |
​
The file name, not URL, is rendered for image and file attachments.
Render
Media columns
<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>
​
The file is rendered in an <img> tag.
Render
Dropdown columns
## Table | Select list | Relation | | --- | --- | | Apple | Apple |
​

Render
Dropdown columns
<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>
​
Relation values link back to the source doc, which may not always be desirable.
Render
⁠

Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.