You are here: Reference > JavaScript > client-side > HTML DOM > properties > frame (table)

frame property (table)

Browser support:
Sets or retrieves which borders of a table element should be displayed.
The frame property has effect only on the border specified by the HTML border property.

Syntax:

object.frame;
You can find the related objects in the Supported by objects section below.
This property is read/write.
HTML page for this property: frame

Possible values:

String that sets or retrieves the visibility of border frames.
One of the following values:
above
Only the top border should be displayed.
below
Only the bottom border should be displayed.
border
Borders on all sides of the table frame should be displayed.
box
Borders on all sides of the table frame should be displayed.
hsides
Only the top and bottom borders should be displayed.
lhs
Only the left border should be displayed.
rhs
Only the right border should be displayed.
void
Default. No border should be displayed.
vsides
Only the left and right borders should be displayed.
Default: void.

Example HTML code 1:

This example illustrates the use of the frame attribute:
<table id="myTable" border="3px" frame="above">
    <tr>
        <td>Apple</td>
        <td>Pear</td>
        <td>Peach</td>
    </tr>
</table>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the frame property:
<head>
    <script type="text/javascript">
        function SetScrollDir (elem) {
            var table = document.getElementById ("myTable");

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

            table.frame = elem.options[whichSelected].text;
        }
    </script>
</head>
<body>
    <table id="myTable" border="3px" frame="above">
        <tr>
            <td>Apple</td>
            <td>Pear</td>
            <td>Peach</td>
        </tr>
    </table>

    <br />
    Change the type of the frame!
    <select onchange="SetScrollDir (this);" size="9">
        <option selected="selected" />above
        <option />below
        <option />border
        <option />box
        <option />hsides
        <option />lhs
        <option />rhs
        <option />void
        <option />vsides
    </select>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content