HTML table表格边框的控制详细说明
发布时间：2011-04-01 15:34:31 作者：佚名 
我要评论
我要评论表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>
<html>
<head>
<title>表格边框的隐藏</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { color:"#ffffff";
font-family: "宋体";
font-size: 12px;
margin-top : 4;
}
.t {
border: #000000; border-style: solid; border-width: 1px
}
td {
font-family: "Tahoma", "MS Shell Dlg"; font-size: 12px
}
textarea {border: 1 solid #000000"}
</style>
</head>
<body bgcolor="#999999" text="#000000">
<center>
<table width="600" border="0" cellspacing="0" cellpadding="8" class="t">
<tr>
<td>
<table border="1" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td>普</td>
<td>表</td>
</tr>
<tr align="center">
<td>通</td>
<td>格</td>
</tr>
</table>
</td>
<td>这是一普通的表格</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=above>
<tr align="center">
<td>头</td>
<td>上</td>
</tr>
<tr align="center">
<td>有</td>
<td>天</td>
</tr>
</table>
</td>
<td>只显示上边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=below>
<tr>
<td align="center">脚</td>
<td align="center">下</td>
</tr>
<tr>
<td align="center">有</td>
<td align="center">地</td>
</tr>
</table>
</td>
<td>只显示下边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=vsides>
<tr>
<td align="center">上不着天</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">下不着地</td>
</tr>
</table>
</td>
<td>只显示左、右边框</td>
</tr>
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0" frame=hsides width="200">
<tr>
<td align="center">去掉两边</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center">只剩“王”字</td>
</tr>
</table>
</td>
<td>只显示上、下边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=lhs>
<tr>
<td width="100" align="center">只</td>
<td width="100" align="center">有</td>
</tr>
<tr>
<td align="center">左</td>
<td align="center">边</td>
</tr>
</table>
</td>
<td>只显示左边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=rhs>
<tr>
<td width="100" align="center">只</td>
<td width="100" align="center">有</td>
</tr>
<tr>
<td align="center">右</td>
<td align="center">边</td>
</tr>
</table>
</td>
<td>只显示右边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=void>
<tr>
<td align="center">四周</td>
<td align="center">去掉</td>
</tr>
<tr>
<td align="center">只留</td>
<td align="center">中间</td>
</tr>
</table>
</td>
<td>不显示任何边框</td>
</tr>
<tr>
<td colspan="2">
<hr size="1" color=black>
表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void></td>
</tr>
</table>
</center>
</body>
</html>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>
复制代码
代码如下:<html>
<head>
<title>表格边框的隐藏</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { color:"#ffffff";
font-family: "宋体";
font-size: 12px;
margin-top : 4;
}
.t {
border: #000000; border-style: solid; border-width: 1px
}
td {
font-family: "Tahoma", "MS Shell Dlg"; font-size: 12px
}
textarea {border: 1 solid #000000"}
</style>
</head>
<body bgcolor="#999999" text="#000000">
<center>
<table width="600" border="0" cellspacing="0" cellpadding="8" class="t">
<tr>
<td>
<table border="1" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td>普</td>
<td>表</td>
</tr>
<tr align="center">
<td>通</td>
<td>格</td>
</tr>
</table>
</td>
<td>这是一普通的表格</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=above>
<tr align="center">
<td>头</td>
<td>上</td>
</tr>
<tr align="center">
<td>有</td>
<td>天</td>
</tr>
</table>
</td>
<td>只显示上边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=below>
<tr>
<td align="center">脚</td>
<td align="center">下</td>
</tr>
<tr>
<td align="center">有</td>
<td align="center">地</td>
</tr>
</table>
</td>
<td>只显示下边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=vsides>
<tr>
<td align="center">上不着天</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">下不着地</td>
</tr>
</table>
</td>
<td>只显示左、右边框</td>
</tr>
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0" frame=hsides width="200">
<tr>
<td align="center">去掉两边</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center">只剩“王”字</td>
</tr>
</table>
</td>
<td>只显示上、下边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=lhs>
<tr>
<td width="100" align="center">只</td>
<td width="100" align="center">有</td>
</tr>
<tr>
<td align="center">左</td>
<td align="center">边</td>
</tr>
</table>
</td>
<td>只显示左边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=rhs>
<tr>
<td width="100" align="center">只</td>
<td width="100" align="center">有</td>
</tr>
<tr>
<td align="center">右</td>
<td align="center">边</td>
</tr>
</table>
</td>
<td>只显示右边框</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=void>
<tr>
<td align="center">四周</td>
<td align="center">去掉</td>
</tr>
<tr>
<td align="center">只留</td>
<td align="center">中间</td>
</tr>
</table>
</td>
<td>不显示任何边框</td>
</tr>
<tr>
<td colspan="2">
<hr size="1" color=black>
表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void></td>
</tr>
</table>
</center>
</body>
</html>
相关文章
- 这篇文章主要介绍了html中table表格的内容水平和垂直居中显示的相关资料,需要的朋友可以参考下2017-03-27
- 在Web页面上我们可以使用frame和rules来控制表格边框是否可见,下面我们就来详解HTML中table表格的frame和rules属性,需要的朋友可以参考下2016-07-08
- 这篇文章主要介绍了Div+CSS对HTML的table表格定位用法实例,文中讲到了CSS的定位差异问题需要的朋友可以参考下2016-03-11
- 这篇文章主要介绍了HTML的table表格标签与相关的换行问题,文中给出了强制换行和强制不换行的解决方案,需要的朋友可以参考下2016-02-22
html 隐藏div HTML里隐藏表格TABLE或者DIV内容的css样式
突然想起几年前用过的一个隐藏样式代码，有些时候用它非常方便，比如想让某块表格TABLE或者DIV里的内容完全看不到，那就加上他，嘿嘿，就隐身了,需要的朋友可以了解下2012-12-21- 过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页，但是这样做会遇到一个比较麻烦的问题就是，后期调试和维护会相当的困难。现在，越来越多的前端开发er2009-07-30
本文通过实例代码给大家介绍了HTML table 表格边框的实现思路，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-10-12
最新评论