HTML Checking for Large Sites

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>

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 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>

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>

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>

The <th> HTML element defines a cell as a header of a group of table cells, and must appear within a <tr> element.

In the following example for a simple table, the first <tr> contains two <th> header cells naming the values for each column:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>49</td>
  <tr>
  <tr>
    <td>Joe</td>
    <td>47</td>
  </tr>
</table>

<td> elements no longer accept an align attribute. This can be achieved using CSS like this:

<td style="text-align:center;">content</td>

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