加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

html表格代码、标签及属性

(2012-08-20 14:59:47)
标签：

html

表格

边框

属性值

杂谈

 分类： 网页设计相关知识（jsp、html)

表格通用格式：

<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 height=""width="500"border="1"cellspacing="0"cellpadding="0">

<tr><td aling="对齐"></td></tr></table>

 

表格代码编辑

行数列数：

一行一列： <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>

 

栏位对齐：

 

 

 

 

 

                     </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><TDCOLSPAN=3>1</TD></TR>
               <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR></TABLE>
1
4 5 6

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

 
1 2 3
5 6

 

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

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

 

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

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

 

 
1

 

      背景底色:

 

 

表格背景颜色：原始码

呈现结果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR></TABLE>
1 2
3 4

 

 

一列背景色： 原始码

呈现结果
<TABLE BORDER="1" ><TRBGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR></TABLE>
1 2
3 4
 

 

 

一栏背景色：原始码

呈现结果
<TABLE BORDER="1" ><TR><TDBGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR></TABLE>
1 2
3 4

 

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

    表格框线:

 

 

框线粗细:原始码

呈现结果
<TABLE BORDER=5><TR><TD>1</TD></TR></TABLE>
1

 

 

 

框线颜色:原始码

呈现结果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" >
<TR><TD>1</TD></TR></TABLE>
1

 

 

 

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

呈现结果
<TABLE BORDER="5" BORDERCOLOR="#0080FF"BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR></TABLE>
1

 

    表格栏距 : 

 

 

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

呈现结果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR></TABLE>
1 2

 

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

 

 

 

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

呈现结果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR></TABLE>
1 2

 

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

 

 

 

常用表格实例

 

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

<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">
<THEAD bgcolor="#FFFFCC">
<TR><TH>姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH>
<TR>
</THEAD>
<COLGROUP SPAN=2 ALIGN=CENTER>  列分组
<COLGROUP ALIGN=LEFT>           列分组
<COLGROUP ALIGN=RIGHT>          列分组
<TBODY bgcolor="#FFCCFF">       主体标签
<TR>
<TD>咚 咚</TD><TD>男</TD><TD>计算机</TD><TD>85</TD>
</TR>
<TR>
<TD>喃 喃</TD><TD>女</TD><TD>园 林</TD><TD>94</TD>
</TR>
<TR>
<TD>依 依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD>
</TR>
</TBODY>
</TABLE>

 

 

姓名 性别

专业

分数
咚 咚 男 计算机 85
喃 喃 女 园 林 94
依 依 女 微波通信 87

 

 

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

<table height="高度"width="宽度"border="边框">

<tr>

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

"高度"></td>

<td align="居中" valign="居下"><img src="图片的地址" width="宽度"height="高度">

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

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

 

 

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

<TABLE align=center background="背景图片地址"border=0 cellPadding=0 cellSpacing=0  borderColor=#ffff00 width="400" height=300>

<TBODY>

<TR>

<TD align="right" valign="top"><br><marquee direction="up" scrollAmount=1 height=25 width=180><FONT face=黑体 color=#ffooff size=4>文字</FONT></MARQUEE>

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

 


生命是一个奇迹，

缘分是一次意外．

幸福是一种期待，

快乐是一种心态．

相思是一种无奈．

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

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

彼此的牵挂留在心间，

美好的祝福常响耳边．

 
附：表格颜色代码做边框
 转载自：竹林漫步  


 

 

 

