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>

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

The value px for a width property is incorrect, it should include both the value and the units, like 10px, or just 0 if it’s zero width. Using only the units without the value is incorrect.

Example of Incorrect CSS

<style>
  .example {
    width: 300; /* This is missing the unit */
  }
  .example2 {
    width: px; /* This is missing the value */
  }
</style>

Corrected Example of CSS

Make sure to include the unit (like px, em, %, etc.) when specifying the width:

<style>
  .example {
    width: 300px; /* Correctly includes 'px' unit */
  }
</style>

Conclusion

Always ensure to provide proper units when specifying dimensions in CSS. Common units are:

• px (pixels)
• em (relative to the font size of the element)
• % (percentage of the parent element’s width)

The value specified for a width attribute in CSS is not valid.

The width CSS property sets an element’s width. There are many allowed values for this attribute, for example:

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/* Global values */
width: inherit;
width: initial;
width: revert;
width: unset;

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

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

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

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

<td style="vertical-align:middle;">content</td>

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>