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;
}

Edit Yourself »

For learning HTML online : click here

Explanation : Styling Ordered List

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.