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

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

rowSpan property (td, th)

Browser support:

Specifies or returns how many rows high a table cell should be.

This property is useful if you want to enable a cell element to extend beyond its contents into multiple lines of the table.

Syntax:

object.rowSpan;

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

This property is read/write.

HTML page for this property: rowSpan

Possible values:

Integer that sets or retrieves the number of rows to span.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the rowSpan attribute:

<table border="3px">
    <tr>
        <td id="myTData" rowspan="4">Fruits</td>
        <td>Pear</td>
        <td>35.21</td>
    </tr>
    <tr>
        <td>Peach</td>
        <td>23.12</td>
    </tr>
    <tr>
        <td>Apple</td>
        <td>12.45</td>
    </tr>
    <tr>
        <td>Cherry</td>
        <td>14.56</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 rowSpan property:

<head>
    <script type="text/javascript">
        function SetRowSpan (elem) {
            var tData = document.getElementById ("myTData");

            // Returns the index of the selected option
            var whichSelected = elem.selectedIndex;

            // Returns the text of the selected option
            var rowsAmount = elem.options[whichSelected].text;

            tData.rowSpan = rowsAmount;
        }
    </script>
</head>
<body>
    <table border="3px">
        <tr>
            <td id="myTData" rowspan="4">Fruits</td>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
        <tr>
            <td>Apple</td>
            <td>12.45</td>
        </tr>
        <tr>
            <td>Cherry</td>
            <td>14.56</td>
        </tr>
    </table>

    Set how many rows should be span.
    <select onchange="SetRowSpan (this);" size="4">
        <option />1
        <option />2
        <option />3
        <option selected="selected" />4
    </select>
</body>