html - 垂直バー用に 1 ピクセルの列を追加した後、HTML ボタンが幅広になり、右に引き伸ばされる

Question

初心者。ようこそ、会社概要、サービス、エクスペリエンス、お問い合わせの 5 つのボタンがあります。ボタンを分離する垂直の灰色のバーを追加するために、それらの間に 1 ピクセルの列を追加するまで、それらは適切なサイズと間隔で配置されます。垂直の区切り線を追加すると、画像とボタンの領域が左側から引き伸ばされ始めます。すべての線を追加すると、歪みは左から顕著になりますが、右端のボタン (お問い合わせ) はまだ問題ないように見えます。

このコードでは、縦棒の列がコメント アウトされています。

    <tbody>
        <tr>
            <td colspan="8">
                <img alt="" src="images/whitepixel.gif" height="14" width="770" border="0">
            </td>
        </tr>
        <tr>
            <td width="17">
                <img alt="" src="images/whitepixel.gif" height="65" width="17" border="0">
            </td>
            <td width="183">
                <a href="McD_index.html">
                    <img alt="" src="images/menu_logo.gif" height="65" width="183" border="0"></a>
            </td>
            <td width="17">
                <img alt="" src="images/whitepixel.gif" height="65" width="17" border="0">
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_welcome.html">
                    <img alt="" src="images/menu_WelcomeON.png" height="65" width="110" border="0"></a>
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_aboutus.html">
                    <img alt="" src="images/menu_AboutUsOFF.png" height="65" width="111" border="0"></a>
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_services.html">
                    <img alt="" src="images/menu_ServicesOFF.png" height="65" width="111" border="0"></a>
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_experience.html">
                    <img alt="" src="images/menu_ExperienceOFF.png" height="65" width="111" border="0"></a>
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_contactus.html">
                    <img alt="" src="images/menu_ContactUsOFF.png" height="65" width="110" border="0"></a>
            </td>
        </tr>
        <tr>
            <td colspan="8">
                <img alt="" src="images/whitepixel.gif" height="15" width="770" border="0">
            </td>
        </tr>
        <tr>
            <td colspan="8">
                <img alt="" src="images/greenpixel.gif" height="15" width="770" border="0">
            </td>
        </tr>

私が試したことはすべてうまくいきませんでした！

ボタンを通常の幅で表示し、垂直線の区切りで等間隔に配置したいだけです。私のvertBar.pngファイルは、1ピクセルの灰色の縦棒です

ありがとう！