Table边框详解.

简介:   大家都知道在HTML中当border="1" cellpadding="0" cellspacing="0"  的时候,表格样式很丑,有点“立体”的感觉,当改变边框颜色的时候,border看起来又会很粗,这是因为两个边重叠所造成的,那么如何做出上面的效果呢?跟着我的操作来吧。

 

大家都知道在HTML中当border="1" cellpadding="0" cellspacing="0"  的时候,表格样式很丑,有点“立体”的感觉,当改变边框颜色的时候,border看起来又会很粗,这是因为两个边重叠所造成的,那么如何做出上面的效果呢?跟着我的操作来吧。

 

 

img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   />
< title > 表格样式 </ title >

</ head >

< body >


  
  
< table  border = " 0 "  cellpadding = " 5 "  cellspacing = " 1 "  width = " 100% "  align = " center "  style = " background-color: #b9d8f3; " >
   
< tr style = " text-align: center; COLOR: #0076C8; BACKGROUND-COLOR: #F4FAFF; font-weight: bold " >
    
< td >< font size = " 2 " > 新闻标题 </ font ></ td >
    
< td >< font size = " 2 " > 链接地址 </ font ></ td >
    
< td >< font size = " 2 " > 发布时间 </ font ></ td >
   
</ tr >
   
        
   
< tr align = " center "   bgcolor = ' #F4FAFF ' >
    
< td nowrap = " nowrap " > 百度首页 </ td >
    
< td >< font size = " 2 " > http: // www.baidu.com</font></td>
     < td >< font size = " 2 " > 2010年3月22日  13 : 23 : 28 </ font ></ td >
   
</ tr >
  
</ table >

</ body >
</ html >

 

 

从上面可以看出,我们真正用到的并不是border,而是背景颜色(BACKGROUND-COLOR)和外边距(cellspacing) 这两个属性(代码中高光部份),思路上有些像Photoshop里“层”,用上面的“层”减掉“背景层”得到的就是现在大家看到的效果。背影颜色(主)就是我们最后的边框的颜色,我们看到的边框实际上是通过cellspacing的缝隙看到的背景色,因为我们设置了边距是1px,所以看上去像是border。

 

说的有点乱,希望大家能看明白。

目录
相关文章
|
9天前
|
前端开发 小程序
使用element UI-table表格列宽自适应 【已解决】
使用element UI-table表格列宽自适应 【已解决】
|
9月前
|
JavaScript
element-ui el-table 表格中行高和字体大小调整
element-ui el-table 表格中行高和字体大小调整
2121 0
table怎么实现部分列固定宽度,其它列宽自适应拉伸
table怎么实现部分列固定宽度,其它列宽自适应拉伸
365 0
table怎么实现部分列固定宽度,其它列宽自适应拉伸
|
前端开发
table布局的一些总结
table-layout作用就是让表格布局固定,使表格的宽度不会根据内容多少而动态变化。
134 0
table布局的一些总结
|
小程序 前端开发 iOS开发
针对不规则图案阴影 drop-shadow
针对不规则图案阴影 drop-shadow
237 0
针对不规则图案阴影 drop-shadow
表格边框设置
其中,rules去表格内行和列的表格线,frame去表格边框。rules=rows去行.rules=cols去列frame=vsides 只显示左右frame=hsides 只显示上下frame=above 只显示上方
653 0
|
XML 数据格式