🏠 | 💻 IT | HTML |

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 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>


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

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

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

Петербург - Хельсинки   Петербург - Тампере
Парковка в Хельсинки Петербург - Лаппеенранта
  
Финский праздники Велосипеды из Финляндии
Финский язык Финские песни с переводом
Статьи о HTML
Все символы HTML
A numeric character reference expanded to the C1 controls range
Element tbody not allowed as child of element table in this context
Цвета HTML
HTML picture srcset sizes
Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@eth1.ru если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети: