HTML validation error-Table columns in range 4…5 established by element th have no cells beginning in them

Question

EDIT: I used the W3 validator. I have a problem when I try to validate my html code. I've tried to google the answer, but I can't seem to find a way to fix it. If someone could please explain to me what is causing the error and how to fix it, i would be very happy. Error message: Line 80, Column 19: Table columns in range 4…5 established by element th have no cells beginning in them. th colspan="6"Köpt utrustning/th.
Here is the code related to that table:

        <div id="tabell2Space">
    <div id="tabell2">
    <table>
        <tr>
            <th colspan="6">Köpt utrustning</th>
        </tr>

        <tr>
            <th rowspan="2">Artikelnummer#</th>
            <th rowspan="2">Artikelbild</th>
            <th colspan="3">Beskrivning</th>
            <th>Pris</th>
        </tr>

        <tr>
            <th colspan="3">Frakt, installation, etc</th>
            <th>Kostnad</th>
        </tr>

        <tr>
            <td rowspan="2">1.</td>
            <td rowspan="2"><img alt="Dator" src="Bilder/pryl2.jpg"></td>
            <td colspan="3">IMB Clone computer</td>
            <td>$ 400.00</td>
        </tr>

        <tr>
            <td colspan="3">Frakt, installation, etc</td>
            <td>$ 20.00</td>
        </tr>

        <tr>
            <td rowspan="2">2.</td>
            <td rowspan="2"><img alt="Datorkomponent" src="Bilder/pryl1.jpg"></td>
            <td colspan="3">1GB RAM Module</td>
            <td>$ 50.00</td>
        </tr>

        <tr>
            <td colspan="3">Frakt, installation, etc</td>
            <td>$ 14.00</td>
        </tr>

        <tr>
            <th colspan="6">Köpt utrustning</th>
        </tr>
</table>
</div>
</div>

Any help is appreciated!

Answer 1

The table structure violates the HTML table model, which has now been formalized in HTML5, and the W3C HTML5 validator checks against it. The model is described in section 4.9.12 Processing model of chapter 4.9 Tabular data of the HTML5 spec. It's rather technical, but the point is that a table consists of rows and columns, which define a grid of slots, and each slot must have a cell starting in it.

In your case, the real problem is that you declare six columns, but slots in columns 4 and 5 have no cells starting in them. To put it in another, probably more useful way, your table really has just four columns (as you can see if you add borders around cells, as @PHJCJO suggested), but you have declared otherwise, as if the third real column consisted of three columns.

The fix is this to remove all those colspan="3" attributes that do this and accordingly change colspan="6" to colspan="4" . The following code implements this, and validates, and creates the same rendering except possibly for the width of the third column, which should be set in CSS if needed. Borders are included here just for clarity.

  <div id="tabell2Space"> <div id="tabell2"> <table border> <tr> <th colspan="4">Köpt utrustning</th> </tr> <tr> <th rowspan="2">Artikelnummer#</th> <th rowspan="2">Artikelbild</th> <th>Beskrivning</th> <th>Pris</th> </tr> <tr> <th>Frakt, installation, etc</th> <th>Kostnad</th> </tr> <tr> <td rowspan="2">1.</td> <td rowspan="2"><img alt="Dator" src="Bilder/pryl2.jpg"></td> <td>IMB Clone computer</td> <td>$ 400.00</td> </tr> <tr> <td>Frakt, installation, etc</td> <td>$ 20.00</td> </tr> <tr> <td rowspan="2">2.</td> <td rowspan="2"><img alt="Datorkomponent" src="Bilder/pryl1.jpg"></td> <td>1GB RAM Module</td> <td>$ 50.00</td> </tr> <tr> <td>Frakt, installation, etc</td> <td>$ 14.00</td> </tr> <tr> <th colspan="4">Köpt utrustning</th> </tr> </table> </div> </div> 

Answer 2

Semantically, using <th> (indicating a row/column header) should be followed by one or more <th> s, unless the <th> is in the <thead> . I would use a <td colspan="6">Köpt utrustning</td> instead of <th> , and just style it to be bold if that's the effect you're going for.