Search code examples
htmlhtml-tablecellscol

Table columns in range 3...4 established by element th have no cells beginning in them


I am writing a table in HTML5 with a table head, and body. Upon validating using Sublime Text 3 W3C Validator I get the error: "Table columns in range 3...4 established by element th have no cells beginning in them". Could this be a bug or am I coding the table incorrectly? Please find the table code below:

<table>
    <thead>
        <tr>
        <th colspan="5"><a id="button01" href="#" title="Learn More">Learn More</a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="1">A</td>
            <td colspan="3">Item A</td>
            <td colspan="1"><span class="bullet">*</span></td>
        </tr>
        <tr>
            <td colspan="1">B</td>
            <td colspan="3">Item B</td>
            <td colspan="1"><span class="bullet">*</span></td>
        </tr>
        <tr>
            <td colspan="1">M</td>
            <td colspan="3">Traditional (DIN-compliant flange)</td>
            <td colspan="1"><span class="bullet">*</span></td>
        </tr>
    </tbody>
</table>

Solution

  • To solve this error I used colspan="1" instead of colspan="3" and changed the table head colspan="5" to colspan="3". This eliminated the W3C HTML5 Validator errors. I have also included the css I used to style for my own needs.

    See below for the code:

    <table>
      <thead>
        <tr>
          <th colspan="3"><a id="button01" href="#" title="Learn More">Learn More</a>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="1">A</td>
          <td colspan="1">Item A</td>
          <td colspan="1"><span class="bullet">*</span>
          </td>
        </tr>
        <tr>
          <td colspan="1">B</td>
          <td colspan="1">Item B</td>
          <td colspan="1"><span class="bullet">*</span>
          </td>
        </tr>
        <tr>
          <td colspan="1">M</td>
          <td colspan="1">Traditional (DIN-compliant flange)</td>
          <td colspan="1"><span class="bullet">*</span>
          </td>
        </tr>
      </tbody>
    </table>

    /*
     * Table Components
     */
    
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      line-height: 20px;
    }
    thead {
      background: #EEE;
      font-weight: bold;
    }
    td {
      border: 1px solid #222;
      padding: .35em;
      vertical-align: middle;
    }
    td:first-child {
      width: 10%;
    }
    td:last-child {
      width: 5%;
    }