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

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

TABLE表格的使用 - HTML基础教程  

2010-08-24 17:07:53|  分类: java |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一、表格的基本使用方法

 标 记  描 述
 <TABLE>...</TABLE>  表格的标记
 <TR>...</TR>  行标记
 <TD>...</TD> 单元格标记

1、<table>表格的基本语法

基本语法:
<TABLE>
    <TR>
        <TD>...</TD>
        <TD>...</TD>
        ......
    </TR>
    <TR>
        <TD>...</TD>
        ......
    </TR>
    ......
</TABLE>

<TABLE>标记代表表格的开始,<TR>标记代表行的开始,<TD>和</ed>之间就是单元格的内容。

2、表格的边框属性BORDER

基本语法:
<TABLE BORDER=VALUE>

通过BORDER属性可以自定义边框线的宽度(单位:像素)。

3、表格的宽度和高度属性 WIDTH、HEIGHT

基本语法:
<TABLE WIDTH=VALUE HEIGHT=VALUE>

通过WIDTH、HEIGHT属性定义表格的宽度和高度(单位:像素或百分比)。

4、表格的边框颜色属性 BORDERCOLOR

基本语法:
<TABLE BORDERCOLOR=colorVALUE>

可以自定义表格边框的颜色,colorVALUE的值可以使用英文颜色名也可以使用十六进制颜色值。

5、表格的亮边框颜色属性 BORDERCOLORLIGHT

基本语法:
<TABLE BORDERCOLORLIGHT=colorVALUE>

自定义颜色可以使用英文颜色名也可以使用十六进制颜色值。

6、表格的按边框颜色属性 BORDERCOLORDARK

基本语法:
<TABLE BORDERCOLORDARK=colorVALUE>

自定义颜色可以使用英文颜色名也可以使用十六进制颜色值。

7、表格的背景颜色属性BGCOLOR

基本语法:
<TABLE BGOCLOR=colorVALUE>

自定义颜色可以使用英文颜色名也可以使用十六进制颜色值。

8、表格的背景图像属性BACKGROUND

基本语法:
<TABLE BACKGROUND=FileName>

自定义背景图像时,写下图片文件的绝对路径或是相对路径。

9、单元格间距属性 CELLSPACING

基本语法:
<TABLE CELLSPACING=VALUE>

单元格的间距以像素为单位。

10、单元格边距属性 CELLPADDING

基本语法:
<TABLE CELLPADDING=VALUE>

单元格的边距以像素为单位。

11、表格的水平对齐属性 ALIGN

基本语法:
<TABLE ALIGN="VALUE">

VALUE的值可以是:left、center、right,分别表示靠左、居中、靠右。

12、表格的边框演示属性 FRAME

使用FRAME属性可以控制表格的边框样式类型。

基本语法:
<TABLE FRAME="VALUE">

 FRAME属性值  描 述
 above  显示上边框
 below  显示下边框
 border  显示上下左右边框
 box  显示上下左右边框
 hsides  显示上下边框
 lhs  显示左边框
 rhs  显示右边框
 void  不显示边框
 vsides  显示左右边框

13、表格的内部边框样式属性 RULES

使用RULES可以控制表格内部边框的样式。

基本语法:
<TABLE RULES=VALUE>

 RULES的属性值 描 述 
 All  显示所有的内部边框
 Cols  仅显示行边框
 Groups  显示介于行列间的边框
 None  不显示内部边框
 Rows  仅显示列边框


二、表格的标题与表头

在HTML语言中,可以自动通过标记为表格添加标题。表格的第一行称为表头。

1、表格标题 <CAPTION>

通过这个标记可以直接添加表格的标题,而且可以控制标题文字的排列属性。

基本语法:
<CAPTION>...</CAPTION>

<CAPTION>标记之间的就是标题内容,这个标记使用在<TABLE>标记中。

2、表格标题的水平对齐属性 ALIGN

基本语法:
<CAPTION ALIGN=VALUE>

VALUE 的值可为:left、center、right。

3、表格标题的垂直对齐属性 VALIGN

