推荐一篇利用th,colgroup,col定义表格样式

  定义表格各列的样式,不用每个td都在那里加一堆的Class,利用th,colgroup,col等属性,轻松搞定^_^

  代码如下:

  

复制代码 代码如下:

  <style>

  table.Demo {

  border-collapse: collapse;

  color: #454545;

  font: 11px/150% Verdana, Arial, Helvetica, sans-serif;

  }

  table.Demo th {

  padding: 3px 7px;

  border: 1px solid #f60;

  border-width: 2px 1px 1px;

  background: #ffffe1;

  }

  table.Demo td {

  padding: 3px 7px;

  border: 1px solid #f60;

  }

  table.Demo col.Col1 {

  text-align: right;

  background: #f5f5f5;

  }

  table.Demo col.Col2 {

  color: #00c;

  }

  table.Demo col.Col3 {

  font-style: italic;

  }

  </style>

  <table class="Demo">

  <tr>

  <th>TagName</th>

  <th>ClassName</th>

  <th>CSS</th>

  </tr>

  <colgroup>

  <col class="Col1" />

  <col class="Col2" />

  <col class="Col3" />

  </colgroup>

  <tr>

  <td>table</td>

  <td>Demo</td>

  <td>border-collapse: collapse;<br />color: #454545;<br />font: 11px/150% Verdana, Arial, Helvetica, sans-serif;</td>

  </tr>

  <tr>

  <td>th</td>

  <td></td>

  <td>padding: 3px 7px;<br />border: 1px solid #f60;<br />border-width: 2px 1px 1px;<br />background: #ffffe1;</td>

  </tr>

  <tr>

  <td>td</td>

  <td></td>

  <td>padding: 3px 7px;<br />border: 1px solid #f60;</td>

  </tr>

  <tr>

  <td>col</td>

  <td>Col1</td>

  <td>text-align: right;<br />background: #f5f5f5;</td>

  </tr>

  <tr>

  <td>col</td>

  <td>Col2</td>

  <td>color: #00c;</td>

  </tr>

  <tr>

  <td>col</td>

  <td>Col3</td>

  <td>font-style: italic;</td>

  </tr>

  </table>

  抛砖引玉,更多效果就由你DIY了!

  

   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]