# Custom HTML Tables with Markdown Viz

**URL:** <https://community.omni.co/t/custom-html-tables-with-markdown-viz/226>\
**Category:** Workbooks\
**Tags:** visualization\
**Created:** [February 1, 2025, 10:03pm UTC](https://community.omni.co/t/custom-html-tables-with-markdown-viz/226 "2025-02-01T22:03:49Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![russ](https://yyz2.discourse-cdn.com/flex004/user_avatar/community.omni.co/russ/32/296_2.png) [@russ](https://community.omni.co/u/russ)\
**Post date:** [February 1, 2025, 10:03pm UTC](https://community.omni.co/t/custom-html-tables-with-markdown-viz/226/1 "2025-02-01T22:03:49Z")

</div>

**Turn this:**

 ![image](https://canada1.discourse-cdn.com/flex004/uploads/omni/original/1X/b1dc54cc21c45a35bc1b55ec07b6869bfa5acc34.png)

**Into this: (with full customization)**

 ![image](https://canada1.discourse-cdn.com/flex004/uploads/omni/original/1X/75398c4e2a38741de16b6463ee1b5c2ce03fcf76.png)

https://www.loom.com/embed/a24ed879cea1449ebb228ceecbc66e75?sid=16d6cea4-91f4-45f2-968b-c0ad0268483a

# Step 1) Select the Markdown Viz

 ![Screenshot 2025-02-01 at 1.50.49 PM](https://canada1.discourse-cdn.com/flex004/uploads/omni/original/1X/4ff62afd9e3a37ef07549e1ef674f10ad71da057.png)

# Step 2) Apply custom HTML Table Code and customize

 ![Screenshot 2025-02-01 at 1.52.19 PM](https://canada1.discourse-cdn.com/flex004/uploads/omni/original/1X/f363cb12a0a87c8a1b48225ac9ee13ee21fa1047.png)

```html
<style>
h3 {
  margin-block-start: 0;
}
.comp-table {
  width: 100%;
    border-collapse: collapse;
    /* margin: 25px 0; */
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.comp-table td {
    white-space: wrap;
  vertical-align: center;
}
  .comp-table thead tr {
    background-color: #b0ddae;
    color: #ffffff;
    text-align: left;
}
  .comp-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.comp-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.comp-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}
</style>
<table class="comp-table">
  <thead>
    <th>{{fields.account.name.view_label}}</th>
    <th>{{fields.opportunity.total_arr.label}}</th>
  </thead>
  <tbody>
    {{#result}}
    <tr>
    <td>
      <p style="font-size:1.5em;">{{account.name.value}}</p><br/>
      <p style="font-size:.8em;">{{account.segment.value}}</p></td>
    <td>{{opportunity.total_arr.value}}</td>
    </tr>
    {{/result}}
  </tbody>
</table>

```

# Key points:

- Notice the tags:  
`{{#result}} ... {{/result}}`  
_That’s allowing us to loop over the results_

- In the header, we’re referring to labels:  
`<th>{{fields.account.name.view_label}}</th>`  
_That’s allowing us to get metadata like field names_

- In the table cells, we’re able to get data:  
`<td>{{opportunity.total_arr.value}}</td>`  
These values come with Omni’s links and drilling _intact_  

- Alternatively, if we want to remove drilling and links we can use `value_static`:  
`<td>{{opportunity.total_arr.value_static}}</td>`  
and no links will be rendered