Table cell overlaps an earlier table cell

Table cell is overlapped by later table cell. Table cell overlaps an earlier table cell

This reason is caused by colspan and rowspan tags incorrect usage.

Error is shown when cells are overlapping.

To demonstrate this error let's take a look to a table from HeiHei.ru

Some kind of Finnish flag is added to the middle of a table.

Code of this table is below. Please notice lines highlighted in red.

<table class="tabmenu">
<!-- Line 1 -->
<tr>
<td class="w35">
<a href="http://www.heihei.ru/Finland/SPb-Helsinki.php">St. Petersburg - Helsinki</a>
</td>
<td class="finblue" rowspan="5"> </td>
<td><a href="http://www.heihei.ru/Finland/SPb-Tampere.php">St. Petersburg - Tampere</a></td>
</tr>
<!-- Line 2 -->
<tr>
<td><a href="http://www.heihei.ru/Finland/fin_park.php">Parking in Helsinki</a></td>
<td><a href="http://www.heihei.ru/Finland/SPb-Lappeenranta.php">St. Petersburg - Lappeenranta</a></td>
</tr>
<!-- Line 3 -->
<tr><td class="finblue" colspan="3"> </td></tr>
<!-- Line 4 -->
<tr>
<td><a href="http://www.heihei.ru/Finland/holidays/">Finnish Holidays</a></td>
<td><a href="http://www.topbicycle.ru/delivery/">Finnish Bicycles</a></td>
</tr>
<!-- Line 5 -->
<tr>
<td><a href="http://www.heihei.ru/suomen/">Finnish Language</a></td>
<td><a href="http://www.heihei.ru/Finland/finnish_music.php">Finnish Music</a></td>
</tr>
</table>

Validator does not understand how to process intersection of two «virtual» cells and throws two errors.

Table cell is overlapped by later table cell
Table cell overlaps an earlier table cell

Solution

Change line with colspan - need to change with real declaration of both cells in the line.

<table class="tabmenu"> <!-- Line 1 --> <tr> <td class="w35"> <a href="http://www.heihei.ru/Finland/SPb-Helsinki.php">St. Petersburg - Helsinki</a> </td> <td class="finblue" rowspan="5"> </td> <td><a href="http://www.heihei.ru/Finland/SPb-Tampere.php">St. Petersburg - Tampere</a></td> </tr> <!-- Line 2 --> <tr> <td><a href="http://www.heihei.ru/Finland/fin_park.php">Parking in Helsinki</a></td> <td><a href="http://www.heihei.ru/Finland/SPb-Lappeenranta.php">St. Petersburg - Lappeenranta</a></td> </tr> <!-- Line 3 --> <tr><td class="finblue"> </td><td class="finblue"> </td></tr> <!-- Line 4 --> <tr> <td><a href="http://www.heihei.ru/Finland/holidays/">Finnish Holidays</a></td> <td><a href="http://www.topbicycle.ru/delivery/">Finnish Bicycles</a></td> </tr> <!-- Line 5 --> <tr> <td><a href="http://www.heihei.ru/suomen/">Finnish Language</a></td> <td><a href="http://www.heihei.ru/Finland/finnish_music.php">Finnish Music</a></td> </tr> </table>

Now validator does not report an error:

As you can see table looks almost same. Only the middle cell borders are changed.

Article author: Andrei Olegovich