How can I code cellspacing=0 so it is valid HTML5?

Question

I have HTML looking like this:

<table class="table" style="clear: both;" width="100%" cellspacing="0">

My IDE is telling me that width and cellspacing are not valid HTML5.

Is there a way I can code this so that it is valid?

Answer 1

Well, use the border-collapse: collapse; CSS rule (which has the same effect: no space between table cells). Note that this may not work in older browsers like IE 5 or 6, so if you need to support them you are out of luck.

<table class="table" style="clear: both; border-collapse: collapse; width: 100%;">

Answer 2

The width and cellspacing attributes are indeed depreciated as of HTML5. The proper way to handle this is with CSS.

For cellspacing, please see this answer: In HTML5, with respect to tables, what replaces cellpadding, cellspacing, valign, and align?

I have excerpted the code from the answer in the link above (credit goes to @Drudge):

This is an example for cellspacing="5"

.table { 
    border-collapse:separate;
    border-spacing: 5px;
} 

This is an example for cellspacing="0"

.table { 
    border-collapse:collapse;
    border-spacing: 0; 
}

To solve your width attribute not being valid, simply use the CSS width property:

.table {
    width:100%;
}