火力光波的博客

火一般的热情光一样的速度

日志

关于我

火力光波

文章分类

表格代码、标签及属性

2008-09-17 11:54:04| 分类： html代码 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

表格代码、标签及属性

表格标签属性

表格通用格式： <TABLE属性名="属性值"><TR属性名="属性值"><TD属性名="属性值">文字或图片</TD></TR> </TABLE>

<表格标签名属性名="属性值"><行标签属性="属性值"><列标签属性="属性值">表中元素</列标签></行标签></表格标签名>

表格标签属性： <table属性="属性值"></table>

align="水平对齐"： center 中 left 左 right 右

valign="垂直对齐"： top 上 middle：中 bottom 下

background="背景图案"：图片的地址

bgcolor="背景颜色"：各种颜色代码

border="边框宽度"：数字

bordercolor="边框颜色"：各种颜色代码

cellpadding="单元格内容与单元格边框之间的距离"：数字

cellspacing="单元格之间的距离"：

height="表格高度"：绝对值（数字）相对值（%）

width="表格宽度"：绝对值（数字）相对值（%）

bordercolorlight="表格边框向光部分的颜色"：各种颜色代码

bordercolordark="表格边框背光部分的颜色"：各种颜色代码

使用 bordercolorlight 或 bordercolordark 时，

bordercolor将会失效,即不能同时使用。

frame="边框显示值" 表格外框线的显示方式

box 显示整个表格边框

void 不显示表格边框

hsides 只显示表格的上下边框

vsides 只显示表格的左右边框

alove 只显示表格的上边框

below 只显示表格的下边框

lhs 只显示表格的左边框

rhs 只显示表格的右边框

rules="分隔线值" 分隔线的显示状态

all 显示所有分隔线

groups 只显示组与组的分隔线

rows 只显示行与行的分隔线

cols 只显示列与列的分隔线

none 所有分隔线都不显示

行标签的属性： <tr属性="属性值"></tr>

align 行内容的水平对齐

valign 行内容的垂直对齐

bgcolor 行的背景颜色

bordercolo 行的边框颜色

bordercolorlight 行的亮边框颜色

bordercolordark 行的暗边框颜色

单元格的属性：即表头标签<th></th>和列标签<td></td>的属性，它们都位于<tr></tr>之间。

其格式和属性是：<th属性="属性值"></th> <td属性="属性值"></td>

width/height 单元格的宽和高，接受绝对值（如 80）及相对值（如 80%）。

colspan 单元格向右打通的栏数

rowspan 单元格向下打通的列数

align 单元格内字画等的摆放贴，位置（水平），可选值为： left, center, right。

valign 单元格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

bgcolor 单元格的底色

bordercolor 单元格边框颜色

bordercolorlight 单元格边框向光部分的颜色

bordercolordark 单元格边框背光部分的颜色

background 单元格　背景图片

跨多行跨多列：

<TD rowspan="合并行数"></TD>：数字即，跨多行

<TD colspan="合并列数"></TD>：数字即，跨多列

表格行列分组：

行分组有：表头标签 <thead></thead> 属性和<th><td>标签一样。

表格主体标签 <tbody></tbody> 属性和<th><td>标签一样。

尾注标签 <tfoot>

列分组标签： <colgroup 属性="属性值">

span="该组包含的列数"：数字

align="对齐"： left 左, center 中, right 右。

行列同时分组（见实例）

表格标题标签： <caption属性="属性值">标题文字</caption>

align="水平对齐"： left 左, center 中, right右

valign="垂直对齐"： top：向上 middle：向中 bottom：向下

<caption>应放在<table>标签后，在表格行标签<tr>标签之前。

<caption>标签的默认属性是标题位于表格的上方中间位置。

表格嵌套：

在html页面中，使用表格排版是通过嵌套来完成的。由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚，都设置了有边框。

细线表格： 是指高为一像素一行一列的单元格。

表格代码编辑

行数列数：

一行一列： <TABLE BORDER=1><TR><TD>1</TD></TR></TABLE>

1

一行三列： <TABLE BORDER=1><TR><TD>1</TD><TD>2</TD><TD>3</TD></TR></TABLE>

1

2

3

二行三列： <TABLE BORDER=1><TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR></TABLE>

