html - テーブルが設計どおりに整列していない

Question

テーブル、テーブルデータ、およびテーブル行を作成して、物事をうまく整列させました。asp.net のデザイン ビューでは、以下の図のように、テーブルがうまく配置されていることがわかります。

しかし、私がウェブサイトに入ると、とても歪んで見えます:

また、なぜasp.netとブラウザのデザインに大きな違いがあるのか​​ もよくわかりません。以下は、実際に問題が見られないテーブルの html コードです。

<h2 align="center">Officer&#39;s Profile</h2>
            <br />
        </td>
    </tr>

    <tr>
        <td rowspan="6" colspan="4" width="50%">
            <b>Profile Picture</b>
            <br />
            <asp:Image ID="Image2" runat="server" />
            <br />
            <br />
           <b>Rank</b>
            <br />
            <asp:Image ID="Image1" runat="server" />
            <br />

            <br />
        </td>

        <td align="left">
           <b> Police ID :</b>
            <asp:Label ID="lblPoliceID" runat="server" ></asp:Label>
            <br />

        </td>
    </tr>

    <tr>

        <td align="left">
            <b>Full Name :</b> 
            <asp:Label ID="lblFullName" runat="server" ></asp:Label>
            <br />

        </td>
    </tr>

    <tr>

        <td align="left">
           <b> Email :</b> <asp:Label ID="lblEmail" runat="server" ></asp:Label>
            <br />

        </td>
    </tr>

    <tr>

        <td align="left">
            <b>Contact :</b> <asp:Label ID="lblContact" runat="server" ></asp:Label>
            <br />

        </td>
    </tr>

                    <tr>  
        <td align="left">
            <b>Posted To :</b>
            <asp:Label ID="lblLocation" runat="server" ></asp:Label>
            <br />

        </td>
    </tr>


        <tr>
            <td align="left"><b>Address : </b>
                <asp:Label ID="lblAddress" runat="server"></asp:Label>
                <br />
            </td>
            </tr>

asp.netのデザインビューで似せようとしています