Stylish CSS Table Design #2
In this tutorial, we are using the simple CSS and HTML for designing the stylish table. Take a look at following table design.
HTML Code :
Consider the following code -
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<table> <tbody> <tr> <th>One</th> <th>Two</th> <th>Three</th> </tr> <tr> <td>Apples</td> <td>Carrots</td> <td>Steak</td> </tr> <tr> <td>Oranges</td> <td>Potato</td> <td>Pork</td> </tr> <tr> <td>Pears</td> <td>Peas</td> <td>Chicken</td> </tr> </tbody> </table> |
We have just created the simple table which is basic HTML version of the table. Now its time to add some CSS to style the table.
CSS Code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
table,tbody,tfoot,thead,tr,th,td { background: none; margin: 0; padding: 0; border: 0; font-size: 16px; font: inherit; vertical-align: middle; } table { border-collapse: collapse; border-spacing: 0; color: #333; font-family: Helvetica, Arial, sans-serif; width: 100%; border-collapse: collapse; border-spacing: 0; } td,th { border: 1px solid transparent; height: 40px; transition: all 0.3s; } th { background: #DFDFDF; font-weight: bold; } td { background: #FAFAFA; text-align: center; } tr: nth-child(even) td { background: #F1F1F1; } tr: nth-child(odd) td { background: #FEFEFE; } tr td: hover { background: #666; color: #FFF; } |
After adding the above code the table will exactly look like the below demo -
Explanation of the above code :
Consider the following code -
|
1 2 3 4 5 6 |
tr: nth-child(even) td { background: #F1F1F1; } tr: nth-child(odd) td { background: #FEFEFE; } |
We have used different background color for the two different rows.