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>
Теперь валидатор не находит ошибок:
Видим, что внешний вид таблицы никак не изменился за исключением границ центральной ячейки.
| Петербург - Хельсинки | Петербург - Тампере | |
| Парковка в Хельсинки | Петербург - Лаппеенранта | |
| Финский праздники | Велосипеды из Финляндии | |
| Финский язык | Финские песни с переводом |