CSS Table

In this tutorial we will learn about CSS Table styling property.

border

We use the border property to style the border of the table.

In the following example we have set the border to 1px.

table {
	border : 1px solid #333;
}

Note! th and td have their own border so, we have to set their border separately.

In the following example we have set the border of the table, th and td.

table, th, td {
	border : 1px solid #333;
}

border-collapse

We use the border-collapse property to collapse the border into one single border.

In the following example we have set the border-collapse property to collapse.

table {
	border-collapse : collapse;
}

table, th, td {
	border : 1px solid #333;
}

padding

We use the padding property to set the padding of the th and td.

In the following example we have set the padding of the th and td to 15px;

table, th, td {
	border : 1px solid #333;
}

th, td {
	padding : 15px;
}

width

We use the width property to set the width of the table.

For fixed width we set the width of the table to a fixed value. For variable width we use percentage.

In the following example we have set the width of the table to 250px.

table {
	width : 250px;
}

table, th, td {
	border : 1px solid #333;
}

In the following example we have set the width of the table to 100%.

table {
	width : 100%;
}

table, th, td {
	border : 1px solid #333;
}

height

We use the height property to set the height of the table.

In the following example we have set the height of th and td to 50px.

table, th, td {
	border : 1px solid #333;
}

th, td {
	height : 50px;
}

text-align

We use the text-align property to align the content of the th and td to left, center and right.

In the following example we have set the text-align of th to center and text-align of td to left.

table {
	width : 40%;
}

table, th, td {
	border : 1px solid #333;
}

th {
	text-align : center;
}

td {
	text-align : left;
}

vertical-align

We use the vertical-align property to align the content of th and td to top, middle and bottom align.

In the following example we have set the vertical-align of the th to middle and td to bottom.

table {
	width : 40%;
}

table, th, td {
	border : 1px solid #333;
}

th {
	vertical-align : middle;
	height : 50px;
}

td {
	vertical-align : bottom;
	height : 50px;
}

Striped table

We can create striped table using the :nth-child() selector.

In the following example we have set the background-color of header row to lightyellow and all the rows at even place (2nd, 4th, ...) to lightblue.

table {
	width : 100%;
}

table, th, td {
	border : 1px solid #333;
}

tr:nth-child(1) {
	background-color : lightyellow;
}

tr:nth-child(even) {
	background-color : lightblue;
}

Hover table

We can use the :hover to make a table row highlighted when mouse hovers on top of it.

In the following example the background-color of the table row will turn lightyellow when mouse hovers on top of it.

table {
	width : 100%;
}

table, th, td {
	border : 1px solid #333;
}

tr:hover {
	background-color : lightyellow;
}