Search code examples
htmlbordercell

Creating a Border for Only 2 Rows HTML

I'm trying to multiplication table in html, but it requires only a border below the top row and to the right of the left row. Everything within the table will not be separated by borders. However, I feel stumped because I think you cannot do this, is it even possible to only add a border to one cell?

edit: dear freinds i have discovered an image from the internet that demonstrates what I am trying to achieve. https://i.sstatic.net/y364h.jpg For my table, is it possible to only have borders corresponding to the bold border from the image within my html table?

Solution

  • You need to work with CSS. Here is a sample I am providing 

    <html>
    <head>
        <title>Border-Test</title>

        <style>
            .border-side {
                border-right: 1px solid black;
            }

            .border-bottom td { 
                border-bottom: 1px solid black;
            }
        </style>
    </head>

    <body>
        <table cellpadding="2" cellspacing="0">
            <thead>
                <tr><td colspan="5">Addition</td></tr>
            </thead>
            <tbody>
                <tr class="border-bottom">
                    <td class="border-side"> </td><td>0</td><td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td class="border-side">0</td><td>0</td><td>1</td><td>2</td><td>3</td>
                </tr>

                <tr>
                    <td class="border-side">1</td><td>0</td><td>1</td><td>2</td><td>3</td>
                </tr>

                <tr>
                    <td class="border-side">2</td><td>0</td><td>1</td><td>2</td><td>3</td>
                </tr>

                <tr>
                    <td class="border-side">3</td><td>0</td><td>1</td><td>2</td><td>3</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

    Here is the output of above

    enter image description here

    NOTE : You need to change the table cell data which I haven't changed.
    NOTE : You also must need to specify the cellspacing="0".