Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <td> data-* Attribute

A data-* attribute on a <td> tag attaches additional data to the table data cell.

To create a custom attribute, replace * with a lowercase string, such as data-id, data-status, or data-location.

Example

#

A custom data-id attribute on several <td> tags.
The attribute values are not visible, but they are readable by JavaScript.

Full name
Denice Hobermann
Paulo Cornell
Jane Hollander
<style>
  table.tb { width:300px; border-collapse: collapse; }
  .tb th, .tb td { border: solid 1px #777; padding: 5px; }
  .tb th {background-color: lightblue; text-align: center; }
</style>

<table class="tb">
  <tr>
    <th>Full name</th>
  </tr>
  <tr>
    <td data-id="105">Denice Hobermann</td>
  </tr>
  <tr>
    <td data-id="250">Paulo Cornell</td>
  </tr>
  <tr>
    <td data-id="252">Jane Hollander</td>
  </tr>
</table>

Using data-*

The data-* attribute adds custom information to a <td> element.

The * part is replaced with a lowercase string, such as data-id, data-cost, or data-location.

An <td> element can have any number of data-* attributes, each with their own name.

Using data-* attributes reduces the need for requests to the server.

Note: The data-* attribute is not visible and does not change the appearance of the td.


Syntax

<td data-*="value">

Note: The * can be any string, such as data-iddata-costdata-supplier,  etc.


Values

#

Value Description
value A string value. Can be numeric, alphanumeric, JSON, etc.

More Examples

A custom data-id attribute on each <td> element.
Clicking a data cell will display the customer id value.

Customer
Denice Hobermann
Paulo Cornell
Jane Hollander
<style>
  table.tb { width:300px; border-collapse: collapse; }
  .tb th, .tb td { border: solid 1px #777; padding: 5px; }
  .tb th {background-color: lightblue; text-align: center; }
</style>

<table class="tb">
  <tr>
    <th>Customer</th>
  </tr>
  <tr>
    <td data-id="105" onclick="show(this);">Denice Hobermann</td>
  </tr>
  <tr>
    <td data-id="250" onclick="show(this);">Paulo Cornell</td>
  </tr>
  <tr>
    <td data-id="252" onclick="show(this);">Jane Hollander</td>
  </tr>
</table>

<script>
  let show = element => {
    alert("Customer Id = " + element.getAttribute('data-id'));
  }
</script>

Code explanation

The <td> tag has a custom data-id attribute.

The data-id attribute is used to specify the id of the customer.

Clicks are handled by the onclick event.

Onclick invokes a JavaScript function that extracts and displays the <td> id.

Note: Notice how the id displays immediately without server call.


Browser support

Here is when data-* support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <td>

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides