html中表格细边框的四种实现及其比较
2010-07-05 20:01
489 查看
第一种
使用css
<!---=========华丽的分隔线。。===================-->
<style>
.box {
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.box td {
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
text-align: center;
font-size: 13px;
font-weight: bold;
word-break: break-all;
}
</style>
<table width="640" height="480" border="1" cellspacing="0" cellpadding="0" class="box">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<!---=========华丽的分隔线结束===================-->
第二种,使用ie中特有的属性,不支持除ie外的浏览器
<!---=========忧伤的分隔线start===================-->
<table width="640" height="480" border="1" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" bordercolorlight="#000000">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<!---=========忧伤的分隔线end===================-->
第三种,整个表格的背景为黑色,每个单元格背景为白色,单无格间距为1,表格粗细为0
<!---=========痛苦的分隔线start===================-->
<table width="200" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr>
<th bgcolor="#FFFFFF" colspan="2">背景设置式-细边框表格</th>
</tr>
<tr>
<td bgcolor="#FFFFFF">text</td>
<td bgcolor="#FFFFFF">text</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">text</td>
<td bgcolor="#FFFFFF">text</td>
</tr>
</table>
<!---=========痛苦的分隔线end===================-->
第四种 啥也不说了,直接代码表示(一个style="BORDER-COLLAPSE:collapse"搞定)
<!---=========漂亮的分隔线start===================-->
<table width="640" height="480" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="BORDER-COLLAPSE: collapse">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<!---=========漂亮的分隔线end===================-->
比较:
第一种和第四种支持 ie和ff但是第四种更简单一些
第三种也支持所有浏览器,但实现起来比较麻烦,很痛苦
第二种虽然实现简单但是兼容性差,只支持ie
第四种自我感觉最好用
使用css
<!---=========华丽的分隔线。。===================-->
<style>
.box {
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.box td {
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
text-align: center;
font-size: 13px;
font-weight: bold;
word-break: break-all;
}
</style>
<table width="640" height="480" border="1" cellspacing="0" cellpadding="0" class="box">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<!---=========华丽的分隔线结束===================-->
第二种,使用ie中特有的属性,不支持除ie外的浏览器
<!---=========忧伤的分隔线start===================-->
<table width="640" height="480" border="1" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" bordercolorlight="#000000">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<!---=========忧伤的分隔线end===================-->
第三种,整个表格的背景为黑色,每个单元格背景为白色,单无格间距为1,表格粗细为0
<!---=========痛苦的分隔线start===================-->
<table width="200" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr>
<th bgcolor="#FFFFFF" colspan="2">背景设置式-细边框表格</th>
</tr>
<tr>
<td bgcolor="#FFFFFF">text</td>
<td bgcolor="#FFFFFF">text</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">text</td>
<td bgcolor="#FFFFFF">text</td>
</tr>
</table>
<!---=========痛苦的分隔线end===================-->
第四种 啥也不说了,直接代码表示(一个style="BORDER-COLLAPSE:collapse"搞定)
<!---=========漂亮的分隔线start===================-->
<table width="640" height="480" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="BORDER-COLLAPSE: collapse">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<!---=========漂亮的分隔线end===================-->
比较:
第一种和第四种支持 ie和ff但是第四种更简单一些
第三种也支持所有浏览器,但实现起来比较麻烦,很痛苦
第二种虽然实现简单但是兼容性差,只支持ie
第四种自我感觉最好用
相关文章推荐
- Html细线表格的实现 打印边框设置
- HTML表格边框的控制实现代码
- .net利用IOleCommandTarget接口实现Html编辑器表格边框的显示和隐藏(原创)
- 三种细边框表格的实现方法比较(转)
- java 复制 的四种实现方式 及其比较
- 三种细边框表格的实现方法比较
- HTML表格边框的控制实现代码
- javascript实现多表头分类交叉报表:html表格
- html 表格边框问题
- jquery实现html表格隔行变色
- Android实现计算器布局(四种布局方式)之TableLayout表格布局
- javascript实现多表头分类交叉报表:html表格
- javascript实现多表头分类交叉报表:html表格
- 玩转Web之html+CSS(一)---论坛首页表格的实现
- html+JQuery实现可编辑表格
- JS实现的流动边框效果的表格特效z
- 各种排序算法的实现及其比较
- html小总结:表格斑马纹的实现.
- javascript实现多表头分类交叉报表:html表格
- javascript实现多表头分类交叉报表:html表格