边框表格常用属性释义_云帆

http://blog.sina.com.cn/u/1723963164

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

边框表格常用属性释义

(2012-09-04 08:27:33)

标签：

文章边框

分类： ╭★╯博客素材

http://blog.oldkids.cn/uploads/diary/200901/23191121318.gif

http://blog.oldkids.cn/uploads/diary/200901/23191150060.gif

边框表格常用属性释义

一、属性：
1、<TABLE></TABLE>：定义表格的元素。分别作起、始标识符，网页中有几张表格，就有几对此元素。

2、<TR></TR>：定义表格中“行”的元素。在表格中有几对此元素就表示当前表格中有几行。

3、<TD></TD>：表示一行中单元格的元素。一行中有几对此元素，就有几个单元格。

4、border：表格外框线宽度，属性值为数字。如border=5，表示表格边框的粗细为5个像素（默认值为1），为0表示没有边框。

5、borderColor：表格的边框线颜色，属性值为各种颜色代码（当border值不为0时设置此值有效）。如 borderColor=#0080FF，表示表格边框线的颜色为蓝色（默认值为白色）。

6、bordercolorlight：亮边框（表格的左边和上边框）颜色，属性值为各种颜色代码（当border值不为0时设置此值有效）。

7、bordercolordark：暗边框（表格的右边和下边框）颜色，属性值为各种颜色代码（当border值不为0时设置此值有效）。

8、bgcolor：表格的背景颜色，属性值为各种颜色代码。
如 bgcolor=#FF0000，表示表格背景色为红色（默认值为无色）。

9、background：表格的背景图案，属性值为有效的图片地址。

10、cellpadding：表示单元格内容与单元格边框之间的距离，属性值为数字。

11、cellspacing：表示表格中各单元格的间距，属性值为数字。当表格只有一个单元格时，则表示该单元格与表格边框的距离。

12、width：表格的宽度，属性值为像素和百分比两种。

13、height：表格的高度，取值方法同width。

14、align：表格的对齐方式，属性值为left（左对齐，默认）、center（居中）以及right（右对齐）。

15、colspan：定义合并表格的列数，属性值是数字。

16、rowspan：定义合并表格的行数，属性值是数字。

17、<DIV align=center></DIV> ：表格边框在网页内置中。

18、<caption></caption> ：建立表格的标题，通过align属性定义标题的位置，其属性有四：即 top（在表格上方）、bottom（在表格下方）、left（在表格的左上方）、right（在表格的右上方）。

19、<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整。

20、<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整。

21、<frameset cols="20%,*">分割左右两个框架。

22、<frameset cols="20%,*,20%">分割左中右三个框架。

23、<frameset rows="20%,*,20%">分割上中下三个框架.

二、其它参考：

<TABLE>	●	表格标记	设定该表格的各项参数
<CAPTION>	●	表格标题	做成一打通列以填入表格标题
<TR>	●	表格列	设定该表格的列
<TD>	●	表格栏	设定该表格的栏
<TH>	●	表格标头	相等于<TD>，但其内之字体会变粗
表单标记
<FORM>	●	表单标记	决定单一表单的运作模式
<TEXTAREA>	●	文字区块	提供文字方盒以输入较大量文字
<INPUT>	○	输入标记	决定输入形式
<SELECT>	●	选择标记	建立 pop-up 卷动清单
<OPTION>	○	选项	每一标记标示一个选项
图形标记
<IMG>	○	图形标记	用以插入图形及设定图形属性
连结标记
<A>	●	连结标记	加入连结
<BASE>	○	基准标记	可将相对 URL 转绝对及指定连结目标
框架标记
<FRAMESET>	●	框架设定	设定框架
<FRAME>	○	框窗设定	设定框窗
<IFRAME>	○	页内框架	于网页中间插入框架
<NOFRAMES>	●	不支援框架	设定当浏览器不支援框架时的提示

表格应用实例（一）

一、单列表格：

代码：

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>

