Question

i want to put line separator in html table like this : a Black line Z shape “mirror image” as you see below , i tried to set last left side td and first right side td border but i am not able think that how could i dram vertical line

i tried this:-

<table style="width: 100%">
            <tr>
                <td colspan="2" style="text-align: right">
                    <!--<img src=""/>-->
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    <label style="font-size: 26px; color: #1513CB">Register To Brand</label>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <div style="font-size: 20px; color: #1513CB">Welcome!</div>
                        <div style="font-size: 18px; color: black">Dr John.G.Doe Phd</div>
                    </div>
                </td>
                <td style="border-bottom: 1px solid black"></td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td>
                                <img src="Images/TabScore1.png" width="25" height="25" /></td>
                            <td>
                                <img src="Images/TabScore1.png" width="25" height="25" /></td>
                            <td></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <input type="text" /></td>
            </tr>
            <tr>
                <td >
                    <input type="text" /></td>
                <td>
                    <input type="text" /></td>
            </tr>
            <tr>
                <td >
                    <input type="text" /></td>
                <td>
                    <input type="text" /></td>
            </tr>
            <tr>
                <td style="border-bottom: 1px solid black";">
                    <input type="text" /></td>
                <td>
                    <input type="text" /></td>
            </tr>
        </table>

Answer 1

You are on the right track. You just have to add some more border-X styles andset border-collapse: collapse for the table element.

Also note, that in general the border of the right cells will overwrite the border of their left siblings. Same goes for bottom cells overwriting the border of top “siblings” (not really siblings here, I know, but you get the picture …).

<table style="width: 100%; border-collapse: collapse;">
        <tr>
            <td colspan="2" style="text-align: right">
                <!--<img src=""/>-->
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center">
                <label style="font-size: 26px; color: #1513CB">Register To Brand</label>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <div style="font-size: 20px; color: #1513CB">Welcome!</div>
                    <div style="font-size: 18px; color: black">Dr John.G.Doe Phd</div>
                </div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr>
                        <td>
                            <img src="Images/TabScore1.png" width="25" height="25" /></td>
                        <td>
                            <img src="Images/TabScore1.png" width="25" height="25" /></td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td  style="border-top: 1px solid black; border-left: 1px solid black;">
                <input type="text" /></td>
        </tr>
        <tr>
            <td >
                <input type="text" /></td>
            <td style="border-left: 1px solid black;">
                <input type="text" /></td>
        </tr>
        <tr>
            <td >
                <input type="text" /></td>
            <td style="border-left: 1px solid black;">
                <input type="text" /></td>
        </tr>
        <tr>
            <td style="border-bottom: 1px solid black";">
                <input type="text" /></td>
            <td style="border-left: 1px solid black;">
                <input type="text" /></td>
        </tr>
    </table>