HTML5 - Table border and cellpadding with CSS

These days I am working very heavily on conversion of existing web applications to use new HTML5 and CSS specifications. So I installed add-on in Visual Studio 2010 to use HTML5 intellisense. Now when I started to create new pages and type HTML tags, I could see new attributes and elements in the intellsense drop down list etc. One of the things that stood out on most of the pages was that all the TABLE elements had greenunderlines for attributes like cellpadding, cellspacing etc. When I hover on those errors, I get the following message.

Validation (HTML5): Attribute 'cellpadding' is not a valid attribute of element 'table'

How to set cellpadding, cellspacing and border for table using CSS

Since a lot of existing web applications have the page structure created using TABLE elements, you will need a solution to get rid of these obsolete attributes and make your pages CSS compliant. Here what you are going to do.

Set border

Define a style for your table in your CSS file or style section in header of your page. And add border style to it. To control how border is drawn around cells, you will need to add border-collapse style as well. Here is an example of it.

.tablewithspacing
{
    border: 1px solid #193144;
    border-collapse:separate;
}

.tablewithspacing td
{
    border:1px solid #193144;
    padding:2px;
    vertical-align:top;
}

There are two possible values for border-collapse style.

table border-collapse collapsecollapse: This value will make border lines collapse or draw on top of each other. You can see from the image here how border lines are drawn.
table border-collapse separate separate: This value will make border lines draw with padding in between. As you can see image how each cell has individual border rectangle drawn.

If you want to draw border only around the table and not for individual cells then do not set border style for td element.

Set cellpadding

As you can see from the same CSS style, I have set padding style for td element for my table. This will ensure that I have cellpadding of 2px around the cells.

comments powered by Disqus

Search

Social

Weather

7.5 °C / 45.5 °F

weather conditions Clouds

Monthly Posts

Blog Tags