Recommend an article using th, colgroup, col to define table styles_Experience exchange

Define the style of each column of the table. You don’t need to add a bunch of Classes to each td. You can easily do it by using attributes such as th, colgroup, col, etc. ^_^
The code is as follows:

Copy code a> The code is as follows:

  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
     
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  

TagName	ClassName	CSS
table	Demo	border-collapse: collapse; color: #454545; font: 11px/150% Verdana, Arial, Helvetica, sans-serif;
th		padding: 3px 7px; border: 1px solid #f60; border-width: 2px 1px 1px; background: #ffffe1;
td		padding: 3px 7px; border: 1px solid #f60;
col	Col1	text-align: right; background: #f5f5f5;
col	Col2	color: #00c;
col	Col3	font-style: italic;

抛砖引玉，更多效果就由你DIY了！

<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; color: #454545; font: 11px/150% Verdana, Arial, Helvetica, sans-serif;</td> </tr> <tr> <td>th</td> <td></td> <td>padding: 3px 7px; border: 1px solid #f60; border-width: 2px 1px 1px; background: #ffffe1;</td> </tr> <tr> <td>td</td> <td></td> <td>padding: 3px 7px; border: 1px solid #f60;</td> </tr> <tr> <td>col</td> <td>Col1</td> <td>text-align: right; 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>
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]