如何在 html 表的父標題下創建子標題？

Question

我想用 html 表制作這個模板，

這是我的 html 代碼

<table>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>
            <table>
                <tr>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </table>
        </td>
        <td>data</td>
    </tr>
</table>

但它並沒有像上圖那樣給我正確的格式。 我怎么能用桌子做呢？

Answer 1

它被稱為帶有不規則標題的表

你必須使用

<th colspan="2" scope="colgroup">MainHeadername</th>

用於主 Header 和

 <th scope="col">SubHeaderName</th>

對於子標題

本參考資料將有助於進一步澄清https://www.w3.org/WAI/tutorials/tables/irregular/

Answer 2

有幾種方法可以做到這一點。 您可以在 td 中使用表格，也可以像我的示例中那樣使用 colspan 和 rowspan。

祝你好運。

 table { border-collapse: collapse; height: 100px; font-size: 10px; text-align: center; } td { padding: 5px; border: solid 1px black; }

 <table> <tr> <td rowspan=2>Sr.No</td> <td rowspan=2>Description of Goods</td> <td rowspan=2>HSN</td> <td rowspan=2>Qty.</td> <td rowspan=2>Unit</td> <td rowspan=2>Rate(per item)</td> <td rowspan=2>Total</td> <td rowspan=2>Discount</td> <td rowspan=2>Taxable value</td> <td colspan=2>CGST</td> <td colspan=2>SGST</td> <td colspan=2>IGST</td> </tr> <tr> <td>Rate</td> <td>Amt.</td> <td>Rate</td> <td>Amt.</td> <td>Rate</td> <td>Amt.</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>

Answer 3

對於參考中的模板，您需要使用此代碼

 table { border: 1px solid #000; border-collapse: collapse; } table th { padding: 5px 10px; border: 1px solid #000; } table td { padding: 5px 10px; border-left: 1px solid #000; border-right: 1px solid #000; }

 <table cellspacing="0" cellpadding="0" border="0"> <tr> <th rowspan="2">Sr. No.</th> <th rowspan="2">Description of Goods</th> <th rowspan="2">HSN</th> <th rowspan="2">Qty.</th> <th rowspan="2">Unit</th> <th rowspan="2">Rate (per item)</th> <th rowspan="2">Total</th> <th rowspan="2">Discount</th> <th rowspan="2">Taxable Value</th> <th colspan="2" align="center">CGST</th> <th colspan="2" align="center">SGST</th> <th colspan="2" align="center">IGST</th> </tr> <tr> <th>Rate</th> <th>Amt.</th> <th>Rate</th> <th>Amt.</th> <th>Rate</th> <th>Amt.</th> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>

Answer 4

您可以使用 colspan 執行此操作：

table, th, td {
  border: 1px solid black;
}



<table>
  <tr>
    <th>65</th> 
    <th>80</th>
    <th colspan="2">40</th> 
    <th colspan="2">20</th> 
  </tr>
  <tr> 
    <th>Men</th> 
    <th>Women</th>
    <th>Men</th>
    <th>Women</th>
    <th>Men</th>
    <th>Women</th>
  </tr>
  <tr> 
    <td>82</td> 
    <td>85</td>
    <td>78</td>
    <td>82</td>
    <td>77</td>
    <td>81</td> 
  </tr> 
</table>