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

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML表格标记详解1:标签定义 TABLE参数设定  

2010-02-21 05:11:22|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 
 

 

 

            表格标记详解1

 
文章简介:

 

<TABLE> <TR> <TD>
<TH>
<CAPTION>  

        表格标记:TABLE TR TD TH CAPTION,TABLE TR TD这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。

        TABLE是一个容器标记,意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用,属容器标记的还有其他。(表格标记)

        TR用以标示表格列(行标记)(row)
        TD用以标示表格单元格(单元格标记)\储存格(cell)

        语法解释:
        <TABLE>标记代表表格的开始,<TR>标记代表行开始,而 <TD>和</TD>之间的就是单元格的内容。这几个标记之间是从大到小,逐层包含的关系,由最大的表格,到最小的单元格。一个表格可以有多个<TR>和<TD>标记,分别代表多行和多个单元格。

一、HTML表格标签定义:

 

<TABLE>

标签定义

 

        <TABLE>标签定义HTML表格。
简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。
        tr元素定义表格行,th元素定义表头,td元素定义表格单元。
        更复杂的HTML表格也可能包括caption、col、colgroup、thead、tfoot 以及tbody元素。

 

 

实例:

一个简单的HTML表格,包含两行两列:

<table border="1">
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

效果:
文本编辑 文本编辑
文本编辑 文本编辑

<TR>

标签定义

 

        <TR>标签定义HTML表格中的行。
        tr 元素包含一个或多个th或td元素。

 

实例:

<table border="1">
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

效果:
文本编辑 文本编辑
文本编辑 文本编辑

<TH>

标签定义

 

        <TH>标签定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体。

 

<table border="1">
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

效果:

文本编辑 文本编辑
文本编辑 文本编辑

<TD>

标签定义

       

         <TD>标签定义HTML表格中的标准单元格。

         HTML表格有两类单元格:

        表头单元 - 包含头部信息(由th元素创建)
        标准单元 - 包含数据(由td元素创建)
        td元素中的文本一般显示为正常字体且左对齐。

 

实例:

<table border="1">
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

效果:
文本编辑 文本编辑
文本编辑 文本编辑
二、HTML表格标签<TABLE>的参数设定(常用):

       

         例如: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

 

WIDTH

HEIGHT

宽度和

高度属性

 

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

 

语法解释
        通过WIDTH属性定义表格的宽度,HEIGHT属性定义表格的高度,单位是像素或百分比。如果是百分比,则可分为两种情况:如果不是嵌套表格,那么百分比是相对于浏览器窗口而言;如果是嵌套表格,则百分比相对的是嵌套表格所在的单元格宽度。

 

<TABLE BORDER=1 WIDTH=80 HEIGHT=20>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
</TABLE>

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

BORDER

表格的边框属性

 

基本语法
<TABLE BORDER=VALUE>

语法解释
        通过BORDER属性定义边框线的宽度,单位为像素。

 

<TABLE BORDER=5 WIDTH=80 HEIGHT=20>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
</TABLE>

 

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

CELLSPACING

单元格

间距属性

 

基本语法
<TABLE CellSpacing=value>

语法解释
        可设置或返回在表格中的单元格之间的空白量(表格中各个单元格之间的距离)(以像素为单位)。

 

 

<TABLE BORDER=1 cellspacing=10 WIDTH=80 HEIGHT=20>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
</TABLE>

 

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

 

CELLPADDING单元格

边距属性

 

        单元格边距是指单元格内容和边框之间的距离。
基本语法
<TABLE Cellpadding=value>

语法解释
        单元格的边距以像素为单位。

 

<TABLE BORDER=1 cellpadding=10 WIDTH=80 HEIGHT=20>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
<TR>
<TD>文本编辑</TD><TD>文本编辑</TD>
</TR>
</TABLE>

 

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

 

 

ALIGN

水平对齐属性

       

        在水平方向上,可以设定表格的对齐方式,分别有居左、居中、居右3种。

