---
title: "HTML Table as a Data Source | Docs"
description: "There are various ways to use an HTML table element as a data source."
url: https://www.zinggrid.com/docs/data/html-table
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/data/html-table.md
mode: provenance
representation: markdown
origin_response_id: f0b98c8358a439fcf7aa63a4a5f0c401
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.667Z
version_nonce: 153d434dd1c46094098e521ebb47a9d2
generated_at_utc: 2026-10-31T17:55:32.762Z
response_nonce: e0c5939852366ac131140cb4ff04ffc1
```

# Retrieving HTML Table Data

In this guide, we'll walk you through how to use an HTML table element as a data source.

## Assigning Data to the Grid

If you want to populate your grid using data from an HTML table, there are three ways to do so.

One of the approaches is to add `[is="zing-grid"]` attribute to the `<table>` tag.

```html
<table is="zing-grid">
  <tr>
    <th>First</th>
    <th>Last</th>
    <th>Number</th>
  </tr>
  <tr>
    <td><b>Maria</b></td>
    <td>John</td>
    <td>123</td>
  </tr>
  <tr>
    <td><ins>David</ins></td>
    <td>Smith</td>
    <td>456</td>
  </tr>
  <tr>
    <td><i>Felicity</i></td>
    <td>Snow</td>
    <td>789</td>
  </tr>
</table>
```

**or**

The second approach is to wrap the `<zing-grid?` around the `<table>`.

```html
<zing-grid>
  <table>
    <tr>
      <th>First</th>
      <th>Last</th>
      <th>Number</th>
    </tr>
    <tr>
      <td><b>Maria</b></td>
      <td>John</td>
      <td>123</td>
    </tr>
    <tr>
      <td><ins>David</ins></td>
      <td>Smith</td>
      <td>456</td>
    </tr>
    <tr>
      <td><i>Felicity</i></td>
      <td>Snow</td>
      <td>789</td>
    </tr>
  </table>
</zing-grid>
```

**or**

The last approach is to set the `data` attribute to the selector of the HTML table.

```html
<table id="gridSource">
  <tr>
    <th>First</th>
    <th>Last</th>
    <th>Number</th>
  </tr>
  <tr>
    <td><b>Maria</b></td>
    <td>John</td>
    <td>123</td>
  </tr>
  <tr>
    <td><ins>David</ins></td>
    <td>Smith</td>
    <td>456</td>
  </tr>
  <tr>
    <td><i>Felicity</i></td>
    <td>Snow</td>
    <td>789</td>
  </tr>
</table>

<zing-grid data="#gridSource"></zing-grid>
```
## Attributes

Once the HTML table data populates the grid, you can add the following `<zg-param>`s:

| Attribute | Description |
|-----------|-------------|
| tableDataFormat | Specifies if the grid should copy the full html value of the data rows or just the text data. |
| tableHead | Specifies the values that should be used for the grid's header. |
| tableHeadFormat | Specifies if the grid should copy the full html value of the header row or just the text data. |
| tableHide | Hide the table referenced as table data. |

## Table Attributes

Here is a list of supported attributes for HTML table-related elements.

| Attribute | Element | Description |
|-----------|---------|-------------|
| data-zg-* | table | Sets a ZingGrid attribute (Ex. data-zg-pager corresponds to the ZingGrid[pager] attribute). |
| data-zg-* | col | Sets a ZGColumn attribute (Ex. data-zg-hidden corresponds to the ZGColumn[hidden] attribute). |
| data-zg-data-format | table | Specifies if the grid should copy the full html value of the data rows or just the text data. |
| data-zg-frozen-column | th | Freezes the column. |
| data-zg-frozen-row | tr | Freezes the row. |
| data-zg-head-format | table | Specifies if the grid should copy the full html value of the head row or just the text data. |
| data-zg-head-row | tr | Specifies row as the header row. |
| data-zg-ignore-row | tr | Specifies to ignore row and not include in the grid. |
| is | table | Accepts the value "zing-grid" to specify to the grid to use table as a data source. |

Refer to the below demos to see these in action.

[Example code](https://app.zingsoft.com/demos/embed/0WQMD9UF)