zoukankan      html  css  js  c++  java
  • 漂亮的表格样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>CSS Tables</title> 
    <link href="styles.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <style type="text/css"> 
    /* CSS Document */ 
    
    body { 
        font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
        color: #4f6b72; 
        background: #E6EAE9; 
    } 
    
    a { 
        color: #c75f3e; 
    } 
    
    #mytable { 
         700px; 
        padding: 0; 
        margin: 0; 
    } 
    
    caption { 
        padding: 0 0 5px 0; 
         700px;      
        font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
        text-align: right; 
    } 
    
    th { 
        font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
        color: #4f6b72; 
        border-right: 1px solid #C1DAD7; 
        border-bottom: 1px solid #C1DAD7; 
        border-top: 1px solid #C1DAD7; 
        letter-spacing: 2px; 
        text-transform: uppercase; 
        text-align: left; 
        padding: 6px 6px 6px 12px; 
        background: #CAE8EA url(images/bg_header.jpg) no-repeat; 
    } 
    
    th.nobg { 
        border-top: 0; 
        border-left: 0; 
        border-right: 1px solid #C1DAD7; 
        background: none; 
    } 
    
    td { 
        border-right: 1px solid #C1DAD7; 
        border-bottom: 1px solid #C1DAD7; 
        background: #fff; 
        font-size:11px; 
        padding: 6px 6px 6px 12px; 
        color: #4f6b72; 
    } 
    
    
    td.alt { 
        background: #F5FAFA; 
        color: #797268; 
    } 
    
    th.spec { 
        border-left: 1px solid #C1DAD7; 
        border-top: 0; 
        background: #fff url(images/bullet1.gif) no-repeat; 
        font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    } 
    
    th.specalt { 
        border-left: 1px solid #C1DAD7; 
        border-top: 0; 
        background: #f5fafa url(images/bullet2.gif) no-repeat; 
        font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
        color: #797268; 
    } 
    /*---------for IE 5.x bug*/ 
    html>body td{ font-size:11px;} 
    </style> 
    <body> 
    <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> 
    <caption> </caption> 
      <tr> 
        <th scope="col" abbr="Configurations" class="nobg">Configurations</th> 
    
        <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th> 
        <th scope="col" abbr="Dual 2">Dual 2GHz</th> 
        <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th> 
      </tr> 
      <tr> 
        <th scope="row" abbr="Model" class="spec">lipeng</th> 
        <td>M9454LL/A</td> 
    
        <td>M9455LL/A</td> 
        <td>M9457LL/A</td> 
      </tr> 
      <tr> 
        <th scope="row" abbr="G5 Processor" class="specalt">mapabc</th> 
        <td class="alt">Dual 1.8GHz PowerPC G5</td> 
        <td class="alt">Dual 2GHz PowerPC G5</td> 
    
        <td class="alt">Dual 2.5GHz PowerPC G5</td> 
      </tr> 
      <tr> 
        <th scope="row" abbr="Frontside bus" class="spec">地图名片</th> 
        <td>900MHz per processor</td> 
        <td>1GHz per processor</td> 
        <td>1.25GHz per processor</td> 
    
      </tr> 
      <tr> 
        <th scope="row" abbr="L2 Cache" class="specalt">图秀卡</th> 
        <td class="alt">512K per processor</td> 
        <td class="alt">512K per processor</td> 
        <td class="alt">512K per processor</td> 
      </tr> 
    
    </table> 
    
    </body> 
    </html>
    
  • 相关阅读:
    删除表空间的时候遇到的问题:ORA-02429: 无法删除用于强制唯一/主键的索引
    删除
    Activity中使用getSystemService获得系统服务
    用多线程实现反应灵敏的界面(Java)
    用数组实现3个栈之固定分割(Java)
    Android小知识点20条
    Android数据库中数据文件的导出与查看
    MFC中使用CSplitterWnd分割窗口后设置视图大小的问题
    MFC中,通过preCreateWindow函数无法设置视图样式(包括窗口的大小)
    6:Node.js 路由
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/1944700.html
Copyright © 2011-2022 走看看