In this tutorial, you will learn how to use CSS to make HTML tables look better.

Since this is the beginner’s section, only tables are used. Real-time examples are used in the advanced section.

At the end of this tutorial, the table will look like this.

Table without CSS

<table>
	<tr>
		<th>Firstname</th>
		<th>Lastname</th>
		<th>Age</th>
	</tr>
	<tr>
		<td>Samara</td>
		<td>Miller</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Allen</td>
		<td>Scarlet</td>
		<td>25</td>
	</tr>
	<tr>
		<td>Samara</td>
		<td>Miller</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Allen</td>
		<td>Scarlet</td>
		<td>25</td>
	</tr>
</table>

The CSS applied to the table is given below.

table { 
		width: 100%; 
	}
	
tr:nth-of-type(odd) {
		background: #eee;
	}
	
th { 
		background: #332; 
		color: white; 
	}
	
td, th { 
		padding: 6px; 
		text-align: left; 
	}

Code Explanation