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

欢迎您光临我的空间

http://cenqw.blog.163.com

 
 
 

日志

 
 

表格的制作{博客基础}  

2012-03-04 15:02:25|  分类: 制作技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 

表格的制作

 1行: 代码:

内容

 

内容
内容

2行:
代码:

<TABLE borderColor=#8e1d77 cellSpacing=15 cellPadding=0 width="100%" bgColor=#f4b5e7 border=10>
<TBODY>
<TR>
<TD>内容</TD>
<TR>
<TD>内容</TD></TR></TBODY></TABLE>

4行:

内容
内容
内容
内容

代码:

<TABLE borderColor=#88225f cellSpacing=10 cellPadding=0 width="100%" bgColor=#ebaddf border=12>
<TBODY>
<TR>
<TD>内容</TD>
<TR>
<TD>内容</TD>
<TR>
<TD>内容</TD>
<TR>
<TD>内容</TD></TR></TBODY></TABLE>

2列:

内容 内容

代码:

<TABLE borderColor=#b11b57 cellSpacing=10 cellPadding=0 width="100%" bgColor=#f5a3c4 border=10>
<TBODY>
<TR>
<TD>内容</TD>
<TD>内容</TD></TR></TBODY></TABLE>

5列:

内容 内容 内容 内容 内容

代码:

<TABLE borderColor=#991147 cellSpacing=15 cellPadding=0 width="100%" bgColor=#f7b3ce border=10>
<TBODY>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR></TBODY></TABLE>

行列合并,2行2列

内容 内容
内容 内容

代码:

<TABLE borderColor=#7a1f56 cellSpacing=10 cellPadding=0 width="100%" bgColor=#fcbdad border=10>
<TBODY>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TR>
<TD>内容</TD>
<TD>内容</TD></TR></TBODY></TABLE>

8行3列:

内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容

代码:将空格码删除掉,太多我就不一个个的删除了,你做时一定要在代码中删除空格码然后再添加内容.

<TABLE borderColor=#f68080 cellSpacing=15 cellPadding=0 width="100%" bgColor=#fee4de border=10>
<TBODY>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE>

====================================================

&nbsp;空格码




cellspacing="2" 表格格线的厚度

border=1>边框粗细

width="100%"边框的宽度

borderColor=#cccccc 边框颜色

bgColor=#ffffff 背景颜色

cellPadding=3边距

 

-----------------------------------------------------------------------------------------------------------

云水禅心
插入内容

代码

<span style="font-size: 12px"><center><fieldset style="border:20px ridge #FF0000; padding:2px; width:600; "><legend><b><font face="华文行楷" color="#FF0000" style="font-size: 25pt">云水禅心</font></b></legend> <div align="center"><table border="0" width="600" cellspacing="0" cellpadding="0"><tr><td align="left"><div align="center"> 插入内容</div></td></tr> </table></div></fieldset></center></span>


 

在论坛里发表的HTML代码帖,就是用HTML代码制作表格,灵活控制帖子的效果。在这里我将由浅入深,循序渐进地向大家介绍如何用HTML代码制作表格。

注意:用HTML代码制作表格,应当在你电脑里的记事本里编辑书写。不要在论坛的发帖栏里编辑书写。)

表格以<table>和</table>分别作起始标识符,成对出现,不用区分大小写。即这样写也可以:<TABLE>----------</TABLE>。在<table>和</table>之下,还需要由两个成对的标识符号定义表格的行、列,它们分别是<tr>……</tr>,<td>……</td>,<tr>标识符定义表中的行,<td>标识符定义数据表元,即每行中的每一列。<td>……</td>要包含在<tr>……</tr>里面。

一个基本的表格代码如下:

<table border=2 width=80% height="300">
<tr>
<td>

这里是表格里的内容

</td></tr></table>

在<table>里有一些必要的常用属性参数。这些属性参数根据你的需要进行选择,必须放到<table>里面。

align="center"

表格的摆放位置(水平),可选值为: left(居左), right(居右), center(居中)。

border="2" 表格边框的粗细。

bordercolor="#0000FF" 表格边框的颜色。

bgColor=#33ffff 表格的背景颜色。

width="400"

表格宽度,接受绝对值(如width=80)及相对值(width=80%)。

height="300" 表格高度。

bordercolorlight="#00FF00"

表格边框向光部分的颜色

bordercolordark="#00FFFF"

表格边框背光部分的颜色,使用bordercolorlight 或bordercolordark 时 bordercolor 将会失效。

注意:表格边框向光部分的颜色和表格边框背光部分的颜色在颜色选取上应该选同一色系。只不过向光部分的颜色较浅或淡,而背光部分的颜色较深或浓。)

background="http//.........gif"

表格的背景图片,与 bgcolor 不要同用。

cellspacing="2" 表格格线的厚度。

cellspacing="8" 边框空白处的大小。即表格内容与边框的距离。

颜色的选择,即可以使用颜色代码"#00FF00"等,也可以使用"red","blue","yellow","black"等。

一张完整的表格全部语法如下:

<table border=2 width=80% height="300">

<tr>

<td>

教你用HTML代码制作表格。

</td></tr></table>

效果如下:

教你用HTML代码制作表格。

我们为了让表格在显示屏上居中显示,让表格中的文字在表格中居中显示。就要在<table>里加上居中的属性参数align="center",在<td>里加上让表格内容居中的属性参数align="center".

代码如下:

<table align="center" border="2" width="80%" height="300">
<tr>
<td align="center"> 教你用HTML代码制作表格。
</td></tr></table>

效果:

教你用HTML代码制作表格。

是不是很简单?为了让表格更加生动,我们可以将前面列举的表格属性参数继续向<table>里添加.

首先,让边框加粗一些.把border="2"改为border="10"。

二:进行表格边框的颜色设置。例如:把边框的颜色设置为红色。

bordercolor="#FF0000" 或者

bordercolor=red

把属性添加到<table>里。

代码如下:

<table align="center" border="10" width="80%" height="300" bordercolor="#FF0000">
<tr>
<td align="center"> 教你用HTML代码制作表格。
</td></tr></table>

效果:

教你用HTML代码制作表格。

 

我们现在看看只把边框加宽.不设定边框颜色属性,效果是什么样的?

代码如下:

<table align="center" border="10" width="80%" height="300">
<tr>
<td align="center">
教你用HTML代码制作表格。
</td></tr></table>

效果:

教你用HTML代码制作表格。

我们现在来看看边框向光部分的颜色和边框背光部分的颜色设置。向光部分的边框属性:bordercolorlight。背光部分的边框属性:bordercolordark。

例如:

边框向光部分的颜色设为 #E6421A(桔红色)

bordercolorlight=#E6421A

边框背光部分的颜色设为 #FF0000 (红色)

bordercolordark=#FF0000

代码如下:

<table align="center" border="10" width="80%" height="300" bordercolorlight=#E6421A bordercolordark=#FF0000>

<tr>

<td align="center">

教你用HTML代码制作表格。

</td></tr></table>

效果:

教你用HTML代码制作表格。

 

 

  评论这张
 
阅读(432)| 评论(3)
推荐 转载

历史上的今天

评论

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

页脚

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