table element with no cell beginning in them Error

Question

My table have thead, tbody, and tfoot, I must have 6 columns (1/2/3).

But I got Error: Table columns in range 5…6 established by element th have no cells beginning in them. From line 17, column 36; to line 18, column 26.

I had my code checked on validator.w3.org and the error was indicated at th colspan="3">form

 <table id="table">
      <caption>
        MinhDucHa 
      </caption>
      <thead>
        <tr >
          <th>Name</th>
          <th colspan="2">Date</th>
          <th colspan="3">Form</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Bod</td>
          <td>Jan. 13</td>
          <td>March 12</td>
          <td colspan="3">
            <form>
              <label for="bod-favorite-color">Favorite Colour:</label
              ><input type="text" id="bod-favorite-color" name="fname" />
            </form>
          </td>
        </tr>
        <tr>
          <td>Md</td>
          <td>Feb. 23</td>
          <td>March 19</td>
          <td colspan="3">
            <form>
              <label for="md-favorite-color">Favorite Colour:</label
              ><input type="text" id="md-favorite-color" name="fname" />
            </form>
          </td>
        </tr>
        <tr>
          <td>Suzy</td>
          <td>Jan. 18</td>
          <td>Dec. 24</td>
          <td colspan="3">
            <form>
              <label for="suzy-favorite-color">Favorite Colour:</label
              ><input type="text" id="suzy-favorite-color" name="fname" />
            </form>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="6">Copyright &#169;2023 Minh Duc Ha</th>
        </tr>
      </tfoot>
    </table>

@Leland I tried, it didn't work – Đức Seven Mar 18 '23 at 03:58 — Đức Seven, Mar 18 '23 at 03:58

Leland · Accepted Answer · 2023-03-19T12:51:36.980

You've got a variety of issues.

<th>Name</th>
<th colspan="2">Date</th>
<th colspan="3">Form</th>

1+2+3 = 6. Here, you're saying to HTML "expect me to have 6 columns in some row in the table." Later on, in each row of 4 columns, you pass colspan="3" to the last column, expecting that the HTML validator will accept that as being one such example of a 6 column row. However, that is not true, per the spec. It is simply, once again, you informing the browser to keep an eye out for a 6 column row. It never finds one, and so you have an error.

But that's OK, because you can do what you want by just using the correct colspan values, ensuring each row adds up to 4 (rather than 6):

<table id="table">
  <caption>
    MinhDucHa
  </caption>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="2">Date</th>
      <th>Form</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bod</td>
      <td>Jan. 13</td>
      <td>March 12</td>
      <td>
        <form>
          <label for="bod-favorite-color">Favorite Colour:</label>
          <input type="text" id="bod-favorite-color" name="fname" />
        </form>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="4">Copyright &#169;2023 Minh Duc Ha</th>
    </tr>
  </tfoot>
</table>

This substantively changes the design of OP's table. The correct way to handle this would be to match the number of tds to th elements and combine the dates into single td elements. https://jsfiddle.net/2mpr6ok7/ — TylerH, Mar 18 '23 at 19:38
Concatenating date fields is a less substantial change...? Plus, you do realize the bad implications that has for: sorting, accessibility, reordering, etc. No, the real issue with my answer is that I put the `colspan` in the heading elements on the wrong cell. Updated. — Leland, Mar 19 '23 at 12:51
The data fields were already concatenated in OP's code based on the semantic structure. It's OPs choice whether he wants to concatenate the elements into one or add another header, but in short, yes, it is a less substantial change. — TylerH, Mar 19 '23 at 19:19

table element with no cell beginning in them Error

1 Answers1