多层宽边框代码
<CENTER>
<TABLE style="LEFT: -70px; WIDTH: 900px; POSITION: relative; HEIGHT: 0px; style: " borderColor=#ff0000 cellSpacing=25 cellPadding=0 width=900 bgColor=#8b0000 border=1 collapse? BORDER-COLLAPSE:>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE style="WIDTH: 835px; BORDER-COLLAPSE: collapse; HEIGHT: 0px" borderColor=#ffd700 cellSpacing=3 borderColorDark=#ffd700 cellPadding=0 width=835 bgColor=#ffd700 borderColorLight=#ffd700 background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/chaguan/112.files/001.gif border=2>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE style="WIDTH: 826px; BORDER-COLLAPSE: collapse; HEIGHT: 0px" borderColor=#9400d3 cellSpacing=6 cellPadding=0 width=826 bgColor=#9400d3 border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ffff00 cellSpacing=3 borderColorDark=#ffff00 cellPadding=0 width="100%" bgColor=#ffff00 borderColorLight=#ffff00 background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/chaguan/112.files/001.gif border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE style="WIDTH: 801px; BORDER-COLLAPSE: collapse; HEIGHT: 0px" borderColor=#9999ff cellSpacing=12 borderColorDark=#9999ff cellPadding=0 width=801 bgColor=#9999ff borderColorLight=#9999ff border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE style="WIDTH: 788px; BORDER-COLLAPSE: collapse; HEIGHT: 0px" borderColor=#ff0000 cellSpacing=3 borderColorDark=#ff0000 cellPadding=0 width=788 bgColor=#ff0000 borderColorLight=#ff0000 background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/chaguan/112.files/001.gif border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#da70d6 cellSpacing=0 borderColorDark=#da70d6 cellPadding=0 width="100%" bgColor=#da70d6 borderColorLight=#da70d6 border=1>
<TBODY>
<TR>
<TD style="WORD-WRAP: break-word">
<P align=center>&nbsp;</P></EMBED>
<P align=center>&nbsp;</P>&lt; </TR></TBODY></DIV></TR></TBODY></DIV></TR></TBODY></DIV></TR></TBODY></DIV></TR></TBODY></DIV></TR></TBODY></DIV></TR></TBODY></TABLE></CENTER>

 

 

用表格颜色代码做的边框
永不失效 

多层边框代码:
<P align=center>
<TABLE style="WIDTH: 740px; HEIGHT: 0px" borderColor=#800000 cellSpacing=2 cellPadding=3 width=740 bgColor=#e6e6fa border=10>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ff1493 cellSpacing=2 cellPadding=3 width="100%" bgColor=#e6e6fa border=5>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0909f7 cellSpacing=2 cellPadding=3 width="100%" bgColor=#e6e6fa border=15>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#9400d3 cellSpacing=2 cellPadding=3 width="100%" bgColor=#e6e6fa border=5>
<TBODY>
<TR>
<TD>
<TABLE style="WIDTH: 630px; HEIGHT: 200px" borderColor=#f73809 cellSpacing=2 cellPadding=3 width=630 bgColor=#e6e6fa border=5>
<TBODY>
<TR>
<TD><FONT size=7>
<P><FONT face=宋体 color=#000000 size=3></FONT></P>

内容

双层边框代码:

<TABLE style="WIDTH: 750px; HEIGHT: 178px" cellSpacing=5 borderColorDark=#9400d3 cellPadding=20 width=843 borderColorLight=#ff4500 border=20>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#ff4500 cellPadding=0 width="100%" borderColorLight=#9400d3 border=12>
<TBODY>
<TR>
<TD width="100%">
<P align=center><FONT size=7>内容</FONT></P></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<P></P>


制作多列行表格修改行列数字
输入内容
输入内容

2行表格代码：
<TABLE borderColor=#8O0000 cellSpacing=15 cellPadding=0 width="100%" bgColor=#ffb6C1 border=10>
<TBODY>
<TR>
<TD><FONT color=#0000ff>输入内容</FONT></TD>
<TR>
<TD><FONT color=#0000ff>输入内容</FONT></TD></TR></TBODY></TABLE>
输入内容
输入内容
输入内容
输入内容

多行表格代码
<TABLE borderColor=#9400d3 cellSpacing=10 cellPadding=0 width="100%" bgColor=#fff0f5 border=12>
<TBODY>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD></TR></TBODY></TABLE>
输入内容 输入内容

