GeekBrains
300*600
↑↑

↓↓
Флаг России Флаг Англии
🏠 | 💻 PC | Web |

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="width35">
<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 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="width35">
<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>


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

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

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

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

Похожие статьи:

GeekBrains Javascript 🛠 Полезные советы
🖽 Html
🖌 CSS
Joomla
URLencode
Переадресация страниц сайта
Адаптивный дизайн сайтов
Настройка почтового ящика на Яндекс
Какой хостинг выбрать
Как перенести сайт
Яндекс Метрика
Разница между POST и PUT
Word Press
SEO
Тестирование сайта
A numeric character reference expanded to the C1 controls range.

Вы нашли то, что искали на сайте?

Или оцените по десятибальной шкале

Если сайт не помог, извиняемся за потраченное время - хочу заверить, что мы стараемся не попадать в нерелевантные запросы, но тем не менее не всегда успеваем обновлять ключевые слова. Ну и контролировать поисковую выдачу, конечно, невозможно.

Например: у нас есть статья про аэропорт Хельсинки и про аэропорт Риги но в выдаче по Риге всё равно статья про Хельсинки.

Если статья Вам помогла, нажимайте ДА. Так мы поймём, что переделывать её не нужно.

Занятно наблюдать в вебвизоре, как люди копируют текст, например вежливого отказа в трудоустройстве на английском но игнорируют кнопку ДА.

Сделаем поиск лучше!

Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@urn.su если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети:
Growfood
Finn Flare