基本语法

<TABLE ALIGN=LEFT>

<TABLE ALIGN=CENTER>

<TABLE ALIGN=RIGHT>

语法解释
    LEFT为居左,CENTER为居中,RIGHT为居右。那表格是放于中间的,为怕一些浏览器不支援,故特加上居中标记<CENTER>,只是多 层保证而己,当然只用<CENTER>亦可。

 

<center>
<TABLE border=1 align=center>
<TBODY>
<TR>
<TD>文本编辑</TD>
<TD>文本编辑</TD></TR>
<TR>
<TD>文本编辑</TD>
<TD>文本编辑</TD></TR>
<TR>
<TD>文本编辑</TD>
<TD>文本编辑</TD></TR></TBODY></TABLE></center>

 

居左效果:

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

 

 

 

 

  居中效果:

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑

 

居右效果:

文本编辑 文本编辑
文本编辑 文本编辑
文本编辑 文本编辑
BORDERCOLOR边框色属性

 

        为了美化表格,可以为表格设定不同的边框颜色,NC与IE有不同的效果。

基本语法
<TABLE BORDERCOLOR=COLOR_VALUE>

语法解释
        定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。
 

 

<table border="1" Bordercolor=#003333>
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

文本编辑 文本编辑
文本编辑 文本编辑
Bordercolorlight亮边框色属性Bordercolordark暗边框色属性

 

        在表格中可以单独定义左上边框的颜色,也可以定义单元格中右下边框的颜色,这两个位置的边框色我们称之为亮边框或暗边框色。只适用于IE。

基本语法
亮边框色属性<TABLE Bordercolorlight=color_VALUE>
暗边框色属性<TABLE Bordercolordark=color_VALUE>

 

语法解释

        定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。 

 

<table border=5 Bordercolorlight=#62B0FF Bordercolordark=#004B97>
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

文本编辑 文本编辑
文本编辑 文本编辑

BGCOLOR

背景颜色属性

 

        通过BGCOLOR属性,可以设定表格的背景颜色。

基本语法
<TABLE BGCOLORr=color_VALUE>

语法解释
        定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。

 

<table border=5 Bordercolor=#003333 Bgcolor=#ccffcc>
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr> </table>

文本编辑 文本编辑
文本编辑 文本编辑
BACKGROUND背景图像属性

 

        为表格设置背景图像,可以使用任何的GIF或者JPEG图片文件。

基本语法
<TABLE BACKGROUND=FILE_name>

语法解释
        定义背景图象时,写下图片文件的完整路径或者相对路径。

该Background为储存格壁纸,与bgcolor任用其一。


<table border=2 Bordercolor=#003333 Background=绝对路径图片网址\相对路径图片名称>
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>
文本编辑 文本编辑
文本编辑 文本编辑

RULES

内部边框

样式属性

 

        通过RULES可以控制表格内部边框的样式。

基本语法
<TABLE rules="value">

语法解释
value的取值如下所示:
All          显示所有的内部边框
Cols       仅显示列边框
Groups  显示介于行列间的边框
None      不显示内部边框
Rows      仅显示行边框

 

<table border=5 Bordercolor=#003333 rules=rows>
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

文本编辑 文本编辑
文本编辑 文本编辑

FRAME

边框样式属性

 

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

基本语法
<TABLE Frame="value">

语法解释
VALUE的取值如下所示:
Above      显示上边框
Below      显示下边框
Lhs          显示左边框
Rhs          显示右边框
Hsides      显示上下边框
Vsides      显示左右边框
Border      显示上下左右边框
Box           显示上下左右边框
Void         不显示边框

 

<table border=5 Bordercolor=#003333 Frame=Vsides>
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

文本编辑 文本编辑
文本编辑 文本编辑
HTML表格制作相关文章链接:

 

点击相关文章链接查看:

欢迎光临启野博客!
  评论这张
 
阅读(1997)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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