HTML table validation colspan issue

Question

I have this html table:

<fieldset class="form login">
    <legend>Authorization</legend>
    <table>
      <tbody>
        <tr>
          <td colspan="1">
            <label class="form__label" for="login">Login</label>
          </td>
          <td colspan="3">
            <input id="login" type="email" required="required">
          </td>
        </tr>
        <tr>
          <td colspan="1">
            <label class="form__label" for="password">Password</label>
          </td>
          <td colspan="3">
            <input id="password" type="password" required="required">
          </td>
        </tr>
        <tr>
          <td class="text-center" colspan="4"><input type="submit"></td>
        </tr>
      </tbody>
    </table>
  </fieldset>

When I run it through validator (validator.w3.org) I get an error:

Error: Table columns in range 3…4 established by element td have no cells beginning in them.

From line 21, column 16; to line 22, column 26

     </td>↩          <td colspan="3">↩

What does it mean ? I found this answer:
Help with HTML validation error: Table column has no cells beginning in it

but still don't understand what exactly I must do to make it valid ?

probably coz the number of columns you want to span is less then the number of columns in the table. try expanding the table of decreasing the value of colspan — sns, Jun 24 '18 at 16:13
decreased colspan 3 to 2 - doesen't work, in fact, getting more errors: A table row was 4 columns wide and exceeded the column count established by the first row (3). — t411tocreate, Jun 24 '18 at 16:27

score 1 · Accepted Answer · answered Jun 24 '18 at 16:45

Your table has three rows:
```
Row 1:
Row 2:
Row 3:
```
In rows 1 and 2 you have a cell in column 1 and a cell spanning columns 2 to 4

In row 3 you have a cell spanning columns 1 to 4

Row 1: | cell 1,1 | cell 1,2-4 |
Row 2: | cell 1,1 | cell 1,2-4 |
Row 3: | cell 1,1-4            |

The validator looks at this table and complains that although the markup says that there are 4 columns in reality there are only 2.

So the solution is to replace colspan="3" in rows 1 and 2 with colspan="1" (or drop it altogether, since colspan="1" is meaningless), and in row 3 replace colspan="4" with colspan="2". In this way the markup is aligned with the actual aspect of the table.

HTML table validation colspan issue

1 Answers1