启野的博客

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

日志

关于我

启野

B型天秤座

文章分类

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

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

下载LOFTER 我的照片书 |

表格标记详解1

文章简介：

表格标记：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表格，包含两行两列：

效果：

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

<TR>

标签定义

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

实例：

效果：

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

<TH>

标签定义

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

效果：

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

<TD>

标签定义

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

HTML表格有两类单元格：

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

实例：

效果：

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

二、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属性定义表格的高度，单位是像素或百分比。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格宽度。

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

BORDER

表格的边框属性

基本语法
<TABLE BORDER=VALUE>

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

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

CELLSPACING

单元格

间距属性

基本语法
<TABLE CellSpacing=value>

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

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

CELLPADDING单元格

边距属性

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

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

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

ALIGN

水平对齐属性

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

基本语法

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

居左效果：

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

居中效果：

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

居右效果：

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

BORDERCOLOR边框色属性

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

基本语法
<TABLE BORDERCOLOR=COLOR_VALUE>

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

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

Bordercolorlight亮边框色属性Bordercolordark暗边框色属性

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

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

语法解释

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

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

BGCOLOR

背景颜色属性

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

基本语法
<TABLE BGCOLORr=color_VALUE>

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

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

BACKGROUND背景图像属性

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

基本语法
<TABLE BACKGROUND=FILE_name>

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

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

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

RULES

内部边框

样式属性

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

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

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

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

FRAME

边框样式属性

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

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

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

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

HTML表格制作相关文章链接：

点击相关文章链接查看:

HTML表格初步制作：
HTML表格标记详解1：标签定义 TABLE参数设定
HTML表格标记详解2：TR参数设定
HTML表格标记详解3：TD参数设定
HTML表格标记详解4：TD参数中设定跨列跨行属性
HTML表格标记详解5：TH参数中设定
HTML表格标记详解6：CAPTION标题参数设定
HTML表格标记详解7：THEAD表首标记/TBODY表主体标记/TFOOT表尾标记
HTML表格标记详解8：表格嵌套
HTML表格标记详解9：表格边框的css修饰语法

欢迎光临启野博客！

评论这张

转发至微博

阅读(3852)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_083075093086084068086094086095083084084067083083082065',
              blogTitle:'HTML表格标记详解1：标签定义 TABLE参数设定',
              blogAbstract:'   <TABLE border=\"1\" cellSpacing=\"2\" borderColor=\"#003333\" cellPadding=\"0\" width=\"720\" align=\"center\" height=\"211\" \>  <TBODY\>  <TR\>  <TD style=\"FILTER: Blur(Add=true, Direction=180, Strength=20);\"  bgColor=\"#003333\" height=\"27\" \>  <P align=\"center\" \> </P\>  <CENTER\> </CENTER\>  <CENTER\><FONT color=\"#ffff00\" size=\"2\" \> </FONT\></CENTER\>  <CENTER\>  <TABLE border=\"0\" width=\"223\" \>  <TBODY\>  <TR\>  <TD height=\"138\" background=\"http://img18.bimg.126.net/photo/_vyledpXiu6kPFV5EF8BLQ==/5141984874550810335.jpg\" \>  <P\><FONT color=\"#ffff00\" size=\"2\" \></FONT\> </P\>  <P\><FONT color=\"#ffff00\" size=\"2\" \></FONT\> </P\>  <P\><FONT color=\"#ffff00\" size=\"2\" \>            表格标记详解1</FONT\></P\></TD\></TR\></TABLE\></CENTER\>  <CENTER\> </CENTER\></TD\></TR\></TABLE\>',
              blogTag:'html',
              blogUrl:'blog/static/7250754220101310565831',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317308236902,
              publishTime:1266700282763,
              permalink:'blog/static/7250754220101310565831',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'B型天秤座',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/7250754220101310565831">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

启野的博客

导航

日志

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

点击相关文章链接查看:

历史上的今天

最近读者

热度

评论

页脚