用CSS控制表格

原创 2006年05月23日 16:02:00
1.   两种细线表格做法   
    源码如下:  
   
  <table   width="100%"   border="1"   bordercolor="#000000">  
      <tr   bordercolor="#FFFFFF">  
          <td>表格边线为1,线色为黑,行线色为白。</td>  
      </tr>  
  </table>  
  <p>  
  <table   width="100%"   border="0"   cellspacing="1"   bgcolor="#000000">  
      <tr>  
          <td   bgcolor="#FFFFFF">表格边线为0,间距为1,背景色为黑,行背景色为白。</td>  
      </tr>  
  </table>  
   
    2.   立体表格   

    源码如下:  
   
  <table     border=1   cellspacing=0     width=100%   bordercolorlight=#333333   bordercolordark=#efefef>  
      <tr   bgcolor=#cccccc>  
          <td>it365cn</td>  
          <td>it365cn</td>  
          <td>it365cn</td>  
          <td>it365cn</td>  
      </tr>  
      <tr   bgcolor=#cccccc>  
          <td>cnbruce</td>  
          <td>cnbruce</td>  
          <td>cnbruce</td>  
          <td>cnbruce</td>  
      </tr>  
  </table>  
  <center>表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc  
   
    3.   另类圆角表格制作   

    源码如下:  
   
  原图:  
  <table   cellpadding=0   cellspacing=0   border=0   width=282   align=center>  
      <tr   height=1>  
          <td   rowspan=4   width=1></td>  
          <td   rowspan=3   width=1></td>  
          <td   rowspan=2   width=1></td>  
          <td   width=2></td>  
          <td   bgcolor=#43B5C9></td>  
          <td   width=2></td>  
          <td   rowspan=2   width=1></td>  
          <td   rowspan=3   width=1></td>  
          <td   rowspan=4   width=1></td>  
      </tr>  
      <tr   height=1>  
          <td   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
      <tr   height=1>  
          <td   bgcolor=#43B5C9></td>  
          <td   colspan=3   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
      <tr   height=2>  
          <td   bgcolor=#43B5C9></td>  
          <td   colspan=5   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
  </table>  
  <p>放大  
  <table   cellpadding=0   cellspacing=0   border=1   width=282   align=center>  
      <tr   height=10>  
          <td   rowspan=4   width=10></td>  
          <td   rowspan=3   width=10></td>  
          <td   rowspan=2   width=10></td>  
          <td   width=20></td>  
          <td   bgcolor=#43B5C9></td>  
          <td   width=20></td>  
          <td   rowspan=2   width=10></td>  
          <td   rowspan=3   width=10></td>  
          <td   rowspan=4   width=10></td>  
      </tr>  
      <tr   height=10>  
          <td   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
      <tr   height=10>  
          <td   bgcolor=#43B5C9></td>  
          <td   colspan=3   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
      <tr   height=20>  
          <td   bgcolor=#43B5C9></td>  
          <td   colspan=5   bgcolor=#43B5C9></td>  
          <td   bgcolor=#43B5C9></td>  
      </tr>  
  </table>  
   
    4.   虚线边框表格   
    
    
    源码如下:  
   
  <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>  
  <table   width="100%"   border="0"   cellspacing="0"   cellpadding="0">  
      <tr>  
          <td   class="tb"><center>www.blueidea.com</td>  
      </tr>  
  </table>  
  <p>  
  虚线直线1  
  <hr   size=1   style="border:1px   dotted   #001403;">  
  虚线直线2  
  <p   size=1   style="border:1px   dotted   #001403;">  
   
    5.   分类型表格   

    源码如下:  
   
  <fieldset>  
  <legend>item</legend>  
  content  
  </fieldset>  
   
   
    6.   变色的单元格1,通过a:hover做   

    源码如下:  
   
  <style>  
  a:link,a:visited,a:hover  
  {width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}  
  a:hover{background:#0099ff;color:black}  
  td{background:#3366cc;color:white;padding:0px}  
  </style>  
   
   
   
  <TABLE   width=100%   cellspacing=1   bgcolor=black   >  
      <TR>  
          <TD><a   href="#">Blueidea  
          <TD><a   href="#">.com  
      <TR>  
          <TD><a   href="#">CNBruce  
          <TD><a   href="#">.com  
  </TABLE>  
   
    7.   变色的单元格2,已经做成了CSS,注意还有透明效果  
   
    源码如下:  
   
  <style   type="text/css">  
  .aa  
  {   background-color:#0000ff;   color:#ff0000;filter:   alpha(opacity=50)}  
  .bb    
  {   background-color:#3366cc;   color:#ffffff}  
  </style>     
    
    
    
  <table     width="100%">  
      <tr>  
          <td     onmouseover="this.className='aa'"   onmouseout="this.className='bb'"  
  class="bb"><center><b>cnbruce</td>  
        </tr>  
  </table>  
   
   
    8.   变色的单元格3,通过mouse事件做.有点微软的味道   

    源码如下:  
  <table   width="100%"   border="1"   cellpadding="3"   cellspacing="0"  
  bordercolor="#efefef"   bgcolor="#efefef">  
      <tr>    
          <td   onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";  
  onMouseOver="this.bgColor='#cccccc';   this.borderColor='#000033'"><div   align="left">  
  Blueidea</div></td>  
      </tr>  
      <tr>    
          <td    
  onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";   onMouseOver="this.bgColor='#cccccc';   this.borderColor='#000033'">  
  cnbruce</td>  
      </tr>  
  </table>  
   
    9.   透明表格  
   
  <table   bgcolor=#ececec   style="filter:alpha(opacity=50)"   width=200   height=100   border=0>  
      <tr><td><center>cnbruce</td></tr>  
  </table>  
   
    10.   表格边框显示外阴影   

    源码如下:  
   
  <table     align=center     width=200     height=100     bgcolor=#f3f3f3  
  style="filter:progid:DXImageTransform.Microsoft.Shadow  
  (Color=#333333,Direction=120,strength=5)">  
      <tr>  
          <td><center>www.cnbruce.com</td>  
      </tr>  
  </table>  
   
    11.   VML代码实现的圆角表格  
    (1).   

    源码如下:  
   
  <html   xmlns:v>  
  <style>  
  v/:*{behavior:url(#default#VML)}  
  </style>  
  <body>  
        <v:RoundRect   style="position:relative;width:150;height:240px">  
          <v:shadow   on="T"   type="single"   color="#b3b3b3"   offset="3px,3px"/>  
          <v:TextBox   style="font-size:10.2pt;">VML</v:TextBox>  
          </v:RoundRect>    
  </body>  
  </html>  
   
    (2).   
    
    源码如下:  
   
  <html     xmlns:v>  
  <style>  
  v/:*{behavior:url(#default#VML)}  
  </style>  
  <body>  
              <v:RoundRect     style="position:relative;width:150;height:240px">  
  <v:path     textpathok="true"     />  
              <v:textpath     on="true"     string="cnbrucecnbrucecnbrucecnbrucecnbruc  
  ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"     />  
                  <v:shadow     on="T"     type="single"     color="#b3b3b3"     offset="3px,3px"/>  
                  <v:TextBox     style="font-size:10.2pt;">VML</v:TextBox>  
                  </v:RoundRect>      
  </body>  
  </html>  
   
    (3).   

    源码如下:  
   
  <html   xmlns:v>  
  <style>  
  v/:*{behavior:url(#default#VML)}  
  </style>  
  <body>  
        <v:RoundRect   style="position:relative;width:150;height:240px"   arcsize=0.5>  
          <v:shadow   on="T"   type="single"   color="#b3b3b3"   offset="3px,3px"/>  
          <v:TextBox   style="font-size:10.2pt;">VML</v:TextBox>  
          </v:RoundRect>    
  </body>  
  </html

css+div控制表格 标签代码

  • 2009年07月17日 17:07
  • 2KB
  • 下载

CSS控制表格——制作日历

表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版。这一次我们就来学习如何用CSS控制表格。 一.表格中的标记 表格(标记)在最初HTML设计时,仅仅是用来存放各种数据的。 下图是一个...

精美的css控制表格样式

  • 2011年05月03日 23:43
  • 3KB
  • 下载

利用CSS控制表格外观

  • 2008年01月01日 20:59
  • 53KB
  • 下载

CSS控制表格背景图片不重复显示&Discuz板块背景

背景颜色属性(background-color) 这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。 body {background-color:#99FF00;} ...

css3基础知识第二章控制背景-字体-文本-表格

有页面就会有背景,开始怎么用css控制页面背景 控制背景:background 1 background-color: 规定要使用的背景颜色; 2 background-position: 规定背景图...

用CSS控制表格的交替颜色

td {font-size:12px;color:#333333;line-height:150%} tr {background-color:expression((this.sectionRow...

漂亮的表格样式(使用CSS样式表控制表格样式)

依照WEB2.0风格,设计了几个表格样式,希望大家喜欢。 WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。 现在使用介绍使用CSS样式表来控制...

漂亮的表格样式(使用CSS样式表控制表格样式)

转载地址:http://blog.csdn.net/wallimn/article/details/2212916 感谢原作者 依照WEB2.0风格,设计了几个表格样式,希望大家喜欢。 WEB2...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用CSS控制表格
举报原因:
原因补充:

(最多只允许输入30个字)