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

一心执着博客

博客正在更新中

 
 
 

日志

 
 
关于我

江苏徐州,毕业师范学院热爱文学,喜欢交友、科学,追寻真、善、美,执着永恒的爱!

网易考拉推荐

各种表格制作代码(手把手叫你做表格)  

2011-06-16 11:55:03|  分类: 表格制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、简答表格代码

一栏一列一个单元格

<table border=1>

<tr><td>1</td></tr>

</table>

1

 

注释:<table >告诉电脑你制作表格,至于border=1表示设定此表格框线粗细值为1。

一组<tr></tr>设定一横列的开始,一组<td></td>设定一个栏位,文字要放在里面。

注意:如果方格内不写1,则用<tr><td></td></tr>或者<tr><td><p></p></td></tr>表示

其中<p></p>是换行、空格、段落的意思<>是段落开始的标志,<>段落结束的标志,<p>一大段文字</p>

2下面我们增加2个格子代码如下:

<table border=1>

<tr><td>1</td><td>2</td><td>3</td></tr></tr>

</table>

1 2 3

看见了,<tr></tr>没增加,说明还是一横列,<td></td>增加2个,说明增加2个栏位,

也就是说你想制作一行多栏,就可以复制多个<td></td>明白!

 

3如果增加列,可以这样,猜猜下面代码是几列几栏,代码如下:

<table border=1>

<tr> <td>1</td><td>2</td><td>3</td><td>4</td></tr>

<tr> <td>5</td><td>6</td><td>7</td><td>8</td></tr>

  </table>

1 2 3 4
5 6 7 8

二、合并表格栏位

1,如何将上图两行两列,第一行(合并成1栏,就是将2、3、4栏合成1个大栏)

代码如下:

<table border=1>

<tr> <td colspan=4>1</td></tr>

<tr> <td>1</td><td>2</td><td>3</td><td>4</td></tr>

</table>

1
1 2 3 4

参数是colspan左右栏位合并属性,colspan=“4” 意思是这个栏位左右横跨4个栏位

将其合并一个栏位。正因为这样,比原来少了三组<td></td>

2上下栏合并,将1、5格合并成一大格,代码如下:

<table border=1>

<tr> <td rowspan=2>1</td><td>2</td><td>3</td><td>4</td></tr>

<tr> <td>6</td><td>7</td><td>8</td></tr>

  </table>

1 2 3 4
6 7 8

rowspan参数是上下栏合并的属性,rowspan="2"意思是横跨上下两栏,

要合并栏位就要有栏位牺牲掉,倒霉的5栏牺牲了,

因此也就少了一组<td>5</td>

三、表格对其设置

可以自己设置表格大小吗?当然可以,自由设定表格的宽和高,我来设置

一个宽为200,高为50的表格,代码如下:

<table width="200" border="1" height="50">

<tr><td>1</td></tr>

</table>

1

何将1设置到栏中间,只要在在<td>中加入align=center 让1回到中间如下:

<table width="200" border="1" height="50">

<tr><td align=center>1</td></tr>

</table>

1

其他的align=left align=right分别是将栏中文字置左、置右,表格中的文字靠上方、下方,

可以用参数valign=top,bottom也可以让栏中物件垂直 置中valign=middle

四、表格背景设置

可以设定某栏,某列的颜色,方法和加背景颜色一样,利用bgcolor="边框颜色码"就行了。

下面是指定整个表格的背景颜色方法代码:

<table border=1>

<tr bgcolor=#ff0000> <td>1</td><td>2</td><td>3</td><td>4</td></tr>

<tr> <td>5</td><td>6</td><td>7</td><td>8</td></tr>

  </table>

1 2 3 4
5 6 7 8

如果将<bgcolor=#ff0000>加到<td>中,可以指定一栏背景颜色

<table border=1>

<tr > <td bgcolor=#ff0000>1</td><td>2</td><td>3</td><td>4</td></tr>

<tr> <td>5</td><td>6</td><td>7</td><td>8</td></tr>

  </table>

1 2 3 4
5 6 7 8

表格除了设定颜色背景,还可以用图片做背景,方法和边框背景设置一样,

只要将background="图片名称"加到表格中就行了,

五、表格框线设置

设定表格粗细,利用border=“粗细值”就行了

设定表格颜色,利用bordercolor=“颜色码”就行了,

设定表格阴影、亮面颜色,让表格看起来有立体感,

利用bordercolorlight="#颜色码"(亮面设定)bordercolordark="#颜色码"(暗面设定)就行了

如:

<table border=5 bordercolor="#0080ff" bordercolorlight="#62b0ff" bordercolordark="004b97">

<tr > <td bgcolor=#ff0000>1</td><td>2</td><td>3</td><td>4</td></tr>

<tr> <td>5</td><td>6</td><td>7</td><td>8</td></tr>

  </table>

1 2 3 4
5 6 7 8

六、表格栏距设置

参数一、cellpadding自由设定表格内文距离格线的距离,属性好用,一般值设定在2,

不过我建议设定为4比较漂亮,代码:

 

<table border=1 cellpadding=10>

<tr><td>1</td><td>2</td><td>3</td></tr></tr>

</table>

1 2 3

参数二、cellspacing属性设定表格栏位格线之间距离,一般定值为2,我设为0

<table border=1 cellspacing=5>

<tr><td>1</td><td>2</td><td>3</td></tr></tr>

</table>

1 2 3

七、表格立体化

喜欢在表格前面加上如下代码就可以了

<div align=center>

<div style="filter:shadow(color=000066,srength=10);width:500px">

 <font style="font-weigth:normal;fontsize:20pt; color:#7fffd4; line-heigth:normal;font-style:normal;font-wariant:normal">

<table border=1 cellspacing=5>

<tr><td>1</td><td>2</td><td>3</td></tr></tr>

</table>

1 2 3
  评论这张
 
阅读(86)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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