Table frameProperty
Table Object
Definition and Usage
The frame property sets or returns the outer border of a table.
Syntax
Set the frame property:
tableObject.frame="void|above|below|hsides|vsides|lhs|rhs|box|border"
Return the frame property:
tableObject.frame
| Value | Description |
|---|---|
| void | No outer border is displayed. Default. |
| above | Displays the top outer border |
| below | Displays the bottom outer border |
| hsides | Displays the top and bottom outer borders |
| vsides | Displays the left and right outer borders |
| lhs | Displays the left outer border |
| rhs | Displays the right outer border |
| box | Displays the outer borders in all four directions |
| border | Displays the outer border on all four sides |
Browser Support
All major browsers support the frame property
Example
Example
The following example sets two different borders for the table:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<script>
function above(){
document.getElementById('myTable').frame="above";
}
function below(){
document.getElementById('myTable').frame="below";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br>
<button type="button" onclick="above()">Show the top border</button>
<button type="button" onclick="below()">Show the bottom border</button>
<p><b>Note:</b>The frame property cannot be displayed correctly in versions before Internet Explorer 9.</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<script>
function above(){
document.getElementById('myTable').frame="above";
}
function below(){
document.getElementById('myTable').frame="below";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br>
<button type="button" onclick="above()">Show the top border</button>
<button type="button" onclick="below()">Show the bottom border</button>
<p><b>Note:</b>The frame property cannot be displayed correctly in versions before Internet Explorer 9.</p>
</body>
</html>
Try it Yourself »
Table Object Other Extensions