CSS Examples Tutorial

CSS Examples

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

Since this is beginners 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.

Firstname	Lastname	Age
Samara	Miller	20
Allen	Scarlet	25
Samara	Miller	20
Allen	Scarlet	25

Table with out CSS

CSS Example

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

Preview

The CSS applied to the table is given below.

Example

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

Preview

Code Explanation

Selector	Property	Value	Description
table	width	100%	Sets the table width to match its background element.
tr:nth-of-type(odd)	background	#eee	Sets the background of the odd numbers table rows(1,3,...)to #eee.
th	color	white	Sets the text property of the table header to while.
td	padding	6px	Creates a small space of 6px around the text in every table cells.

Next Lesson > CSS Box Model