We recommend that you use th, colgroup, and col to define Table Styles.

Define the styles of each column in the table. You do not need to add a bunch of classes to each td. You can use attributes such as th, colgroup, and col to easily set the style of each column.
The Code is as follows: Copy codeThe Code is as follows: <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>

More results are yours!<Br/> <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; 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> <td> th </td> <td> padding: 3px 7px; <br/> border: 1px solid # f60; <br/> border-width: 2px 1px 1px; <br/> background: # ffffe1; </td> </tr> <td> td </td> <td> padding: 3px 7px; <br/> border: 1px solid # f60; </td> </tr> <td> col </td> <td> Col1 </td> <td> text-align: right; <br/> background: # f5f5f5; </td> </tr> <td> col </td> <td> Col2 </td> <td> color: # 00c; </td> </tr> <td> col </td> <td> Col3 </td> <td> font-style: italic; </td> </tr> </table> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]