2列表格代码
<TABLE borderColor=#006400 cellSpacing=10 cellPadding=0 width="100%" bgColor=#bdb76b border=10>
<TBODY>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD>
<TD><FONT color=#00008b>输入内容</FONT></TD></TR></TBODY></TABLE>
内容 内容 内容

3列表格代码:
<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=0 width="100%" bgColor=#bdb76b border=5>
<TBODY>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR></TBODY></TABLE>

输入内容 输入内容
输入内容 输入内容

行列合并2行2列代码

<TABLE borderColor=#ff4500 cellSpacing=10 cellPadding=0 width="100%" bgColor=#f0e68c border=10>
<TBODY>
<TR>
<TD><FONT color=#800000>输入内容</FONT></TD>
<TD><FONT color=#800000>输入内容</FONT></TD>
<TR>
<TD><FONT color=#800000>输入内容</FONT></TD>
<TD><FONT color=#800000>输入内容</FONT></TD></TR></TBODY></TABLE> 

 

     
     
     
     
     
     

行列合并6行3列代码:
<P align=center><TABLE style="WIDTH: 660px; HEIGHT: 315px" borderColor=#ff0000 cellSpacing=15 cellPadding=0 width=660 bgColor=#000000 border=10>
<TBODY>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE>

单元格里水平及垂直方向对齐的方式

 

默认对齐（不设置） 水平：居中
垂直：靠顶
代码： vAlign=top align=middle>
水平：居中
垂直：默认
代码:align=middle		 水平：右对齐
垂直：靠底
代码： vAlign=bottom align=right>

代码：

<TABLE id=table20 width="95%" background=http://image8.360doc.com/DownloadImg/2010/04/0801/2796715_1.gif border=1 aligh="center">
<TBODY>
<TR style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体">
<TD style="FONT-SIZE: 9pt; WORD-BREAK: break-all; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体">
<TABLE id=table21 cellSpacing=20 width="100%" background=http://www.lixiaomeng.com/user1/3219/upload/20061171608.gif border=0 aligh="center">
<TBODY>
<TR style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体">
<TD style="FONT-SIZE: 9pt; WORD-BREAK: break-all; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体">
<TABLE id=table22 borderColorDark=#2d3c51 cellPadding=10 width="100%" borderColorLight=#7b93b7 border=5>
<TBODY>
<TR style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体">
<TD style="FONT-SIZE: 9pt; WORD-BREAK: break-all; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体" bgColor=#eee8aa height=200><FONT style="WORD-BREAK: break-all; LINE-HEIGHT: 150%" color=#000000 size=4><STRONG>默认对齐（不设置）</STRONG></FONT></TD>
<TD style="FONT-SIZE: 9pt; WORD-BREAK: break-all; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体" vAlign=top align=middle bgColor=#e6e6fa height=200><FONT style="WORD-BREAK: break-all; LINE-HEIGHT: 150%" color=#000000 size=4><STRONG>水平：居中<BR>垂直：靠顶 <BR>代码： vAlign=top align=middle&gt;</STRONG></FONT></TD></TR>
<TR style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体">
<TD style="FONT-SIZE: 9pt; WORD-BREAK: break-all; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体" align=middle bgColor=#e0ffff height=200><FONT style="WORD-BREAK: break-all; LINE-HEIGHT: 150%" color=#000000 size=4><STRONG>水平：居中<BR>垂直：默认<BR>代码:align=middle</STRONG></FONT></TD>
<TD style="FONT-SIZE: 9pt; WORD-BREAK: break-all; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体" vAlign=bottom align=right bgColor=#ffefd5 height=200><FONT style="WORD-BREAK: break-all; LINE-HEIGHT: 150%" color=#000000 size=4><STRONG>水平：右对齐<BR>垂直：靠底<BR>代码： vAlign=bottom align=right&gt;</STRONG></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

用表格颜色代码做的边框永不过期


　　　http://bbsimg.qq.com/2006/05/21/000/864.gif

 

 

 

 



喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有