logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

表格代码__风景这边独好

 峥 嵘 岁 月 2010-06-22

1:表格的基本表现形式


<TABLE>
<TBODY>
<TR>
<TD>
内容
</TD></TR></TBODY></TABLE>


注解：
<TABLE>   </TABLE>   表格的代码元素（必须）
<TBODY>   </TBODY>   表格的主体元素（必须）
<TR>      </TR>      表格的行元素   （必须）
<TD>      </TD>      表格的单元格元素（必须）

2：表格的附属属性，以及属性值

align       表格的水平排列属性，可选属性值有  left(居左) center(居中) right(居右)

bgcolor     表格的背景色属性，属性值为十六进制的颜色代码或是英文的颜色单词

background   表格的背景图片属性，属性值为图片的网络绝对地址，也可以是相对地址

width       表格的宽度属性，属性值为像素值，也可以是百分比的。如果是百分比的有两种情况，1不是嵌套表格的，那么百分比是相对浏览器的。2如果是嵌套表格，那么它对应的四嵌套表格所在的单元格。

height      表格的高度属性，属性值和宽度属性是一样的。

border      表格的边框属性，属性值为像素值。

bordercolor  表格的边框颜色属性，属性值为颜色代码

bordercolorlight  表格的亮边框属性，属性值为颜色代码

bordercolordark   表格的暗边框属性，属性值为颜色代码

cellSpacing  表格的单元格间距属性，属性值为像素

cellpadding  表格的单元格边距属性，属性值为像素

  frame  表格的边框样式属性，
         属性值可选
          above   显示上边框
          below   显示下边框
          border  显示上下左右边框
          box     显示上下左右边框
          hsides  显示上下边框
          lhs     显示左做边框
          rhs     显示右边框
          void    不显示边框
          vsides  显示左右边框

  rules  表格的内部边框属性
          属性值可选
       all    显示所有的内部边框
       cole   仅显示行边框
       groups 显示介于行列间的边框
       none   不显示内部边框
       rows   仅显示列边框
          
  valign 表格内内容的对齐方式（垂直）属性，属性值为 top（顶部）, middle（中部）, bottom（底部）。
3：综合练习

