Formatting a table in HTML

When you’re building your own website, one of the most useful skills you can master is how to create and format clean-looking tables. Not only do traditional tables often come in handy, but table-making can also be used to create page layouts, one of the most important aspects of a user-friendly web page.

Creating a table is straightforward and easy. There are plenty of tutorials and step-by-step guides available after just a quick Google search. My favorite of the ones I found can be on

But once you’ve built your table, you’ve still got a bit to do before it’ll be ready to debut on your web page. Default table properties will often lead to confusing and unattractive displays of information, so it’s vital that you take a little time to apply some formatting. Here we’ll address some of the most fundamental table attributes.


unformatted table

The table in the above image has all the right columns and rows I need to display my information, but it’s both unsightly and confusing. First, you might want to remove the table’s border, which doesn’t really do much for our page design. Do this by specifying “no border” using the border attribute in the opening table tag:

<table border-style=”none”>

The results should clarify things a bit, eliminating the unnecessary border.

table sans border

Cell Spacing and Cell Padding

The next step is to give the content of your table cells some room to breathe. This can be done using the cell spacing and cell padding attributes.

The difference between the two is that cell spacing is the distance between individual cells, measured from their borders, whereas cell padding the distance between a cell’s contents and its border. Basically

cell spacing


cell padding

Luckily, we don’t have to worry too much about the difference — since our table doesn’t have a border, adding space to either property will produce the same visual effect. Let’s add 15px of cell padding.

<table border-style=”none” cellpadding=”15px”>

table with cell padding

As you can see, adding the cell padding spaced the table’s cells such that the table now extends further down the page, allowing us to see only the first two rows. However, scrolling doesn’t take much effort, and in the case of this table, the larger size is necessary to improve readability.

From here, you can experiment with column and row heights and widths, as well as with CSS style for individual cells. However, you’re on your way to having a helpful and professional-looking table. Lots of luck!



~ by cathybutchy on November 5, 2011.

%d bloggers like this: