简体   繁体   中英

How to design this type table structure in html using rowspan and colspan

Here is my code for html table I want the table mention in below link using rowspan and colspan.

    <table style="width: 90%;margin-left:auto; margin-right:auto;">
        <tr style="text-align: center">
            <td rowspan="2">HSN/SAC</td>            
            <td rowspan="2">Taxable Value</td>  
            <td colspan="2">Central Tax</td>
            <td colspan="2">State Tax</td>
            <td rowspan="2">Total <br> Tax Amount</td>
            
        </tr>
        <tr style="text-align: center">
            <td>Rate</td>
            <td>Amount</td>
            <td>Rate</td>
            <td>Amount</td>
        </tr>
        <tr style="text-align: center">
            <td>123456</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align: right">Total</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>       
        </tr>
            <tr>
                <td colspan="7" style="height:100px">
                <tr>
                    <td></td>
                </tr>
                </td>
            </tr>
        </table>

I want the table mention in below link using rowspan and colspan. Thank you

This is the Image link

<table border="1px" style="width: 90margin-left:auto; margin-right:auto;">
    <tr style="text-align: center">
        <td rowspan="2">HSN/SAC</td>            
        <td rowspan="2">Taxable Value</td>  
        <td colspan="2">Central Tax</td>
        <td colspan="2">State Tax</td>
        <td rowspan="2">Total <br> Tax Amount</td>
        
    </tr>
    <tr style="text-align: center">
        <td>Rate</td>
        <td>Amount</td>
        <td>Rate</td>
        <td>Amount</td>
    </tr>
    <tr style="text-align: center">
        <td>123456</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td style="text-align: right">Total</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></>       
    </tr>
    <tr>
        <td style="height:30px;border-bottom:0px;" colspan="7"></td>
    </tr>
       <tr style="height:4px">
           <td colspan="3" style="border-top:0px; border-right:0px"></td>
           <td style="height:80px" colspan="4"></td>
       </tr>
     
    </table>

You can try this

    <tr>
        <td style="height:40px;border-bottom:0px;" colspan="7">
        </td>
    </tr>
    <tr style="height:4px">
        <td colspan="3" style="border-top:0px; border-right:0px">
            Some Text
        </td>
        <td style="height:80px; text-align: center;" colspan="4">
            signature and stamps
        </td>
    </tr>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM