[转帖]用代码制作别具一格的表格边框|发贴学习 - 我们的自由天空公益助学项目组（OFS，桃李天）

只看楼主倒序阅读 0 发表于: 2006-04-11

我们一般制作帖子的表格边框,基本上大同小异.现在教大家用代码制作别具一格的表格边框.在这里所有的效果我只用套材来举例.边框里可以放图片和文字,也可以换成颜色和文字.图片和颜色大家可以根据需要自己更换.只要发挥想象力,相信大家都能制作出更漂亮的表格边框.

语法简单介绍:

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即可.

主要图片以背景的方式加入即放在<table>里更好一些.

分享到 淘江湖新浪 QQ微博 QQ空间开心人人豆瓣网易微博百度鲜果白社会飞信

叶落城市

荣誉会员

只看该作者 1 发表于: 2006-04-11

效果一:

叶落城市

荣誉会员

只看该作者 2 发表于: 2006-04-11

代码如下:<TABLE id=table style="BORDER-RIGHT: #9b0000 6px ridge; BORDER-TOP: #9b0000 6px ridge; LEFT: 0px; BORDER-LEFT: #9b0000 6px ridge; WIDTH: 512px; BORDER-BOTTOM: #9b0000 6px ridge; POSITION: relative; TOP: 0px; HEIGHT: 512px" cellSpacing=0 cellPadding=0 background=http://bbs.guqu.net/UploadFile/2004-12/20041230144914462.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE id=table1 style="BORDER-RIGHT: #9b0000 6px ridge; LEFT: 0px; WIDTH: 120px; BORDER-BOTTOM: #9b0000 6px ridge; POSITION: absolute; TOP: 0px; HEIGHT: 120px" cellSpacing=0 cellPadding=0 background=http://bbs.guqu.net/UploadFile/2005-10/200510262153351596.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=table2 style="LEFT: 380px; BORDER-LEFT: #9b0000 6px ridge; WIDTH: 120px; BORDER-BOTTOM: #9b0000 6px ridge; POSITION: absolute; TOP: 0px; HEIGHT: 120px" cellSpacing=0 cellPadding=0 background=http://bbs.guqu.net/UploadFile/2005-10/200510262153351596.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=table3 style="BORDER-RIGHT: #9b0000 6px ridge; BORDER-TOP: #9b0000 6px ridge; LEFT: 0px; WIDTH: 120px; BOTTOM: 0px; POSITION: absolute; HEIGHT: 120px" cellSpacing=0 cellPadding=0 background=http://bbs.guqu.net/UploadFile/2005-10/200510262153351596.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE id=table4 style="BORDER-TOP: #9b0000 6px ridge; LEFT: 380px; BORDER-LEFT: #9b0000 6px ridge; WIDTH: 120px; BOTTOM: 0px; POSITION: absolute; HEIGHT: 120px" cellSpacing=0 cellPadding=0 background=http://bbs.guqu.net/UploadFile/2005-10/200510262153351596.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>