Table cell overlaps an earlier table cell

Contents
Problem
Solution
Related Articles

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.

St. Petersburg → Helsinki   St. Petersburg → Tampere
Parking in Helsinki St. Petersburg → Lappeenranta
 
Finnish Holidays Finnish Bicycles
Finnish Language Finnish Music

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

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:

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

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

St. Petersburg - Helsinki   St. Petersburg - Tampere
Parking in Helsinki St. Petersburg - Lappeenranta
  
Finnish Holidays Finnish Bicycles
Finnish Language Finnish Music
Related Articles
HTML
All HTML Symbols
A numeric character reference expanded to the C1 controls range
Element tbody not allowed as child of element table in this context
Table cell overlaps an earlier table cell
HTML Colors
HTML picture srcset sizes