</TBODY></TABLE>

效果：

文字

二、双列表格：

代码：

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>

</TBODY></TABLE>

效果：

文字	文字
文字	文字
文字	文字

三、四列表格：

代码：

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>

</TBODY></TABLE>

效果：

文字	文字	文字	文字
文字	文字	文字	文字
文字	文字	文字	文字

四、首行合并，以下两列：

代码：

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>

</TBODY></TABLE>

效果：

文字
文字	文字
文字	文字

五、首行合并，以下三列：

代码：

<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10

width=600 align=center border=3><TBODY>
<TR><TD align=center colSpan=3>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD width="33.33%">

</TBODY></TABLE>

效果：

文字
文字	文字	文字
文字	文字	文字

表格应用实例（二）

当表格中只有一个单元格时，它实际就是一个日志边框。

一、颜色边框：

1、彩色边框、透明背景、固定宽度的边框：

代码：

<P align=center><FONT color=#0000ff size=4>
<TABLE style="WIDTH: 554px; HEIGHT: 99px" border=1 cellSpacing=10

borderColor=#ffffff borderColorDark=#000000 cellPadding=10

width=554

ackground=http://s3/middle/4a50efadt7d5c5d55bbf2&690

bgColor=#00ff00 align=center>
<TBODY>
<TR>
<TD bgColor=#000000 height=100>
<P>          

  写文章    </FONT></P></TD></TR>

</TBODY></TABLE></FONT></P>

效果：

写文章

说明：边框的宽、高度可随日志内容进行调整。

2、阴影边框、颜色背景、固定宽度的边框：

代码：

<TABLE cellSpacing=5 borderColorDark=#004B97

cellPadding=5 width=600 align=center

bgColor=#660000 borderColorLight=#62B0FF border=10>

</TABLE>

效果：

日志内容

3、双色边框、颜色背景、固定宽度的边框：

代码：

<TABLE borderColor=#0080ff cellSpacing=5 cellPadding=5

width=600 align=center bgColor=#660000 border=10>

</TABLE>

效果：

日志内容

说明：<TD>标签中多了一个“borderColor=#ffffff”，表示内框线颜色。

width=100%，表示边框的宽度为最大化。

表格应用实例（三）

http://s2/middle/4ce264ddt9fd9daf726f1&690 百万书库	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 诗歌书库宝典大全	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 我的图书馆	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 1	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 1	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 1	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 1	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 1	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 1	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 1	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 1	http://s2/middle/4ce264ddt9fd9daf726f1&690
http://s2/middle/4ce264ddt9fd9daf726f1&690 1	http://s2/middle/4ce264ddt9fd9daf726f1&690

--网站--
阅读网	凤凰网
项城文化网	怡情画苑
网易	长者风采
电视直播	雅虎
幼儿园	老小孩
夕阳论坛	百荷音画
网络硬盘	图片网
声音网	音效素材
古典网	诗园文学
汉典	壁纸酷
幻影音画	查字典
中国作家	成语典故
三集数码	照片处理
新竹网	名人制作
flash网	上传PPT
景点银行	经验口袋
flash欣赏	音画欣赏
原创星球	改图网
鸿波家园	一起写
个人图书馆	派派小说
八音盒	360图书馆
与你同行

◇身份验证	◇福彩查询
◇博客宝典	◇存款利率
◇个税计算	◇法律法规
◇电视查询	◇商标查询
◇学历查询	◇搞笑证件
◇在线翻译	◇邮编区号
◇实用常识	◇史上今天
◇智商自测	◇设计签名
◇常用电话	◇列车查询
◇飞机航班	◇天气预报
◇电子地图	◇手机属地
◇健康自测	◇医疗查询
◇周公解梦	◇心理测试

http://blog.oldkids.cn/uploads/diary/200901/23191223008.jpg

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：想像人生

后一篇：我的博客今天2岁157天了，我领取了先锋博主徽章

新浪BLOG意见反馈留言板　欢迎批评指正