Coda Pack Markup Examples

Explore

Markup Examples in Coda Packs

Parsing parameters

Markdown Examples

HTML Examples

Parsing Examples

Parsing Examples

Format

Style

Format

Variant

Source

Markup

Text Source

Canvas Source

Status

Notes

Refresh Pack column(s)

Formatting

Markdown

Bold

bold

**bold**

bold

Render

HTML

Bold

bold

bold

Render

Markdown

Italics

italics

*italics*

italics

Render

HTML

Italics

italics

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

italics

Render

Markdown

Underline

underline

Not supported

Markdown doesn’t have a standard way to express underline.

Render

HTML

Underline

underline

<span style="text-decoration: underline;">underline</span>

underline

Render

Markdown

Strikethrough

strikethrough

~~strikethrough~~

strikethrough

Render

HTML

Strikethrough

strikethrough

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

strikethrough

Render

Link

Markdown

Basic link

⁠

link⁠

⁠

[link](https://example.com)

⁠

link

⁠

Render

Markdown

Link to email

⁠

link to email⁠

⁠

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

⁠

link to email

⁠

Render

HTML

Basic link

⁠

link⁠

⁠

⁠

link

⁠

Render

HTML

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

Markdown

Image

⁠

![image.png](https://codahosted.io/docs/Yh3vyeakVr/blobs/bl-hio0OxCzxy/5d54c120c9bf9da2e66a5e18fa8f1b84b1b18d970f640a8f280aeed5fc0e71d3a5c73e0dc86a34454f32a2d69a68027a29bebeb602ccc25fd829b09ab264eec03601c0f7e8551f18f2b1ae748fc9e2e1468613396dd1f0cc888f0edcddee5efc5cd8df66)

⁠

⁠

Warning

The alt text isn’t preserved.

Render

Markdown

Image in canvas

⁠

Bug

Images in canvases (columns, pages) are lost.

Render

Markdown

File in canvas

⁠

invoicesample.pdf

202.7 kB

⁠

invoicesample.pdf

202.7 kB

⁠

Bug

Files in canvases (columns, pages) are lost.

Render

HTML

Image

⁠

⁠

Render

Markdown

File

⁠

invoicesample.pdf⁠

⁠

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

⁠

invoicesample.pdf

⁠

Bug

Files are turned into images.

Render

HTML

File

⁠

invoicesample.pdf⁠

⁠

⁠

invoicesample.pdf

⁠

Bug

Files are turned into <img> tags.

Render

Lists

Markdown

Ordered list

foo

bar

1. foo 2. bar

foo

bar

Render

HTML

Ordered list

foo

bar

foo

bar

Render

Markdown

Unorded list

foo

bar

- foo - bar

foo

bar

Render

HTML

Unorded list

foo

bar

foo

bar

Render

Markdown

Unchecked

unchecked

checked

- [ ] unchecked - [x] checked

unchecked

checked

Render

HTML

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

Markdown

Collapsible list

One

Two

>> One >> Two

One

Two

Bug

Incorrectly converted to block quotes.

Render

HTML

Collapsible list

One

Two

One

Two

Render

Markdown

Nested list

One

Two

Three

Four

1. One 1. Two 2. Three 2. Four

One

Two

Three

Four

Render

HTML

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

Markdown

Inline code

Use the foo() method

Use the `foo()` method

Use the foo() method

Render

HTML

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

Markdown

Code block

// This is code

foo();

``` // This is code foo(); ```

// This is code

foo();

Render

Markdown

Code block with formatting

// This is code

foo();

``` // This is **code** foo(); ```

// This is code

foo();

Bug

The text formatting in the code block is preserved with markdown syntax, which breaks the code.

Render

HTML

Code block

// This is code

foo();

// This is code

foo();

Render

HTML

Code block with formatting

// This is code

foo();

// This is code

foo();

Render

Horizontal rule

Markdown

This

⁠

That

This

That

This

⁠

That

Bug

The horizontal rule is lost.

Render

HTML

This

⁠

That

This

⁠

That

Render

Headings

Markdown

Heading 1

# Heading 1

Heading 1

Render

HTML

Heading 1

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

Heading 1

Render

Markdown

Heading 2

## Heading 2

Heading 2

Render

HTML

Heading 2

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

Heading 2

Render

Markdown

Heading 3

### Heading 3

Heading 3

Render

HTML

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

Markdown

Some text

More text

Some text More text

Render

HTML

Some text

More text

Some text More text

Bug

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

Render

Block quotes

Markdown

Single line

Quote here

> Quote here

Quote here

Render

Markdown

Multiple lines

Multiple

Lines

> Multiple > Lines

Multiple

Lines

Render

Markdown

Blank line

Includes

a blank line

> Includes > > a blank line

Includes

a blank line

Render

HTML

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

HTML

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

HTML

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

Warning

The empty line includes a <br> as content.

Render

Pull quote

Markdown

“This rules!”

" “This rules!”

“This rules!”

Bug

Markdown doesn’t have a pull quote syntax.

An extra leading quote is inserted.

Render

HTML

“This rules!”

<span>“This rules!”</span>

“This rules!”

Warning

Converted to plain text.

Render

Escaping markup

Markdown

In rich text

This is **cool**

This **is** **cool**

This is **cool**

Bug

Markdown markup in the source text isn’t encoded.

Render

Markdown

In plain text

This is **cool**

Bug

Markdown markup in the source text isn’t encoded.

Render

HTML

In rich text

This is <b>cool</b>

This is <b>cool</b>

Render

HTML

In plain text

This is <b>cool</b>

Bug

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

Render

Colors

Markdown

Text color

Blue

Not supported

Markdown doesn’t support color.

Render

HTML

Text color

Blue

Blue

Render

Markdown

Background color

Blue background

Not supported

Markdown doesn’t support color.

Render

HTML

Background color

Blue background

<span style="background-color: rgb(221, 237, 253);">Blue background</span>

Blue background

Render

Button

Markdown

⁠

Open hyperlink

⁠

Open hyperlink

⁠

Open hyperlink

⁠

Warning

The button label is displayed as plain text.

Render

HTML

⁠

Open hyperlink

⁠

<span style="display: inline-block;">Open hyperlink</span>

⁠

Open hyperlink

⁠

Warning

The button label is returned as plain text.

Render

Columns

Markdown

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Bug

Content in columns is lost.

Render

HTML

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

Markdown

Text columns

⁠

## Text columns | Text | Link | | --- | --- | | Apple | https://example.com |

Text columns

⁠

Warning

Edits to the table contents doesn’t cause the formula to recalculate.

Render

HTML

Text columns

Text columns 2

⁠

<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=""AlwaysShow""><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="{"display":"IconOnly","type":"link"}">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 2

⁠

Render

Markdown

Text columns w/ rich text

Rich text columns

⁠

## 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~~ | | | | |

Rich text columns

⁠

Not supported

Some formatting is retained, but most is lost and some is serialized incorrectly.

Render

HTML

Text columns w/ rich text

Rich text columns 2

⁠

<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=""AlwaysShow""><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>

Rich text columns 2

⁠

Render

Markdown

Number columns

⁠

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

Number columns

⁠

Render

HTML

Number columns

Number columns 2

⁠

<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=""AlwaysShow""><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="{"precision":22,"type":"num"}">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="{"precision":22,"type":"per"}">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="{"code":"USD","type":"curr"}">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="{"maximum":{"type":1,"value":100},"minimum":{"type":1,"value":0},"step":{"type":1,"value":1},"type":"slider"}">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="{"color":{"colorId":"Blue","type":"SolidColor"},"displayType":"Progress","maximum":{"type":1,"value":100},"minimum":{"type":1,"value":0},"step":{"type":1,"value":1},"type":"slider"}">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="{"iconSet":"star","maximum":5,"type":"scale"}">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>

Number columns 2

⁠

Render

Markdown

Date columns

⁠

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

Date columns

⁠

Render

HTML

Date columns

Date columns 2

⁠

<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=""AlwaysShow""><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="{"type":"dp"}">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="{"timeFormat":2,"type":"time"}">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="{"dateFormat":1,"timeFormat":2,"type":"dt"}">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="{"precision":4,"type":"dur"}">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>

Date columns 2

⁠

Render

Markdown

Boolean columns

⁠

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

Boolean columns

⁠

Render

HTML

Boolean columns

Boolean columns 2

⁠

<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=""AlwaysShow""><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="{"displayType":"Check","type":"check"}">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="{"displayType":"Toggle","type":"check"}">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>

Boolean columns 2

⁠

Render

Markdown

People columns

⁠

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

People columns

⁠

Render

HTML

People columns

People columns 2

⁠

<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=""AlwaysShow""><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="{"autocomplete":true,"display":"IconAndEmail","type":"email"}">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="{"imageIcon":"facebook-like","type":"reaction"}">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>

People columns 2

⁠

Render

Markdown

Button columns

⁠

## Button columns | Button | | --- | | model |

Button columns

⁠

Bug

The button is rendered as the string “model”.

Render

HTML

Button columns

Button columns 2

⁠

<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=""AlwaysShow""><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="{"actionBuilderOptions":{"hasDestination":false,"type":"Structured Builder"},"actionFormula":{"type":2,"value":"OpenRow(thisRow)"},"alertType":"All","color":"Blue","imageIcon":"resize-diagonal","text":{"type":3,"value":"Open row"},"type":"button"}">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>

Button columns 2

⁠

Render

Markdown

Media columns

⁠

## Media columns | Image | Image URL | File | | --- | --- | --- | | 1F600_color.png | https://static.thenounproject.com/png/151542-200.png | blogpost.docx |

Media columns

⁠

Warning

The file name, not URL, is rendered for image and file attachments.

Render

HTML

Media columns

Media columns 2

⁠

<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=""AlwaysShow""><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="{"shape":"original","showName":false,"size":"medium","type":"imageAttachments"}">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="{"height":{"type":1,"value":0},"style":"auto","type":"image","width":{"type":1,"value":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="{"showName":true,"type":"fileAttachments"}">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>

Media columns 2

⁠

Bug

The file is rendered in an <img> tag.

Render

Markdown

Dropdown columns

Table

⁠

## Table | Select list | Relation | | --- | --- | | Apple | Apple |

Table

⁠

Render

HTML

Dropdown columns

Table 2

⁠

<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=""AlwaysShow""><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="{"multiple":false,"type":"sl"}">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&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>

Table 2

⁠

Warning

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 ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.