HTML Checking for Large Sites

A <table> contains an incoherent number of cells on one of its columns. Check the structure of the table to find the invalid column.

Example of a valid table that defines in its header that the first column is 2 cells wide:

<table>
  <thead>
    <tr>
      <th colspan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The table body</td>
      <td>with two columns</td>
    </tr>
  </tbody>
</table>

This same table with an empty body will be invalid because the table header cannot match any body columns:

<table>
  <thead>
    <tr>
      <th colspan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Table rows on the same <table> element must have the same number of columns, which comes determined by the first tr row.

For example, this table is wrong as the first row defines 2 columns, while the second row tries to use 4 columns:

<table>
    <tr>
      <td>Liza</td>
    </tr>

    <tr>
      <td>Jimmy</td>
      <td>14</td>
    </tr>
</table>

A <table> contains a <tr> row that has less <td> columns than the column count established by the first row. Check the table to ensure all rows have the same number of columns.

For example, in the following table, the first <tr> row defines that it’s 2 columns wide, but the second <tr> row tries to use only 1 column:

<table>
  <!-- This first row sets the table as 2 columns wide -->
  <tr>
    <td>First</td>
    <td>Second</td>
  </tr>

  <!-- This second row has only 1 column -->
  <tr>
    <td>Wrong</td>
  </tr>
</table>

The <table> element does not accept a height attribute. Use CSS instead.

A table row tr has been found, containing no td cells. Check the table and remove empty rows.

Table contents is organized in rows using the <tr> element, which must contain cells using the <td> element, as in this example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Liza</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Jimmy</td>
      <td>14</td>
    </tr>
  </tbody>
</table>

A tr with no td cells on it will raise an issue, as in this example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>

    </tr>
    <tr>
      <td>Jimmy</td>
      <td>14</td>
    </tr>
  </tbody>
</table>

Note that self-closing <tr/> elements also count as empty rows as are like <tr></tr>.

An <a> element has been found in an invalid place within a <table> element.

For example, the following code would cause this issue:

<table>
  <tr>
    <a href="#">link</a>
  </tr>
</table>

Instead, the <a> element should be inside a <td> element, as a <tr> can’t hold content directly:

<table>
  <tr>
    <td>
      <a href="#">link</a>
    </td>
  </tr>
</table>

A <table> contains an incoherent number of columns on one of its rows. Check the structure of the table to find the invalid row.

For example, in the following table, the first <tr> row defines that it’s 2 columns wide, but the second <tr> row tries to use 5 columns by means of a colspan attribute:

<table>
  <!-- This first row sets the table as 2 columns wide -->
  <tr>
    <td>First</td>
    <td>Second</td>
  </tr>

  <!-- This second row tries to use 5 columns -->
  <tr>
    <td colspan="5">Wrong</td>
  </tr>
</table>

The <caption> element specifies the caption (or title) of a table. It’s not allowed for a <caption> to contain another table.

Both <table> and <td> elements no longer accept a width attribute. Instead, you should use CSS as in this example:

<table style="width:100%;">
  <tr>
    <td style="width:50px;">Name</td>
  </tr>
</table>