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

壳子的博客

学无止境

 
 
 

日志

 
 

【精】在日志里插入表格  

2010-05-23 18:11:58|  分类: 代码基本知识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

引用

zhong-wei-jie在日志里插入表格

 一、 写日志或编辑日志时,左键点工具条如下图的2#图标,会弹出《添加表格》。

在日志里插入表格 - zhong-wei-jie - 钟点工的博客
 
在日志里插入表格 - zhong-wei-jie - 钟点工的博客

 

二、 在弹出的表格里,填好各项参数,得到一个新的表格,再在编辑的《html》状态下,将内容处的<TD>&nbsp;</TD>分别按顺序改填为表-1~表-25内容,得到以下表格。

 

表-1 表-2 表-3 表-4 表-5
表-6 表-7 表-8 表-9 表-10
表-11 表-12 表-13 表-14 表-15
表-16 表-17 表-18 表-19 表-20
表-21 表-22 表-23 表-24 表-25

 

三、 以上表格的代码如下:

 <P align=center>
<TABLE style="BORDER-RIGHT: 5px solid; BORDER-TOP: 5px solid; BORDER-LEFT: 5px solid; BORDER-BOTTOM: 5px solid; TEXT-ALIGN: center" borderColor=#ff0000 cellSpacing=1 cellPadding=3 width=500 border=5>
<TBODY>
<TR>
<TD>表-1</TD>
<TD>表-2</TD>
<TD>表-3</TD>
<TD>表-4</TD>
<TD>表-5</TD></TR>
<TR>
<TD>表-6</TD>
<TD>表-7</TD>
<TD>表-8</TD>
<TD>表-9</TD>
<TD>表-10</TD></TR>
<TR>
<TD>表-11</TD>
<TD>表-12</TD>
<TD>表-13</TD>
<TD>表-14</TD>
<TD>表-15</TD></TR>
<TR>
<TD>表-16</TD>
<TD>表-17</TD>
<TD>表-18</TD>
<TD>表-19</TD>
<TD>表-20</TD></TR>
<TR>
<TD>表-21</TD>
<TD>表-22</TD>
<TD>表-23</TD>
<TD>表-24</TD>
<TD>表-25</TD></TR></TBODY></TABLE></P>
 

 


四、 本例表格样式代码的解释:
1.  <table>  表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>
2.  <tbody><tbody>  表体的起始符。紧跟在<table>之后,表示表体开始。必须有终止符<tbody>,放在</table>之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,因为,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。
3.  height=100   表格的高度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。
4.  border  表格的边框线宽。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框,系统默认里面的内容为平铺。
5.  Cellspacing  单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing
6.  cellpadding  单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing0,则表示单元格里的内容与表格周边边框的距离。简单的说:内容与此距离决定了单元格的高
7.  Width  表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。
8.  BORDER-RIGHT: 5px solid; --边框到右边的像素,实线
9.  BORDER-TOP: 5px solid; --边框到顶部的像素,实线
10.  BORDER-LEFT: 5px solid; --边框到左边的像素,实线
11.  BORDER-BOTTOM: 5px solid" --边框到底部的像素,实线
12.  <tr></tr>  表格的行。其中,ttablerrow(行)。有多少组tr,这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>本例5行,每行5列
13  <td></td>   表格的列。ttabled可理解为down(向下)。有多少组td,这张表格就有多少列。<td>紧跟在<tr>之后。终止符为</td>tdtr配合构成单元格。
14.  borderColor=#ff0000 --边框线红色(修改前为白色:#ffffff。也可以改为:#cccccc--浅灰,#999999--中灰,#666666--深灰, #333333--黑灰, 
#000000--黑色 )
15.  bgColor=#ffffff --  表格的背景白色 
16.  align=center    内容置中(left-置左)(right-置右)

 

五、可按需要从以下资料找到合适的代码,修改表格。

17.  <TD rowSpan=4>     跨行数

18.  <TD width=180 colSpan=3>     跨列数

19.  BORDER-COLLAPSE  合并边框

20.  Background  表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。

21. bgColor  表格的背景色

22.  borderColorDark=#0d1737  暗边框,颜色为0d1737 border值不为0时(即有边框线)设置有效。暗边框指表格的右边和下边的边框。

23.  borderColorLight=#24387a  亮边框,颜色为24387aborder值不为0时(即有边框线)设置此值有效。亮边框指表格的左边和上边的边框。

 24.  关于style样式代码--详细     更详细:CSS

 

 

  评论这张
 
阅读(1005)| 评论(0)

历史上的今天

评论

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

页脚

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