Browser adds a mysterious <td></td> at the end of one table row

December 9, 2022

This is my simplified code:

<head>
<style>
table { border-collapse: collapse; width: 100%;}
table td { padding-right: 15px; padding-left: 15 px; background-color: beige; border: none; }
table td:first-child { text-align: left; }
table tr td { vertical-align: middle; }
table#legendtable td { font-size: x-small; padding: none; text-align: center; width: 5%; border: 1px solid black; }
table#legendtable { table-layout: fixed;  border-collapse: none; }
</style>
</head>
<body>
<table id="legendtable">
<tr>
<td><img src="pics/logos/desktop_windows.svg" class="icon" alt="Windows" /></td>
<td><img src="pics/logos/desktop_macos.svg" class="icon" alt="macOS" /></td>
<td><img src="pics/logos/desktop_linux.svg" class="icon" alt="Linux" /></td>
<td><img src="pics/logos/desktop_unix_freebsd.svg" class="icon" alt="FreeBSD" /></td>
<td><img src="pics/logos/desktop_unix_openbsd.svg" class="icon" alt="OpenBSD" /></td>
<td><img src="pics/logos/desktop_unix_netbsd.svg" class="icon" alt="NetBSD" /></td>
<td><img src="pics/logos/desktop_unix_dragonflybsd.svg" class="icon" alt="DragonFlyBSD" /></td>
<td><img src="pics/logos/desktop_unix_illumos.svg" class="icon" alt="Illumos" /></td>
<td><img src="pics/logos/desktop_haiku.png" class="icon" style="max-height: 24px;" alt="Haiku" /></td>
<td><img src="pics/logos/desktop_arcaos.png" style="max-height: 24px;" class="icon" alt="ArcaOS" /></td>
<td><img src="pics/logos/desktop_amigaos.jpg" class="icon" style="max-height: 24px;" alt="AmigaOS" /></td>
<td><img src="pics/logos/desktop_riscos.svg" class="icon" alt="RISC OS" /></td>
<td><img src="pics/logos/mobile_android.svg" class="icon" alt="Android" /></td>
<td><img src="pics/logos/mobile_ios.svg" class="icon" alt="iOS" /></td>
<td><img src="pics/logos/browser_firefox.svg" class="icon" alt="Firefox" /></td>
<td><img src="pics/logos/browser_safari.svg" class="icon" alt="Safari" /></td>
<td><img src="pics/logos/browser_chrome.svg" class="icon" alt="Chrome" /></td>
<td><img src="pics/logos/browser_edge.svg" class="icon" alt="Edge" /></td>
<td><img src="pics/logos/browser_opera.svg" class="icon" alt="Opera" /></td>
<td><img src="pics/logos/browser_brave.svg" class="icon" alt="Brave" /><td>
</tr>
<tr>
<td>Windows</td>
<td>macOS</td>
<td>Linux</td>
<td>Free<wbr>BSD</td>
<td>Open<wbr>BSD</td>
<td>Net<wbr>BSD</td>
<td>Dragon&shy;Fly<wbr>BSD</td>
<td>Illumos</td>
<td>Haiku</td>
<td>ArcaOS</td>
<td>AmigaOS</td>
<td>RISC OS</td>
<td>Android</td>
<td>iOS</td>
<td>Firefox</td>
<td>Safari</td>
<td>Chrome</td>
<td>Edge</td>
<td>Opera</td>
<td>Brave</td>
</tr>
</table>
</body>

When you open in a browser, whether it’s Chromium or Firefox, the first row gets an extra added after the cell containing the image for "Brave". This extra cell can be seen in the developer tools/inspect element, but it obviously doesn’t exist in the source code.

Where does this extra cell at the end in only the first row come from? I feel like it’s something really silly I did wrong but I can’t spot the error.

>Solution :

<td><img src="pics/logos/browser_brave.svg" class="icon" alt="Brave" /><td>

You have made an error, didn’t close the td tag properly. Below is the corrected code.

<head>
<style>
table { border-collapse: collapse; width: 100%;}
table td { padding-right: 15px; padding-left: 15 px; background-color: beige; border: none; }
table td:first-child { text-align: left; }
table tr td { vertical-align: middle; }
table#legendtable td { font-size: x-small; padding: none; text-align: center; width: 5%; border: 1px solid black; }
table#legendtable { table-layout: fixed;  border-collapse: none; }
</style>
</head>
<body>
<table id="legendtable">
<tr>
<td><img src="pics/logos/desktop_windows.svg" class="icon" alt="Windows" /></td>
<td><img src="pics/logos/desktop_macos.svg" class="icon" alt="macOS" /></td>
<td><img src="pics/logos/desktop_linux.svg" class="icon" alt="Linux" /></td>
<td><img src="pics/logos/desktop_unix_freebsd.svg" class="icon" alt="FreeBSD" /></td>
<td><img src="pics/logos/desktop_unix_openbsd.svg" class="icon" alt="OpenBSD" /></td>
<td><img src="pics/logos/desktop_unix_netbsd.svg" class="icon" alt="NetBSD" /></td>
<td><img src="pics/logos/desktop_unix_dragonflybsd.svg" class="icon" alt="DragonFlyBSD" /></td>
<td><img src="pics/logos/desktop_unix_illumos.svg" class="icon" alt="Illumos" /></td>
<td><img src="pics/logos/desktop_haiku.png" class="icon" style="max-height: 24px;" alt="Haiku" /></td>
<td><img src="pics/logos/desktop_arcaos.png" style="max-height: 24px;" class="icon" alt="ArcaOS" /></td>
<td><img src="pics/logos/desktop_amigaos.jpg" class="icon" style="max-height: 24px;" alt="AmigaOS" /></td>
<td><img src="pics/logos/desktop_riscos.svg" class="icon" alt="RISC OS" /></td>
<td><img src="pics/logos/mobile_android.svg" class="icon" alt="Android" /></td>
<td><img src="pics/logos/mobile_ios.svg" class="icon" alt="iOS" /></td>
<td><img src="pics/logos/browser_firefox.svg" class="icon" alt="Firefox" /></td>
<td><img src="pics/logos/browser_safari.svg" class="icon" alt="Safari" /></td>
<td><img src="pics/logos/browser_chrome.svg" class="icon" alt="Chrome" /></td>
<td><img src="pics/logos/browser_edge.svg" class="icon" alt="Edge" /></td>
<td><img src="pics/logos/browser_opera.svg" class="icon" alt="Opera" /></td>
<td><img src="pics/logos/browser_brave.svg" class="icon" alt="Brave" /></td>
</tr>
<tr>
<td>Windows</td>
<td>macOS</td>
<td>Linux</td>
<td>Free<wbr>BSD</td>
<td>Open<wbr>BSD</td>
<td>Net<wbr>BSD</td>
<td>Dragon&shy;Fly<wbr>BSD</td>
<td>Illumos</td>
<td>Haiku</td>
<td>ArcaOS</td>
<td>AmigaOS</td>
<td>RISC OS</td>
<td>Android</td>
<td>iOS</td>
<td>Firefox</td>
<td>Safari</td>
<td>Chrome</td>
<td>Edge</td>
<td>Opera</td>
<td>Brave</td>
</tr>
</table>
</body>