Table cell overlaps an earlier table cell

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

Причина этой ошибки - использование тегов colspan и rowspan таким образом, что ячейки накладываются друг на друга.

Объясню это на примере меню для сайта HeiHei.ru

Посмотрите на меню ниже, я решил добавить в обычную таблицу из двух столбцов подобие финского флага посередине.

Петербург - Хельсинки		Петербург - Тампере
Парковка в Хельсинки		Петербург - Лаппеенранта
Финский праздники	Велосипеды из Финляндии
Финский язык	Финские песни с переводом

Код этой таблицы ниже. Обратите внимание на строки, выделенные красным.

<table class="tabmenu">
<!-- Line 1 -->
<tr>
<td class="w35">
<a href="http://www.heihei.ru/Finland/SPb-Helsinki.php">Петербург - Хельсинки</a>
</td>
<td class="finblue" rowspan="5"> </td>
<td><a href="http://www.heihei.ru/Finland/SPb-Tampere.php">Петербург - Тампере</a></td>
</tr>
<!-- Line 2 -->
<tr>
<td><a href="http://www.heihei.ru/Finland/fin_park.php">Парковка в Хельсинки</a></td>
<td><a href="http://www.heihei.ru/Finland/SPb-Lappeenranta.php">Петербург - Лаппеенранта</a></td>
</tr>
<!-- Line 3 -->
<tr><td class="finblue" colspan="3"> </td></tr>
<!-- Line 4 -->
<tr>
<td><a href="http://www.heihei.ru/Finland/finnish_holidays.php">Финский праздники</a></td>
<td><a href="http://www.topbicycle.ru/delivery/">Велосипеды из Финляндии</a></td>
</tr>
<!-- Line 5 -->
<tr>
<td><a href="http://www.heihei.ru/suomen/">Финский язык</a></td>
<td><a href="http://www.heihei.ru/Finland/finnish_music.php">Финские песни с переводом</a></td>
</tr>
</table>

Валидатор не понимает что делать с пересечением двух «мнимых» ячеек и выдаёт две ошибки.

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

Валидатор не понимает что делать с пересечением двух «мнимых» ячеек и выдаёт две ошибки.

Table cell overlaps an earlier table cell

Решение

Достаточно изменить строку с colspan - заменим его на реальное объявление обоих ячеек строки.

<table class="tabmenu">
<!-- Line 1 -->
<tr>
<td class="w35">
<a href="http://www.heihei.ru/Finland/SPb-Helsinki.php">Петербург - Хельсинки</a>
</td>
<td class="finblue" rowspan="5"> </td>
<td><a href="http://www.heihei.ru/Finland/SPb-Tampere.php">Петербург - Тампере</a></td>
</tr>
<!-- Line 2 -->
<tr>
<td><a href="http://www.heihei.ru/Finland/fin_park.php">Парковка в Хельсинки</a></td>
<td><a href="http://www.heihei.ru/Finland/SPb-Lappeenranta.php">Петербург - Лаппеенранта</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/finnish_holidays.php">Финский праздники</a></td>
<td><a href="http://www.topbicycle.ru/delivery/">Велосипеды из Финляндии</a></td>
</tr>
<!-- Line 5 -->
<tr>
<td><a href="http://www.heihei.ru/suomen/">Финский язык</a></td>
<td><a href="http://www.heihei.ru/Finland/finnish_music.php">Финские песни с переводом</a></td>
</tr>
</table>

Теперь валидатор не находит ошибок:

Видим, что внешний вид таблицы никак не изменился за исключением границ центральной ячейки.

Петербург - Хельсинки		Петербург - Тампере
Парковка в Хельсинки		Петербург - Лаппеенранта
Финский праздники		Велосипеды из Финляндии
Финский язык		Финские песни с переводом

↓ Статьи о HTML ↓

	Все символы HTML
	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
	HTML picture srcset sizes