簡體   English   中英

如何使用 rowspan 和 colspan 在 html 中設計這種類型的表結構

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

這是我的 html 表的代碼,我希望使用 rowspan 和 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>

我希望使用rowspan和colspan在下面的鏈接中提到表格。 謝謝

這是圖片鏈接

<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>

你可以試試這個

    <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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM