HTML Guide

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>

Ensure each column in your table has at least one <td> or <th> cell starting in it. This error often occurs when using the colspan or rowspan attributes incorrectly.

Example of correct usage:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Incorrect usage example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td colspan="2">Row 1, Cell 1</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <!-- Missing cell in column 2 -->
  </tr>
</table>

The corrected version ensuring each column has a starting cell:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td colspan="2">Row 1, spanning both columns</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</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 <td> or <th> element has a colspan attribute value that extends beyond the total number of columns defined in the <tbody> section.

HTML tables must have rows with a consistent number of columns within each <thead>, <tbody>, or <tfoot> group. If a cell uses the colspan attribute to span more columns than exist in the current row group, the table becomes semantically incorrect and fails validation.

Example of the Issue

<table>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td colspan="3">Too wide</td>  <!-- Invalid: colspan="3" but only 2 columns in tbody -->
    </tr>
  </tbody>
</table>

How to Fix

Ensure that the maximum number of columns in any row (considering colspan) within a <tbody> does not exceed the columns defined by the longest row in that group.

Corrected Example

<table>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td colspan="3">Spans all columns</td>
    </tr>
  </tbody>
</table>

Or, if you only need two columns:

<table>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td colspan="2">Spans two columns</td>
    </tr>
  </tbody>
</table>

Adjust the column count by either increasing the number of cells in each row or reducing the value of colspan as appropriate for your table structure.

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.

The W3C HTML Validator issue indicates that your <td> element is missing one or more accessibility attributes: either aria-checked or role. These attributes are normally necessary when the cell content needs to convey a specific role or state, such as a checkbox.

If your td element should not act as a checkbox, you should reconsider the design. Ensure that only semantic roles and attributes appropriate for the content and functionality are used. If the misuse is identified due to incorrect implementation, revisiting and clearing the incorrect attributes might be required.

The W3C HTML Validator issue “Misplaced non-space characters inside a table” usually occurs when there are text nodes (or other elements) that are not properly placed within table elements. In HTML, all text content should be contained within table cells.

How to Fix the Issue

To resolve this issue, ensure that all text content is placed inside <td> or <th> elements, which are the valid child elements of <table>, <tr>, and related elements. Here’s how you can identify and fix the issue:

Example of Incorrect Table Structure

<table>
  <tr>
    Hello World <!-- This is misplaced content -->
    <td>First Cell</td>
    <td>Second Cell</td>
  </tr>
</table>

Corrected Table Structure

<table>
  <tr>
    <td>Hello World</td> <!-- All text should be inside <td> or <th> -->
    <td>First Cell</td>
    <td>Second Cell</td>
  </tr>
</table>

Guidelines

• Text Content: Ensure that all text (including any headers or titles) is wrapped in <td> (for data cells) or <th> (for header cells). Keep in mind that event the non-breaking space character (&nbsp;) counts as text.

• Table Structure: Remember a typical structure for a table includes <table> containing one or more <tr> elements, which in turn contain the <td> or <th> elements.

• No Direct Text Nodes: Avoid having any direct text nodes outside of the cell elements within the table.

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