注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

章鱼博客

与你共享

 
 
 

日志

 
 

表格标记的使用  

2009-02-06 16:40:10|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

       表格标记的使用

       表格无论在网页制作还是在博客里是使用最多的标记之一,表格在网页的布局定位、在文本和图像的位置控制方面都有很强的功能。

表格的基本构成有三个标记组成,分别是:

<TABLE></TABLE>   这是一对表格标记。

<TR></TR>               这是一对行标记。

<TD></TD>              这是一对单元格标记又叫列标记。

表格有很多属性和属性值,常用的分别是:

border=#         代表表格边框,属性值是正整数。

bordercolor=#   代表表格边框的颜色,属性值是英文名或者是十六进制的颜色码。

bgcolor=#         代表表格的背景颜色,属性值是英文名或者是十六进制的颜色码。

background=#   表示表格的背景图片,属性值是图片的地址(URL)。

cellspacing=#    指单元格间距,表示图框内细线与边框的距离。属性值是正整数。

cellpadding=#   指 单元格衬距,表示插入内容与单元格间距细线的距离。属性值是正整数。

width=#          代表表格的宽度,属性值是正整数。

height=#        代表表格的高度,属性值是正整数。

align   表示对齐方式,有三个属性值,分别是:

align =left     表示左对齐,这也是系统默认的。

align =center  表示居中对齐。

align =right    表示右对齐。

 


我们来做一个一行一列的表格:

<table border=2 bordercolor=#ff0000>

 <tr>
<td>这是一行一列的表格</td>

</tr>

</table>

说明:只要在表格标记里加一对行标记<tr>和一对<td>单元格标记,就能实现。

这个表格做出来是不显示边框的,加一个边框属性border=2,一个边框颜色属性bordercolor=#ff0000

看看效果怎样:

这是一行一列的表格

 

再做一个二行二列的表格:

<table border=2 bordercolor=#ff0000>
<tr>
<td>第一行第一列单元格</td>
<td>第一行第二列单元格</td>
</tr>
<tr>
<td>第二行第一列单元格</td>
<td>第二行第二列单元格</td>
</tr>
</table>

说明:这里加入了二对行标记<tr>和四对单元格标记<td>

看看效果:

第一行第一列单元格 第一行第二列单元格
第二行第一列单元格 第二行第二列单元格

 


 

 我们以四行八列(单元格)的表格为例,着重说一下表格的一些常用属性的用法:

这是表格的基本代码,加了一个表格边框属性(系统默认为黑色)。默认情况下不显示边框的。

代码:

<table border=3>
<tr>
<td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td>

</tr>
<tr> 
<td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> 
</tr>
<tr> 
<td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> 
</tr>
<tr> 
<td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> 
</tr>
</table>

效果:

第一行1单元格 第一行2单元格 第一行3单元格 第一行4单元格
第二行1单元格 第二行2单元格 第二行3单元格 第二行4单元格
第三行1单元格 第三行2单元格 第三行3单元格 第三行4单元格
第四行1单元格 第四行2单元格 第四行3单元格 第四行4单元格

 


 

加一个边框颜色属性bordercolor,属性值为#66ccff。再加一个表格背景颜色属性bgcolor,属性值为#FFF8DC。

代码:

<table border=3 bordercolor=#66ccff bgcolor=#fff8dc> 
<tr>
<td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td>

</tr>
<tr> 
<td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> 
</tr>
<tr> 
<td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> 
</tr>
<tr> 
<td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> 
</tr>
</table>

看看效果怎样:

第一行1单元格 第一行2单元格 第一行3单元格 第一行4单元格
第二行1单元格 第二行2单元格 第二行3单元格 第二行4单元格
第三行1单元格 第三行2单元格 第三行3单元格 第三行4单元格
第四行1单元格 第四行2单元格 第四行3单元格 第四行4单元格

 


 

 去掉bgcolor=#fff8dc,加上一个表格background属性,背景纯色图片(粉红色)。再加上表格的宽度属性width=600与高度属性height=300。

代码:

<table border=3 bordercolor=#66ccff width=600  height=300

background=http://img.blog.163.com/photo/JXQVrqLbX52z9RqNEhRBXg==/2549881814022432618.jpg>
<tr>
<td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td>