范例3-1：建立基本实用的表格(包含有水平排列属性，背景色属性，宽度，高度，边框）

<TABLE align=center bgcolor=#00ffff width=500 height=300 border=1>
  <TBODY>
     <TR>
        <TD>
align  表格的水平排列属性
bgcolor  表格的背景色属性
width  表格的宽度属性
height  表格的高度属性
border  表格的边框属性
        </TD>
     </TR>
  </TBODY>
</TABLE>


范例3-2-1：添加单元格间距属性


<TABLE align=center bgcolor=#00ffff width=500 height=300 border=1 cellSpacing=10>
  <TBODY>
     <TR>
        <TD>
           cellSpacing  表格的单元格间距属性，属性值为像素
        </TD>
     </TR>
  </TBODY>
</TABLE>

3-2-2：添加边距属性


<TABLE align=center bgcolor=#00ffff width=500 height=300 border=1 cellpadding=10>
  <TBODY>
     <TR>
        <TD>
           cellpadding  表格的单元格边距属性，属性值为像素
        </TD>
     </TR>
  </TBODY>
</TABLE>

3-2-3：设定边框颜色和调整边框大小

<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5  bordercolor=#0000ff>
  <TBODY>
     <TR>
        <TD>
           bordercolor=#0000ff
           border=5
        </TD>
     </TR>
  </TBODY>
</TABLE>

3-2-4：添加亮边框和暗边框属性

<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5 cellSpacing=10 cellpadding=10 bordercolor=#0000ff bordercolorlight=red bordercolordark=green>
  <TBODY>
     <TR>
        <TD>
           bordercolorlight=red
           bordercolordark=green

           注意：添加了亮，暗边框属性后，bordercolor=#0000ff ，通常的边框颜色属性bordercolor就会自动失效
        </TD>
     </TR>
  </TBODY>
</TABLE>

3-2-5：制作多行表格

<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5>
  <TBODY>
     <TR>
        <TD>
          第一行
        </TD>
     </TR>
     <tr>
        <td>
          第二行
        </td>
      <tr>  
  </TBODY>
</TABLE>

3-2-6:建立多列表格

<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5>
  <TBODY>
     <TR>
       <TD>第一列</TD>
        <TD>第二列</TD>
        <TD>第三列</TD>
     </TR>
  </TBODY>
</TABLE>

3-2-7：建立多行多列表格

<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5>
  <TBODY>
     <TR>
        <TD>第一行第一列</TD><TD>第一行第二列</TD><TD>第一行第三列</TD>
     </TR>
     <TR>
        <TD>第二行第一列</TD><TD>第二行第二列</TD><TD>第二行第三列</TD>
     </TR>
     <TR>
        <TD>第三行第一列</TD><TD>第三行第二列</TD><TD>第三行第三列</TD>
     </TR>
  </TBODY>
</TABLE>

3-2-8：设定边框的样式

<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5 bordercolor=red cellSpacing=10 cellpadding=10 frame=hsides>
  <TBODY>
     <TR>
        <TD>第一行第一列</TD><TD>第一行第二列</TD><TD>第一行第三列</TD>
     </TR>
     <TR>
        <TD>第二行第一列</TD><TD>第二行第二列</TD><TD>第二行第三列</TD>
     </TR>
     <TR>
        <TD>第三行第一列</TD><TD>第三行第二列</TD><TD>第三行第三列</TD>
     </TR>
  </TBODY>
</TABLE>

3-2-9：设定内部边框的样式

<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5 bordercolor=red cellSpacing=10 cellpadding=10 rules=rows>
  <TBODY>
     <TR>
        <TD>第一行第一列</TD><TD>第一行第二列</TD><TD>第一行第三列</TD>
     </TR>
     <TR>
        <TD>第二行第一列</TD><TD>第二行第二列</TD><TD>第二行第三列</TD>
     </TR>
     <TR>
        <TD>第三行第一列</TD><TD>第三行第二列</TD><TD>第三行第三列</TD>
     </TR>
  </TBODY>
</TABLE>

3-2-10:建立多层表格
<TABLE align=center bgcolor=#00ffff width=500 border=5 bordercolor=red cellSpacing=10 cellpadding=10>
  <TBODY>
     <TR>
        <TD>
<TABLE align=center bgcolor=#0000ff width=100% border=5 bordercolor=red cellSpacing=10 cellpadding=10>
  <TBODY>
     <TR>
        <TD>
<TABLE align=center bgcolor=#ff00ff width=100%  height=300 border=5 bordercolor=red cellSpacing=10 cellpadding=10>
  <TBODY>
     <TR>
        <TD>
       建立了三层背景的表格
       </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>

3-2-11：插入背景图片

<TABLE align=center bgcolor=#00ffff width=460 height=600 background=http://www./zuopin/images/tupianimages/tupian/tupian_08.jpg border=1>
  <TBODY>
     <TR>
        <TD>
       插入背景图片
        </TD>
     </TR>
  </TBODY>
</TABLE>

3-2-12：表格内内容的对齐方式
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5>
  <TBODY>
     <TR>
        <TD valign="TOP">第一列</TD>
        <TD valign="middle">第二列</TD>
        <TD valign="bottom">第三列</TD>
     </TR>
  </TBODY>
</TABLE>

相关资料下载


点击浏览该文件

表格的另类用法

效果：


此主题相关图片如下：
按此在新窗口浏览图片

源代码：

　　源码如下：
<html>
<head>
<style type="text/css">
.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT:
#000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}
</style>
</head>
<body>
<table width="100%" height="100" border="0" cellspacing="0" cellpadding="0">
<tbody>
  <tr>
    <td class="tb">另类用法</td>
  </tr>
</tbody>
</table>
<p>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">
</body>
</html>

范例3-1：

<TABLE align=center bgcolor=#00ffff width=500 height=300 border=1>
  <TBODY>
     <TR>
        <TD>
align  表格的水平排列属性
bgcolor  表格的背景色属性
width  表格的宽度属性
height  表格的高度属性
border  表格的边框属性
        </TD>
     </TR>
  </TBODY>
</TABLE>

实际效果：

align 表格的水平排列属性

bgcolor 表格的背景色属性

width 表格的宽度属性

height 表格的高度属性

border 表格的边框属性

细解1

没有设定表格的水平排列属性，默认的是居左

<TABLE  width=200 height=200 border=1>
  <TBODY>
     <TR>
        <TD>

没有设定水平排列属性

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

效果：

没有设定水平排列属性

设定水平排列居中

<TABLE align=center  width=200 height=200 border=1>
  <TBODY>
     <TR>
        <TD>

设定水平排列属性居中align=center

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

设定水平排列属性居中align=center

设定水平排列属性居右

<TABLE align=right  width=200 height=200 border=1>
  <TBODY>
     <TR>
        <TD>

设定水平排列属性居右align=right

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

设定水平排列属性居右align=right

改变表格的背景色 bgcolor

<TABLE bgcolor=#ff00ff width=300 height=100 border=1>
  <TBODY>
     <TR>
        <TD>

bgcolor=#ff00ff    表格的背景色属性

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

bgcolor=#ff00ff 表格的背景色属性

<TABLE bgcolor=#0000ff width=300 height=100 border=1>
  <TBODY>
     <TR>
        <TD>

bgcolor=#0000ff    表格的背景色属性

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

bgcolor=#0000ff 表格的背景色属性

改变边框线的大小 border

<TABLE width=300 height=100 border=1>
  <TBODY>
     <TR>
        <TD>

改变边框线的大小 border=1

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

改变边框线的大小 border=1

<TABLE width=300 height=100 border=10>
  <TBODY>
     <TR>
        <TD>

改变边框线的大小 border=10

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

改变边框线的大小 border=10

（在没有设定边框颜色时，边框线有立体的效果）

设定单元格的间距属性 cellSpacing （单元格与单元格之间的距离）

<TABLE width=200 height=100 border=2 cellSpacing=10>
  <TBODY>
     <TR>
        <TD>
           cellSpacing  表格的单元格间距属性，属性值为像素。cellSpacing=10
        </TD>
     </TR>
  </TBODY>
</TABLE>

cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=10

<TABLE width=200 height=100 border=2 cellSpacing=5>
  <TBODY>
     <TR>
        <TD>
           cellSpacing  表格的单元格间距属性，属性值为像素。cellSpacing=5

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

cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=5

<TABLE width=200 height=100 border=2 cellSpacing=50>
  <TBODY>
     <TR>
        <TD>
           cellSpacing  表格的单元格间距属性，属性值为像素。cellSpacing=50
        </TD>
     </TR>
  </TBODY>
</TABLE>

cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=50

（在默认的情况下，也就是说没有设定cellSpacing的属性时，默认的间距是1，你要想不体现有两条边框线，就要把cellSpacing的属性值设为0）

2：设定单元格的边距属性 cellpadding （边距属性就是主体内容与边框线之间的距离）

<TABLE width=200 height=100 border=2 cellpadding=5>
  <TBODY>
     <TR>
        <TD>
           cellpadding  表格的单元格边距属性，属性值为像素cellpadding=5
        </TD>
     </TR>
  </TBODY>
</TABLE>

cellpadding 表格的单元格边距属性，属性值为像素cellpadding=5

<TABLE width=200 height=100 border=2 cellpadding=15>
  <TBODY>
     <TR>
        <TD>
           cellpadding  表格的单元格边距属性，属性值为像素cellpadding=15
        </TD>
     </TR>
  </TBODY>
</TABLE>

cellpadding 表格的单元格边距属性，属性值为像素cellpadding=15

<TABLE width=200 height=100 border=2 cellpadding=35>
  <TBODY>
     <TR>
        <TD>
           cellpadding  表格的单元格边距属性，属性值为像素cellpadding=35
        </TD>
     </TR>
  </TBODY>
</TABLE>

cellpadding 表格的单元格边距属性，属性值为像素cellpadding=35

设定边框的颜色 bordercolor (边框线的颜色，需要边框线属性border的配合）

<TABLE width=200 height=100 border=5  bordercolor=#0000ff>
  <TBODY>
     <TR>
        <TD>
           bordercolor=#0000ff
           border=5
        </TD>
     </TR>
  </TBODY>
</TABLE>

bordercolor=#0000ff border=5

<TABLE width=200 height=100 border=5  bordercolor=#ff0000>
  <TBODY>
     <TR>
        <TD>
           bordercolor=#ff0000
           border=5
        </TD>
     </TR>
  </TBODY>
</TABLE>

bordercolor=#ff0000 border=5
(如果我只想要一条边框线，需要设定边框单元格的间距属性cellSpacing=0）

<TABLE width=200 cellspacing=0 height=100 border=5  bordercolor=#ff0000>
  <TBODY>
     <TR>
        <TD>

          cellspacing=0
           bordercolor=#ff0000
           border=5
        </TD>
     </TR>
  </TBODY>
</TABLE>

cellspacing=0 bordercolor=#ff0000 border=5

添加亮边框 bordercolorlight 和暗边框 bordercolordark 属性。（必须要有边框线border的配合）

(同时使用了亮，暗边框属性后，边框线颜色属性 bordercolor 会自动失效)

<TABLE cellSpacing=5  width=300 height=150 border=5  bordercolor=#0000ff>
  <TBODY>
     <TR>
        <TD>
只有边框线颜色属性bordercolor=#0000ff

cellSpacing=5

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

只有边框线颜色属性bordercolor=#0000ff

cellSpacing=5

添加亮边框颜色bordercolorlight

<TABLE cellSpacing=5  width=300 height=150 border=5  bordercolor=#0000ff bordercolorlight=red>
  <TBODY>
     <TR>
        <TD>
边框线颜色属性bordercolor=#0000ff

cellSpacing=5

亮边框颜色属性 bordercolorlight=red
        </TD>
     </TR>
  </TBODY>
</TABLE>

边框线颜色属性bordercolor=#0000ff

cellSpacing=5

亮边框颜色属性 bordercolorlight=red




添加暗边框颜色属性bordercolordark

<TABLE cellSpacing=5  width=300 bordercolordark=green height=150 border=5  bordercolor=#0000ff bordercolorlight=red>
  <TBODY>
     <TR>
        <TD>
边框线颜色属性bordercolor=#0000ff

cellSpacing=5

亮边框颜色属性 bordercolorlight=red

暗边框颜色属性 bordercolordark=green
        </TD>
     </TR>
  </TBODY>
</TABLE>

边框线颜色属性bordercolor=#0000ff cellSpacing=5

亮边框颜色属性 bordercolorlight=red

暗边框颜色属性 bordercolordark=green

多行表格 tr

<TABLE  width=200 height=100 border=5>
  <TBODY>
     <TR>
        <TD>
          第一行
        </TD>
     </TR>
     <tr>
        <td>
          第二行
        </td>
      <tr>  
  </TBODY>
</TABLE>

第一行
第二行

<TABLE  width=200 height=300 border=5>
  <TBODY>
     <TR>
        <TD>
          第一行
        </TD>
     </TR>

     <TR>
        <TD>
          第二行
        </TD>
     </TR>

     <TR>
        <TD>
          第三行
        </TD>
     </TR>

     <TR>
        <TD>
          第四行
        </TD>
     </TR>
     <tr>
        <td>
          第五行
        </td>
      <tr>  
  </TBODY>
</TABLE>




第一行
第二行
第三行
第四行
第五行

多列表格 td

<TABLE width=300 height=150 border=5>
  <TBODY>
     <TR>
        <TD>第一列</TD>
       <TD>第二列</TD>
        <TD>第三列</TD>
     </TR>
  </TBODY>
</TABLE>

第一列 第二列 第三列

<TABLE width=300 height=150 border=5>
  <TBODY>
     <TR>
        <TD>第一列</TD>


       <TD>第二列</TD>


        <TD>第三列</TD>

         <TD>第四列</TD>

        <TD>第五列</TD>
     </TR>
  </TBODY>
</TABLE>

第一列 第二列 第三列 第四列 第五列

多行多列表格的制作

<TABLE width=500 height=300 border=5>
  <TBODY>
     <TR>
        <TD>第一行第一列</TD><TD>第一行第二列</TD><TD>第一行第三列</TD>
     </TR>
     <TR>
        <TD>第二行第一列</TD><TD>第二行第二列</TD><TD>第二行第三列</TD>
     </TR>
     <TR>
        <TD>第三行第一列</TD><TD>第三行第二列</TD><TD>第三行第三列</TD>
     </TR>
  </TBODY>
</TABLE>

第一行第一列 第一行第二列 第一行第三列
第二行第一列 第二行第二列 第二行第三列
第三行第一列 第三行第二列 第三行第三列

多层表格的制作

<TABLE align=center bgcolor=#00ffff width=500 border=5 bordercolor=red cellSpacing=10 cellpadding=10>
  <TBODY>
     <TR>
        <TD>
<TABLE align=center bgcolor=#0000ff width=100% border=5 bordercolor=green cellSpacing=10 cellpadding=10>
  <TBODY>
     <TR>
        <TD>
<TABLE align=center bgcolor=#ff00ff width=100%  height=300 border=5 bordercolor=#44bb44 cellSpacing=10 cellpadding=10>
  <TBODY>
     <TR>
        <TD>
       建立三层的表格
        </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>

建立三层的表格

插入背景图片 background=图片地址

素材

<TABLE width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314771306.jpg  border=1>
  <TBODY>
     <TR>
        <TD>
       插入背景图片<br.<br><br><br><br>一层表格
        </TD>
     </TR>
  </TBODY>
</TABLE>

插入背景图片


一层表格

两层表格

<TABLE width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314771306.jpg  border=1>
  <TBODY>
     <TR>
        <TD>
<TABLE width=100%  cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314766266.jpg  border=1>
  <TBODY>
     <TR>
        <TD>
       插入背景图片<br><br><br><br><br>二层表格
        </TD>
     </TR>
  </TBODY>
</TABLE>

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

插入背景图片




二层表格

三层表格

<TABLE width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314771306.jpg  border=1>
  <TBODY>
     <TR>
        <TD>
<TABLE width=100%  cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314766266.jpg  border=1>
  <TBODY>
     <TR>
        <TD>
<TABLE width=100%  cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314767489.jpg  border=1>
  <TBODY>
     <TR>
        <TD>
       插入背景图片<br><br><br><br><br>三层表格
        </TD>
     </TR>
  </TBODY>
</TABLE>

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

插入背景图片




三层表格

<TABLE id=1 width=100% cellSpacing=0 cellpadding=40 background=http://bbs./fileuploaddir/4B314771306.jpg>
  <TBODY>
     <TR>
        <TD>
<TABLE id=2 width=100% cellSpacing=0 cellpadding=3 background=http://bbs./fileuploaddir/4B314766266.jpg>
  <TBODY>
     <TR>
        <TD>
<TABLE id=3 width=100% cellSpacing=0 cellpadding=15 background=http://bbs./fileuploaddir/4B314770191.jpg>
  <TBODY>
     <TR>
        <TD>
<TABLE id=4 width=100% cellSpacing=0 cellpadding=2 background=http://bbs./fileuploaddir/4B314766266.jpg>
  <TBODY>
     <TR>
        <TD>
<TABLE id=5 width=100% cellSpacing=0 cellpadding=8 background=http://bbs./fileuploaddir/4B314771306.jpg>
  <TBODY>
     <TR>
        <TD>
<TABLE id=6 width=100% cellSpacing=0 cellpadding=2 background=http://bbs./fileuploaddir/4B314766266.jpg>
  <TBODY>
     <TR>
        <TD>
<TABLE id=7 width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314767489.jpg>
  <TBODY>
     <TR>
        <TD align=center>
<p>插入背景图片<br><br>多层表格
<p><img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<p>插入背景图片<br><br>多层表格
<p><img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<p>插入背景图片<br><br>多层表格
<p><img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
        </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>
        </TD>
     </TR>
  </TBODY>
</TABLE>

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 峥 嵘 岁 月 > 《边框素材》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多