HTML Guide
The scope attribute must be used on a th element, not a td element.
The scope attribute helps define whether a header cell (th) refers to a column, row, or group of columns or rows in a table. According to current HTML standards, only th elements should use the scope attribute. Using scope on td elements is obsolete and invalidates your markup. To fix this, replace any td with scope with a th, and set the appropriate scope value (row, col, etc.).
Incorrect HTML Example (with validation error):
<table>
<tr>
<td scope="row">Monday</td>
<td>Meeting</td>
</tr>
</table>Corrected HTML Example:
<table>
<tr>
<th scope="row">Monday</th>
<td>Meeting</td>
</tr>
</table>Key points:
-
Use
scope="row"for row headers andscope="col"for column headers, but only onthelements. -
Never use the
scopeattribute on atdelement.
Learn more:
Related W3C validator issues
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 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.
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.
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>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>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 <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>To fix the W3C HTML Validator issue stating that a heading element like h1, h2, h3, h4, h5 or h6 must not appear as a descendant of the th element, you need to ensure that the HTML structure follows the specifications where a heading element (h1 to h6) is not placed within a table cell element like th.
Here’s an example of what might be causing the issue and how you can correct it:
Incorrect HTML:
<table>
<tr>
<th>Month</th>
<th><h1>Revenue</h1></th> <!-- Incorrect placement of h1 inside th -->
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>Corrected HTML:
<h1>Revenue per month</h1>
<table>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>In the corrected example, the issue is fixed by removing the h1 element from the th element. If you need to style the text inside the th element differently, you can achieve that via CSS without nesting heading elements inside table cell elements.
To fix the W3C HTML Validator issue stating that a heading element like h1, h2, h3, h4, h5 or h6 must not appear as a descendant of the th element, you need to ensure that the HTML structure follows the specifications where a heading element (h1 to h6) is not placed within a table cell element like th.
Here’s an example of what might be causing the issue and how you can correct it:
Incorrect HTML:
<table>
<tr>
<th>Month</th>
<th><h2>Revenue</h2></th> <!-- Incorrect placement of h2 inside th -->
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>Corrected HTML:
<h2>Revenue per month</h2>
<table>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>In the corrected example, the issue is fixed by removing the h2 element from the th element. If you need to style the text inside the th element differently, you can achieve that via CSS without nesting heading elements inside table cell elements.