Stylish Simple Table Using CSS

In this tutorial we are going to see, how can we style the Ordered list in CSS using the simple CSS selectors.
styling_table (1)

Customize it and Download :

#simple-table {

font-family:"Lucida Sans Unicode", Sans-Serif;

font-size:16px;

background:#fff;

width:500px;

border-collapse:collapse;

text-align:left;

}

#simple-table th {

font-size:18px;

color: #DD7B62;

border-bottom: 2px solid #65AA76;

padding:10px 8px;

}

#simple-table td {

color:#000;

padding:16px 10px 0;

}

#simple-table tbody tr:hover td {

color:#009;

}

Style list is explained below -

Selector	Purpose
#simple-table	It is used for styling the overall table. All the table specific styles are written here
#simple-table th	It is used for styling the head cells of the table.
#simple-table td	It is used for styling the data cells of the table.
#simple-table tbody tr:hover td	It is used for styling the cells of table on cursor hover effect.