• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    漂亮的表格

    !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 {
     width: 700px;
     padding: 0;
     margin: 0;
    }

    caption {
     padding: 0 0 5px 0;
     width: 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>nbsp;/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>

    上一篇:DIV_圆边圆角的实现
    下一篇:凹陷文字 推荐
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    漂亮的表格 漂,亮的,表格,漂,亮的,表格,