Re: HTML5 Validator doesn't appear to understand colspan

2012-10-09 21:36, Steven Delahunty wrote:

> <table>
>
>      <tr class="main_table_header"><th colspan="4">Personal
> Information</th></tr>
>
>              <tr class="lower_table_header">
>              <th colspan="1">Full name</th><td colspan="3">Steven
> Delahunty</td></tr>
[...]
> </table>
>
> is the code I've used and I'm receiving the following error;
>
> Error /Line 3, Column 47/: Table columns in range 3…4 established by
> element th have no cells beginning in them.
>
> |	<tr class="main_table_header"><th colspan="4"*>*Personal Information</th></tr>

You are apparently using an HTML5 doctype (<!doctype html>), or manually 
setting the doctype in the validator's interface. In future, please 
specify such things (and preferably post a URL), as it essentially 
affects validation. HTML5 validation is completely different from 
"classic HTML" validation.

In HTML5, colspan is OK. What is not OK is the "table model". It's 
explained, in a rather formal way at
http://www.w3.org/TR/html5/attributes-common-to-td-and-th-elements.html#table-model
but the short story is what the the error message says.

You could silence the validator by adding a dummy row with empty cells,
<tr><td><td><td><td>
since that way each of the four columns would have a cell beginning in 
it. But that would be ugly and poor hacking and might have an impact on 
rendering, and would not pass *my* exam.

The proper approach is to change the cell of the first row to have 
colspan="2" instead of colspan="4" and remove the other colspan 
attributes. You should not use the colspan attribute to just make a 
column wider, as seems to be the idea in many cases where people use it 
against the table model. Instead, just set the column width in CSS.

Yucca

Received on Thursday, 11 October 2012 08:12:37 UTC