html表格边框的设置
这里介绍两种html表格边框的设置方法。
- 第一种是直接使用表格的border属性设置
- 第二种是利用表的背景色来设置边框
先来看第一种
-
源码
<table border="1" bordercolor="#00CCCC" width="300"> <caption>直接使用表的 "border" 属性设置边框线</caption> <tr> <td> 名称 </td> <td> 分类 </td> </tr> <tr> <td> 苹果 </td> <td> 水果 </td> </tr> </table>
效果:
直接使用表的 "border" 属性设置边框线 名称 分类 苹果 水果 -
这样是不是比较难看呢。原来表格的单元格之间默认情况下是有1像素的间隔的
如果设置单元格之间的间距为0,表格变为如下
源码: <table border="1" cellspacing="0" bordercolor="#00CCCC" width="300"> <caption>直接使用表的 "border" 属性设置边框线</caption> <tr> <td> 名称 </td> <td> 分类 </td> </tr> <tr> <td> 苹果 </td> <td> 水果 </td> </tr> </table>
效果
直接使用表的 "border" 属性设置边框线 名称 分类 苹果 水果
来看第二种。第二种直接用表格的背景来呈现表格的边框。
-
<table border="0" cellpadding="1" bgcolor="#00CCCC" width="300"> <caption >以表格的背景作为边框线</caption> <tr> <td bgcolor="#FFFFFF"> 名称 </td> <td bgcolor="#FFFFFF"> 分类 </td> </tr> <tr> <td bgcolor="#FFFFFF"> 苹果 </td> <td bgcolor="#FFFFFF"> 水果 </td> </tr> </table>
-
效果如图:
以表格的背景作为边框线 名称 分类 苹果 水果
看到了通过设置border="0",记不显示边框,通过设置cellpadding="1",来设置表格单元格间的间隔; bgcolor来设置了表格的背景色。这样就将背景色当作了表格的边框。 当然这做的话,就得将每个单元格的背景色改变一下,来覆盖表格的背景色。要不然就全显示为表格的背景色了。