Give your HTML Tables the Excel Spreadsheet look

By: Pasan on 1:27 PM

This is to give your table the cool spreadsheet look (if you want it!). Sometimes you create tables, you may find that there are gaps between cell borders making the borders look quite thick.

So if you aim is to make your html table look similar to an excel worksheet, you need to make those borders smoother.

As it turns out you can achieve this simply by adding one more CSS line into your CSS code.

You do use a separate CSS section/file right? Don't stick to using inline CSS for everything as it gets pretty messy eventually and you forget what you did. When you separate the CSS, your code looks great and it's easier for anyone to go through and understand your code.

Here is the single line you need to add to your CSS:
border-collapse:collapse;

So add this line to the section where you are formatting your table. Like this:

table{
... your other css lines ..
..
border-collapse:collapse;
}

Then to format the border color and thickness etc:

td {
padding: 7px;
border: 1px solid #ccc;
}

That's all. You'll have a nice spreadsheet like table.

Tip:
Check out this website: http://www.somacon.com/p141.php. It gives you a nice interface to easily try out many different CSS styles on tables.

Sources:
Main: http://www.webmasterworld.com/css/3065746.htm

Others:
http://www.w3schools.com/Css/pr_tab_border-collapse.asp
http://www.w3schools.com/css/pr_tab_border-spacing.asp