</tr>
<tr> 
<td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> 
</tr>
<tr> 
<td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> 
</tr>
<tr> 
<td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> 
</tr>
</table>

看看效果如何:

第一行1单元格

第一行2单元格

第一行3单元格

第一行4单元格

第二行1单元格

第二行2单元格

第二行3单元格

第二行4单元格

第三行1单元格

第三行2单元格

第三行3单元格

第三行4单元格

第四行1单元格

第四行2单元格

第四行3单元格

第四行4单元格


 

加一个居中标记<p align =center> , 加一个单元格间距属性值cellspacing=15. 加一个单元格衬距属性值cellpadding=10.

代码:

<p align=center>
<table border=3 bordercolor=#66ccff width=600  height=300 cellspacing=15 cellpadding=10
background=http://img.blog.163.com/photo/JXQVrqLbX52z9RqNEhRBXg==/2549881814022432618.jpg>
<tr>
<td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td>

</tr>
<tr> 
<td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> 
</tr>
<tr> 
<td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> 
</tr>
<tr> 
<td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> 
</tr>
</table>

看看效果:

第一行1单元格 第一行2单元格 第一行3单元格 第一行4单元格
第二行1单元格 第二行2单元格 第二行3单元格 第二行4单元格
第三行1单元格 第三行2单元格 第三行3单元格 第三行4单元格
第四行1单元格 第四行2单元格 第四行3单元格 第四行4单元格

 


 

标记<caption>..........</caption> :这是包含在表格内的,只不过看不见表格线而已。如果表格移动或者在html中重新定位,使用capiton标记定义的标题会随着表格相应的移动。

代码:

<p align=center>
<table border=3 bordercolor=#66ccff bgcolor=#fff8dc width=600  height=300>
<caption>这是四行八列的表格</caption> 
<tr>
<td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td> 
</tr>
<tr> 
<td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> 
</tr>
<tr> 
<td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> 
</tr>
<tr> 
<td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> 
</tr>
</table>

效果:

这是四行八列的表格

第一行1单元格

第一行2单元格

第一行3单元格

第一行4单元格

第二行1单元格

第二行2单元格

第二行3单元格

第二行4单元格

第三行1单元格

第三行2单元格

第三行3单元格

第三行4单元格

第四行1单元格

第四行2单元格

第四行3单元格

第四行4单元格

 

 


 

      表头标记<TH>.....</TH>。定义表格行标记<TR>第一行以醒目方式显示。

属性colspan=4,属值是正整数。这是一个跨行属性,属值是4表示跨第一行四个单元格。我们把表头的高度设置为height=20。表格的其它三行高度属性值设置为每行height=60。因为表格的总高度为height=300.

再加入一对文字标记<font face=隶书 size=3 color=#FF0000>................</font>

怎么在表头一行里换背景颜色,只要在表头标记里加一个属性值bgcolor=#FFE4C4,即可。

怎么在行标记<tr>里换背景颜色呢?设置方法同表头标记<th>一样,这里我把表格的<tr>第三行设置为bgcolor=#F0FFFF。那怎么在表格的单元格<td>里也把单元格背景颜色也换了,这里我把第四行1单元格颜色设置为bgcolor=#ADFF2F,把第四行4单元格颜色设置为bgcolor=#00FFFF。

代码如下:

<p align=center>
<table border=3 bordercolor=#66ccff bgcolor=#fff8dc width=600  height=300>
<caption>这是四行八列的表格</caption> 
<th colspan=4 height=20 bgcolor=#FFE4C4><font face=隶书 size=3 color=#FF0000>这是四行八列的表

格</font></th>
<tr height=60> 
<td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> 
</tr>
<tr height=60 bgcolor=#F0FFFF> 
<td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> 
</tr>
<tr height=60> 
<td bgcolor=#ADFF2F>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td

bgcolor=#00FFFF>第四行4单元格</td> 
</tr>
</table>

看看效果吧:

这是四行八列的表格
这是四行八列的表 格

第二行1单元格

第二行2单元格

第二行3单元格

第二行4单元格

第三行1单元格

第三行2单元格

第三行3单元格

第三行4单元格

第四行1单元格

第四行2单元格

第四行3单元格

第四行4单元格

 

 

 

 

  评论这张
 
阅读(183)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017