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>
Теперь валидатор не находит ошибок:
Видим, что внешний вид таблицы никак не изменился за исключением границ центральной ячейки.
Петербург - Хельсинки | Петербург - Тампере | |
Парковка в Хельсинки | Петербург - Лаппеенранта | |
Финский праздники | Велосипеды из Финляндии | |
Финский язык | Финские песни с переводом |
Рекомендую наш хостинг beget.ru |
Пишите на info@eth1.ru если Вы: |
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык. |
2. Хотите разместить на сайте рекламу, подходящуюю по тематике. |
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте |
4. Нашли на сайте ошибку, неточности, баг и т.д. ... ....... |
5. Статьи можно расшарить в соцсетях, нажав на иконку сети:
|