Table cell overlaps an earlier table cell
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
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.
St. Petersburg - Helsinki | St. Petersburg - Tampere | |
Parking in Helsinki | St. Petersburg - Lappeenranta | |
Finnish Holidays | Finnish Bicycles | |
Finnish Language | Finnish Music |