Creating average tables can actually make a site appear boring at times. Styling a table with CSS is actually quite simple and will definitely add that extra something you are looking for in your site. In this tutorial, you will learn how to style an HTML table with CSS.

Setup

In order to get started you will need to start up Visual Studio or notepad and have an html file and a CSS file saved.

The Concept…

The first thing we will be doing is creating a table. In your index or default html file, create a table with at least 7 rows and two columns. We actually provide you with the code for a sample table in the code box below:

Notice how we have “th” for the heading and td for the actual cells. In CSS, you can specify that you want to style them individually or at the same time. This is done by placing the name of the item to be styled and in brackets, placing the styling. Say you want the table to have an image as the background, you would state table, and in brackets, place that you want a background image with whatever url it has. In the code below, we have a light bulb jpeg image as the background and the table to be displayed in block format and have auto margins.

Now we will be taking care of the table content, so we can have the table cells, “td”, to have white text and have bold font.

Now we will be taking care of the table content, so we can have the table cells, “td”, to have white text and have bold font.

When you save, you can actually see the progress in split mode or design mode in Visual Studio. In the case you are using a simple text editor such as notepad, simply go ahead and save, and open the file in your browser. From the code we provided, your table should appear as follows:

A Few Last Words…

You have successfully completed this tutorial. There are various elements we did not cover in this tutorial, that only means that the possibilities to style your tables are endless. Join us next time for additional CSS tutorials!

Download Source Files