CODEWITHSUNDEEP
htmlcss
ALAN
ALAN

Reputation: 495

line separator with table td and tr in HTML

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

enter image description here

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>

Upvotes: 1

Views: 10867

Answers (2)

user642922
user642922

Reputation:

You need to collapse the table to remove the default spacing of tds, e.g., table-collapse: collapse;. Then simply add a border-right: solid 1px; on every first td on the left side of the table.

<html>
    <head></head>
    <body>
        <table style="width: 100%; border-collapse: collapse;">
            <tbody>
                <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 style="border-right: solid 1px;">
                        <table>
                            <tbody>
                                <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>
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <td style="border-right: solid 1px;">
                        <input type="text" />
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <td style="border-right: solid 1px;">
                        <input type="text" />
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <td style="border-bottom: 1px solid black;border-right: solid 1px;">
                        <input type="text" />
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Upvotes: 0

Sirko
Sirko

Reputation: 74076

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>

Upvotes: 1

Related Questions