CSS Table

CSS

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D

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

table {
	width : 100%;
}

table, th, td {
	border : 1px solid #333;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D
Row 3value Evalue F
Row 4value Gvalue H

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;
}
Header 1Header 2
Row 1value Avalue B
Row 2value Cvalue D
Row 3value Evalue F
Row 4value Gvalue H