table-02(colgroup)

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>table</title>
 <link rel="stylesheet" href="">
 <script type="text/javascript"></script>
 <style type="text/css">
 /*CSS Reset*/
 body{ font:12px/1.5 Verdana,Geneva,Arial,Helvetica,sans-serif;}
 body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,form,fieldset,legend,button,input,textarea{ outline:medium none; padding:0; margin:0;}
 ul,ol{ list-style:none;}
 a{ text-decoration:none;}
 img{ border:none; display:block;}
 em,i{ font-style:normal;}
 s{ display:inline-block; overflow:hidden; }
 input{ vertical-align:middle;}
 /*TAB*/
 .tab table{ width:750px; border-collapse:collapse; border:1px solid #666; color:#fff;}
 .tab .bg1{ width:100px; background:#f00; }
 .tab .bg2{ background:blue;}
 .tab td{ border:1px solid #666; line-height:24px; padding:8px;}
 </style>
</head>
<body>
 <div>
  <table>
   <colgroup span="2">
    <col></col>
    <col></col>
   </colgroup>
   <colgroup span="2">
    <col ></col>
    <col></col>
   </colgroup>
   <tr>
    <th colspan="2">标题1</th>
    <th colspan="2">标题2</th>
   </tr>
   <tr>
    <td>标题1:</td>
    <td>内容1</td>
    <td>标题2:</td>
    <td>内容2:</td>
   </tr>
   <tr>
    <td>标题1:</td>
    <td>内容1</td>
    <td>标题2:</td>
    <td>内容2:</td>
   </tr>
   <tr>
    <td>标题1:</td>
    <td>内容1</td>
    <td>标题2:</td>
    <td>内容2:</td>
   </tr>
   <tr>table-02(colgroup)_第1张图片    <td>标题1:</td>
    <td>内容1</td>
    <td>标题2:</td>
    <td>内容2:</td>
   </tr>
   <tr>
    <td>标题1:</td>
    <td>内容1</td>
    <td>标题2:</td>
    <td>内容2:</td>
   </tr>
  </table>
 </div>
</body>
</html>

你可能感兴趣的:(table,table)