Re: Invalid colspan issue

On Tue, Feb 21, 2017 at 7:34 PM, Joel Swanson <joelswanson@charter.net>
wrote:

The following does not validate.
>
>         <table>
>             <tr>
>                 <td colspan="6">1</td>
>             </tr>
>             <tr>
>                 <td colspan="3">2</td>
>                 <td colspan="3">3</td>
>             </tr>
>             <tr>
>                 <td colspan="2">4</td>
>                 <td colspan="2">5</td>
>                 <td colspan="2">6</td>
>             </tr>
>         </table>
>
> I am trying to create a table like this.
>
>
It’s not clear whether this is meant to be a table (a data structure of a
certain kind, a matrix) or a technique for getting a visual layout for
content where the parts might not be related at all. In the latter case, an
HTML table element might be unnecessarily complicated and you might
consider using the layout tools of CSS instead.


> I am getting the following message on the colspan="6" line.
>
>     *Table column 2 established by element **td** has no cells beginning
> in it*
>
> I am assuming it is saying that there are no tds beginning on column 2,
>

Exactly. And this violates the HTML5 table rules. They are somewhat
complicated and expressed in a rather formal way (to make it exact), so
it’s a good idea to use a validator to check this oyt.


> and there aren't, but this still should validate in my opinion.
>

As it violates a normative rule that can be automatically checked, it
should not.


>
> It used to validate under XHTML.
>

I suppose you mean some previous version of XHTML (rather than XHTML
serialization of HTML5). For those versions, the validators act as XML
validators, which means that they only check things that depend on general
XML rules and on the formal syntax defined in a DTD – and a rule like this
cannot be described in that syntax.

If you wish to use an HTML table for a thing like this, you need to set it
up so that each column has a cell beginning in it.This can be done in this
case by using a four-column table:

        <table>
            <tr>
                <td colspan="4">1</td>
            </tr>
            <tr>
                <td colspan="2">2</td>
                <td colspan="2">3</td>
            </tr>
            <tr>
                <td colspan="1">4</td>
                <td colspan="2">5</td>
                <td colspan="1">6</td>
            </tr>
        </table>

You probably want to use CSS to set the widths of the columns. For this, it
might be simplest to add a little markup: if you add the elements
<col><col><col><col> after the start tag <table>, you can then easily set
e.g. equal-width columns:

<style> col { width: 25% } </style>

Yucca