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

OK之家

原创心得 仅供交流 欢迎交友

 
 
 

日志

 
 
关于我

本人是一个电脑网络爱好者,为了自娱自乐,也为了同有心人交流心得,特制作了这个博客,希望能抛砖引玉.更希望能得到大家的帮助,请常来看看,多多指教.

网易考拉推荐

[原创]HTML代码学习小结(三)-表格代码  

2007-07-06 10:41:53|  分类: 博客网页技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

[原创]HTML代码学习小结()

表格代码

在网页和博客中,经常用到表格,有的滚动字幕也要用到表格代码,<table></table>用来创建表格,下面是表格代码的相关设置。

表格的相关代码

用途及说明

<table height= width=>

表格的高、宽,一般用像素值

<tr></tr>

<tr height= width=>设置高、宽

<td></td>

单元格<td height= width=>设置高、宽,文本只有放在<td></td>中才能显现

< tr align=>

是水平对齐,可以是left(左对齐)center(居中)right(右对齐)

< tr valign=>

是垂直对齐,可以是top(顶端对齐)middle(居中对齐)bottom(底部对齐)

<table bgcolor=>

设置表格的背景色。

<table border=>

设置边框的宽度,若不设置此属性,则边框宽度默认为0

<table bordercolor=>

边框的颜色。

<table bordercolorlight=>

边框明亮部分的颜色

<table bordercolordark=>

边框昏暗部分的颜色

<table cellspacing=>

表格格子之间空间的大小。

<table cellpadding=>

表格格子边框与其内部内容之间空间的大小。

说明:以上各种代码可以配合使用。颜色代码使用十六进制RGB颜色码或Html语言规定的颜色名( RED为红色)

表格示范在浏览器中显示如下:

  

上图的表格代码:

<title>用表格代码设计的示范表格</title>

<p align="center">

<font size=4; color=Black; face=宋体>办公家具统计表</p>

<table align="center" border=1 width="64%" bgcolor=#E8E8E8 cellpadding="2" bordercolor="#0000FF"

bordercolorlight="#7D7DFF" bordercolordark="#0000A0">

<tr>

<th width="18%" rowspan="2">办公室</th>

<th width="60%" colspan="3" height="43">品名</th>

</tr>

<font size=4; color=Black; face=黑体>

<tr>

<td width="23%" align="center">

办公桌()</td>

<td width="24%" align="center">

办公椅()</td>

<td width="27%" align="center">

沙发()</td>

</tr>

<tr>

<td width="18%" align="center" height="24">办公室1</td>

<td width="23%" align="center" height="24">2</td>

<td width="24%" align="center" height="24">2</td>

<td width="27%" align="center" height="24">1</td>

</tr>

<tr>

<td width="18%" align="center">办公室2</td>

<td width="23%" align="center">2</td>

<td width="24%" align="center">2</td>

<td width="27%" align="center">1</td>

</tr>

<tr>

<td width="18%" align="center">办公室3</td>

<td width="23%" align="center">1</td>

<td width="24%" align="center">1</td>

<td width="27%" align="center">1</td>

</tr>

</table>

代码祥解:

1<title> </title>是标题它之间的文字不是显示在正文中, “用表格代码设计的示范表格”这几个字是显示在浏览器最上方的标题栏;

2<p align="center">

P是段落,align是水平对齐方式,Center是居中;

3<font size=4; color=Black; face=宋体>

Font是字体,size是大小,在这里是字号,color是顏色[参看HTML代码学习小结()代码简介及色代码 介绍一种神奇的网页调色板]face是字型,也就是平时说的宋体等;

4<table align="center" border=1 width="64%" bgcolor=#E8E8E8 cellpadding="2" bordercolor="#0000FF"

bordercolorlight="#7D7DFF" bordercolordark="#0000A0">

table align="center"同上,是指表格居中;border=1是边框的宽度为1width="64%"是宽度占页面的64%bgcolor=是表格的背景色;cellpadding="2"是格子边框与其内部内容之间空间的大小是2bordercolor=是边框的颜色;bordercolorlight="#7D7DFF" bordercolordark="#0000A0">是边框明亮部分的颜色的灰暗部分的顏色;

5<tr></tr><th></th><td></td>

分别表示行、表格头和单元格;

6<th width="18%" rowspan="2">办公室</th>

是指表格头(最上面的办公室)的宽度占18%,间距是2(指相当于2个格子的高度);

7. <th width="60%" colspan="3" height="43">品名</th>

colspan="3"也是间距,是指相当于3个格子的宽度;

  评论这张
 
阅读(1063)| 评论(1)
推荐 转载

历史上的今天

评论

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

页脚

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