In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > headers (td, th)

headers property (td, th)

Browser support:

Sets or retrieves a list of header cells that provide header information for the current data cell.

The functionality of this property is not implemented in browsers. It is typically used by applications that attach header information to data cells like non-visual media (speech). The ids specified by the value of the headers property identify the header elements that belong to the current cell.

In the example below, the headers attached to the cell (12.74) are: 'Alabama' (id=loc1), '12-aug-05' (id=dat1), and 'Apple' (id=col1).

Syntax:

object.headers;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: headers

Possible values:

String that sets or retrieves a space-separated list of header cell identifiers.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the headers attribute:

<table border="1px" id="myTable" summary="This table summarizes fruit costs in august.">
    <caption>Fruits Cost Report</caption>
    <tr>
        <th></th>
        <th id="col1" axis="fruits">Apple</th>
        <th id="col2" axis="fruits">Pear</th>
        <th id="col3" axis="fruits">Peach</th>
    </tr>
    <tr>
        <th id="loc1" axis="location">Alabama</th>
        <th colspan="3"></th>
    </tr>
    <tr>
        <td id="dat1" axis="date">12-aug-05</td>
        <td headers="loc1 dat1 col1">12.74</td>
        <td headers="loc1 dat1 col2">54.00</td>
        <td headers="loc1 dat1 col3">45.00</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the headers property:

<head>
    <script type="text/javascript">
        function GetHeaders () {
            var table = document.getElementById ("myTable");
            
            for (var i = 0; i < table.rows[2].cells.length; i++) {
                alert (table.rows[2].cells[i].headers);
            }
        }
    </script>
</head>
<body>
    <table border="1px" id="myTable" summary="This table summarizes fruit costs in august.">
        <caption>Fruits Cost Report</caption>
        <tr>
            <th></th>
            <th id="col1" axis="fruits">Apple</th>
            <th id="col2" axis="fruits">Pear</th>
            <th id="col3" axis="fruits">Peach</th>
        </tr>
        <tr>
            <th id="loc1" axis="location">Alabama</th>
            <th colspan="3"></th>
        </tr>
        <tr>
            <td id="dat1" axis="date">12-aug-05</td>
            <td headers="loc1 dat1 col1">12.74</td>
            <td headers="loc1 dat1 col2">54.00</td>
            <td headers="loc1 dat1 col3">45.00</td>
        </tr>
    </table>

    <button onclick="GetHeaders ();">Get cell headers from the 3. row!</button>
</body>