基本语法:
<CAPTION VALIGN=VALUE>

VALUE 的值可为:TOP、BOTTOM,分别为居上、居底。

4、表格的表头 <TH>

表头是指表格的第一行,其中文字可以实现居中并加粗显示,通过<TH>标记实现。

基本语法:
<TABLE>
    <TR>
        <TH>...</TH>
        ......
    </TR>
    <TR>
        <TD>...</TD>
        ......
    </TR>
    ......
</TABLE>


三、行标记 <TR> 属性

<TR> 标记属性使用方法与<TABLE> 标记属性非常相似,用来设定表格中某一行的属性。

 属 性  描 述
 ALIGN  行内容水平对齐
 VALIGN  行内容垂直对齐
 BGCOLOR  行背景颜色
 BORDERCOLOR  行边框颜色
 BORDERCOLORLIGHT  行亮边框颜色
 BORDERCOLORDARK  行暗边框颜色


四、单元格标记 <TD> 属性

<TD> 标记属性使用方法与<TABLE> 标记属性非常相似,用来设定表格中某一单元格的属性。

属 性   描 述
ALIGN 单元格内容水平对齐
VALIGN 单元格内容垂直对齐
BGCOLOR 单元格的背景颜色
BACKGROUND 单元格的背景图像
BORDERCOLOR 单元格的边框颜色
BORDERCOLORLIGHT 单元格的亮边框颜色
BORDERCOLORDARK 单元格的暗边框颜色
WIDTH 单元格的宽度
HEIGHT 单元格的高度

五、表头标记 <TH> 属性

<TH> 标记属性使用方法与<TABLE> 标记属性非常相似,用来设定表格中某一单元格的属性。

 属 性  描 述
 ALIGN  单元格内容水平对齐
 VALIGN  单元格内容垂直对齐
 BGCOLOR  单元格的背景颜色
 BACKGROUND  单元格的背景图像
 BORDERCOLOR  单元格的边框颜色
 BORDERCOLORLIGHT  单元格的亮边框颜色
 BORDERCOLORDARK  单元格的暗边框颜色
 WIDTH  单元格的宽度
 HEIGHT  单元格的高度


六、表格的结构标记<THEAD>、<TBODY>、<TFOOT>

为了在源代码中清除的区分表格结构,HTML中规定了<THEAD>、<TBODY>、<TFOOT>三个标记,分别用于表格的首、主体、结尾。

1、表格的首标记 <THEAD>

基本语法:
<THEAD align=VALUE bgcolor=colorValue valign=value>

align(水平对齐)、bgcolor(背景颜色)、valign(垂直对齐)。

2、表格的主体标记 <TBODY>

基本语法:
<TBODY align=VALUE bgcolor=colorValue valign=value>

align(水平对齐)、bgcolor(背景颜色)、valign(垂直对齐)。

3、表格的结尾标记 <TFOOT>

基本语法:
<TFOOT align=VALUE bgcolor=colorValue valign=value>

align(水平对齐)、bgcolor(背景颜色)、valign(垂直对齐)。


七、表格嵌套

其实在页面中排版大都是用表格嵌套完成的。就是一个表格内可以套入另一个表格。

我们来看一段代码,你运行下结果试试看看。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格的嵌套</title>
</head>

<body>
<table width="600" height="100%" border="1">
  <tr>
    <td>标志</td>
    <td>广告条</td>
  </tr>
  <tr>
    <td><table width="150" border="1">
      <tr>
        <td>首页</td>
      </tr>
      <tr>
        <td>公司简介</td>
      </tr>
      <tr>
        <td>新闻动态</td>
      </tr>
      <tr>
        <td>产品中心</td>
      </tr>
      <tr>
        <td>联系我们</td>
      </tr>
    </table></td>
    <td><table width="450" border="1">
      <tr>
        <td>内容一</td>
        <td rowspan="2">内容三</td>
      </tr>
      <tr>
        <td>内容二</td>
      </tr>
      <tr>
        <td colspan="2">版权信息</td>
        </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

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

历史上的今天

评论

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

页脚

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