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 quackit.com.
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.
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:
The results should clarify things a bit, eliminating the unnecessary 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
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”>
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!