打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Table属性与应用
《Table属性与应用》
 
<table>的属性


border 表格的边框。比如,border=1,表示表格边框的粗细为1个像素,为0表示没有边框。

cellspacing 单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing,

表格只有一个单元格,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

cellpadding 单元格衬距。指该单元格里的内容与cellspacing区域的距离, cellspacing为0,表示单元格里的内容与表格周边边框的距离。

width:表格的宽度。width的取值还可以使用百分比,如widht="100%"。

height:表格的高度,取值方法同width。

bgcolor:表格的背景色。bgcolor=#ff0000 或 bgcolor=red ,<td>单元格也可有此属性。

background:表格的背景图。<td>也有此属性。

bordercolor:表格的边框颜色,当border值不为0时此值有效。取值同bgcolor。

bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。 亮边框指表格的左边和上边的边框。

bordercolordark:暗边框颜色,当border值不为0时设置有效。 暗边框指表格的右边和下边的边框。

align:表格的对齐方式,值有left(左对齐)、center(居中)以及right(右对齐)。

<table>属性的应用

1、 table 的属性是根据需要来取舍的,如我需要背景图片(用我头像),那么,我们就把背景图片属性代码 background 加到<table>里面去,代码如下:

<table background=图片地址>
<tbody>
<tr>
<td>
<p> 蓝波欢迎您!</p></td></tr></tbody></table>
(这也是最原始最简单的“图片上加文字的方法”)
1、效果:
蓝波欢迎您!

2、我们看到1效果并不理想,那么,我们再试着加上边框属性border、 宽度属性width 、高度属性height ,文字也变成大号会移动的粉色字体,代码如下:

<table background=图片地址 width=60 height=60 border=1>
<tbody>
<tr>
<td>
<p><marquee direction=left scrollamount=3><font color=#ff00ff size=5> 蓝波欢迎您!</font></marquee></p></td></tr></tbody></table>
2、效果:
蓝波欢迎您!
3、其它属性应用不多累述,可以参看本博日志【表格大全】
<table>
...
</table>这对代码的基本架构

         因为<table> </table>是一对表格框架代码,所以它必须有横竖骨架来组成,也就是常说的行和列,所以最基本的代码样式是:

<table>
<tbody>
<tr>
<td>
这里写入图片、文字、音画...等等内容代码
</td>
</tr>
</tbody>
</table>

简解:

1、<table> 标签表示HTML表头;
2、<tbody>标签表示HTML表体;
3、<tr>表示行
4、<td>表示列

<table>

常用到的几种基础代码组合

1、图片加播放器组合。代码如下↓ 效果在右→

<TABLE BACKGROUND=背景图片地址 WIDTH=展示的宽度 HEIGHT=展示的高度 BORDER=1><TBODY><TR><TD><P><EMBED SRC=音乐地址 WIDTH=播放器显示的宽度 HEIGHT=播放器显示的高度 ></P></TD></TR></TBODY></TABLE>

(注:播放器的位置,可以简单用增减 <P> </P> 这对代码来调节。有关更多播放器的特效代码和属性注解,可参看本博日志《WMP播放器款式及代码》!)

 

 

 

 

2、图片叠加flash自合。代码如下↓效果在右→

<TABLE BACKGROUND=背景图片地址 WIDTH=展示的宽度 HEIGHT=展示的高度 BORDER=1><TBODY><TR><TD><P><EMBED SRC=flash地址 WIDTH=播放器显示的宽度 HEIGHT=播放器显示的高度 ></P></TD></TR></TBODY></TABLE>

(注:这个代码和1是一样的,只是把音乐地址改成flash地址即可!)

3、图片文字flash组合。代码如下↓ 效果在右→

<TABLE BACKGROUND=背景图片地址 WIDTH=展示的宽度 HEIGHT=展示的高度 BORDER=1><TBODY><TR><TD><P><EMBED SRC=flash地址 WIDTH=播放器显示的宽度 HEIGHT=播放器显示的高度 ><MARQUEE scrollAmount=3><FONT color=#ffff00 size=4>我就知道您会来!看看这花多美啊~!</FONT></MARQUEE></P></TD></TR></TBODY></TABLE>

(注:编代码1的时候说到用<P> </P> 这对代码来调节位置 ,其实它就是一对段落代码,可以在其中写入各种内容!)

我就知道您会来!看看这花多美啊~!

4、日志背景制作组合。代码如下↓ 效果在右→

<TABLE><TBODY><TR><TD>
<TABLE><TBODY><TR><TD>
<TABLE><TBODY><TR><TD>
...... 这里写日志内容
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

(注:在上面说了 TABLE  的基础架构代码,这个组合就是在一个架构代码中嵌入一个架构代码,再嵌入一个... 直到满足需要,这里给出的是三对不同颜色的代码。有关这个组合的详细讲解,可以参考本博日志《日志背景的制作》!)

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
代码入门教程(20)
不同结构的表格样式
表格的制作(送给音画爱好者)
HTML学习笔记☆表格制作
表格制作的常见问题和解决方法
学习表格设置做图框 - 理睬的日志 - 网易博客
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服