1	2	3
4	5	6

合并栏位：
合并一行： <TABLE BORDER=1><TR><TD COLSPAN=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR></TABLE>

1
4	5	6

合并一列： <TABLE BORDER=1><TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>5</TD><TD>6</TD></TR></TABLE>

1	2	3
1	5	6

栏位对齐：

表格大小： <TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD>1</TD></TR></TABLE>

1

置中或置左置右： <TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD ALIGN=CENTER>1</TD>

</TR></TABLE>

1

靠上方或靠下方：<TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD ALIGN=CENTER

VALIGN=TOP>1</TD></TR></TABLE>

1

背景底色:

表格背景颜色：原始码

呈现结果

1	2
3	4

一列背景色：原始码

呈现结果

1	2
3	4

一栏背景色：原始码

呈现结果

1	2
3	4

用图片来作背景，只要将BGCOLOR=#色码换成BACKGROUND="图片地址"就行了。

表格框线:

框线粗细:原始码

呈现结果

1

框线颜色:原始码

呈现结果

1

框线阴影、亮面颜色:原始码

呈现结果

1

表格栏距 :

表格栏位格线之间的距离:原始码

呈现结果

1

2

内文距格线距离：一般而言内定值为2，不过我建议设定为4比较漂亮。

表格栏位格线之间的距离:原始码

呈现结果

1

2

栏位之间的距离：一般而言内定值为2，不过我通常习惯设为 0 。

常用表格实例

四行四列表格+边框+行列分组

姓名	性别	专业	分数
咚咚	男	计算机	85
喃喃	女	园林	94
依依	女	微波通信	87

姓名性别
专业

分数

咚咚男计算机 85

喃喃女园林 94

依依女微波通信 87

一行两列表格中元素的排版

<tr>

<td align="居中"><a href="链接的网址"></a><img src= "图片的地址" width="宽度"height=

"高度"></td>

</td></tr></table>

第一列中图片加链接居中，第二列中图片居中下。

表格背景图加向上滚动文字

<TBODY>

<TR>

</TD></TR></TBODY></TABLE>

生命是一个奇迹，

缘分是一次意外．

幸福是一种期待，

快乐是一种心态．

相思是一种无奈．

结识你是上天赐给我的厚爱，

繁琐的生活带走的只是时间．

彼此的牵挂留在心间，

美好的祝福常响耳边．

评论这张

转发至微博

阅读(1582)| 评论(2)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085065084086082066086080080095092086086071081094095066',
              blogTitle:'表格代码、标签及属性',
              blogAbstract:'<P style=\"TEXT-INDENT: 2em;\"  align=\"center\" \><FONT face=\"楷体_GB2312\" color=\"#ff6600\" size=\"4\" \>表格代码、标签及属性</FONT\> </P\>  <P style=\"TEXT-INDENT: 2em;\"  align=\"center\" \> </P\>  <P style=\"TEXT-INDENT: 2em;\"  align=\"center\" \><FONT color=\"#ff00ff\" size=\"2\" \>表格标签属性</FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT color=\"#808080\" size=\"2\" \><STRONG\><FONT color=\"#00ccff\" \>表格通用格式：</FONT\> </STRONG\><TABLE属性名=\"属性值\"><TR属性名=\"属性值\"><TD属性名=\"属性值\">文字或图片</TD></TR> </TABLE> </FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT color=\"#808080\" size=\"2\" \><表格标签名 属性名=\"属性值\"><行标签 属性=\"属性值\"><列标签 属性=\"属性值\">表中元素</列标签></FONT\><FONT color=\"#808080\" size=\"2\" \></行标签></表格标签名></FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT color=\"#808080\" size=\"2\" \><STRONG\><FONT color=\"#00ccff\" \>表格标签属性：</FONT\></STRONG\> <table属性=\"属性值\"></table></FONT\></P\>',
              blogTag:'',
              blogUrl:'blog/static/80745891200881711544997',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1316854901037,
              publishTime:1221623644997,
              permalink:'blog/static/80745891200881711544997',
              commentCount:2,
              mainCommentCount:1,
              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:'',
              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/80745891200881711544997">${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 - 订阅此博客

火力光波的博客

导航

日志

表格代码、标签及属性

历史上的今天

最近读者

热度

评论

页脚