用代码制作别具一格的表格边框

来源：百度文库 编辑：神马文学网 时间：2024/04/29 00:10:43
我们一般制作帖子的表格边框,基本上大同小异.现在教大家用代码制作别具一格的表格边框.在这里所有的效果我只用套材来举例.边框里可以放图片和文字,也可以换成颜色和文字.图片和颜色大家可以根据需要自己更换.只要发挥想象力,相信大家都能制作出更漂亮的表格边框.
语法简单介绍:
BORDER-RIGHT: #9b0000 6px ridge;
右边框颜色 宽度 样式
BORDER-TOP: #9b0000 6px ridge;
上边框颜色 宽度 样式
BORDER-LEFT: #9b0000 6px ridge;
左边框颜色 宽度 样式
BORDER-BOTTOM: #9b0000 6px ridge;
下边框颜色 宽度 样式
POSITION: relative;
外边框定位(相对定位)
POSITION: absolute;
内部小表格的定位(绝对定位)
LEFT: 0px; 离左边的距离
TOP: 0px; 离顶部的距离
RIGHT: 0px; 离右边的距离
BOTTOMM: 0px; 离下边的距离
HEIGHT: 512px 表格高度
WIDTH: 512px; 表格宽度
表格边框的样式还有以下几种(换不同的值就会有不同的边框样式):
none | dotted | dashed | solid | double | groove | ridge | inset | outset
注意点:
如果不是宽屏外边框必须赋于相对定位.内部表格必须绝对定位.
上,下,左,右边框如果有不需要显示的,将该边的宽度值
设为0即可.
主要图片以背景的方式加入即放在里更好一些.
效果一:
效果一代码如下:




















效果二:
效果二代码:
效果二代码:




































效果三:
效果三代码:
























效果四:
效果四代码:
























效果五:
效果五代码:








































效果六:
效果六代码:





























效果七:
百年爱情
百
年
爱
情
百年爱情
百
年
爱
情
效果七代码:








百年爱情










百
年
爱
情











百年爱情











百
年
爱
情











效果八:
效果八代码:
























效果九:
效果九代码:








































效果十:
效果十代码:




























效果十一:
效果十一代码:




















































效果十二:

效果十三代码:






























































效果十四:
效果十四代码:








































效果十五:

效果十五代码:


















































效果十六:

效果十六代码:






















































效果是十七:

效果十七代码:






































































































效果十八:
效果十八代码:











































































































































用代码制作别具一格的表格边框 表格代码 表格制作 用代码制作细线表格 如何制作边框的代码 制作花卉边框的代码 表格边框代码应用 表格边框代码 【学习表格边框代码应用】 (55)制作花卉边框的代码 不完整边框的表格样式及代码 代码制作边框 WEB 制作1px边框表格的几种方法 组表格制作与代码 怎么用css美化表格的边框 蕾丝边框制作代码【原创】 (57)代码制作霓虹灯边框 【日志制作】五款图片颜色边框的代码 漂亮的表格代码 漂亮的表格代码 代码修饰的边框 ] 绿色边框的代码 紫色边框的代码 金黄边框的代码 金色边框的代码