Image background

In the previous CSS Table chapters we have explored a variety of CSS styling which could be combined to form a variety of HTML Table styling .In this chapter, you will learn how to style HTML Tables with images, shadows, hovering etc. Once you create the structure of the HTML table , it is easy to adding a layer of style to customize its style and appearance.

CSS Table background Image

Simply you can apply background-image to the table and achieve a consistent look in the browser. The CSS background-image property will set an image on the background of the table.


CSS table background

Source Code

How to make a CSS Shadow on a table

You can make a shadow on the table by using the CSS box-shadow property.


CSS table shadow

CSS Code

Apply this CSS code to above example HTML Table.

CSS Rounded Corners Table

You can achieve rounded corners table by using CSS border-radius property.


CSS rounded cornered table

CSS Code

Apply this CSS code to above example 1 HTML Table.

Highlight CSS Table Row on hover

You can highlight row on hover by using the pseudo class :hover to the tr tag of the table.

Move mouse over the rows

Roll No Name Team
1001 John Red
1002 Peter Blue
1003 Henry Green
1004 Ford Yellow

Source Code