如何在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>

用于主标题和

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

用于子标题

此参考资料将有助于进一步的说明 https://www.w3.org/WAI/tutorials/tables/irregular/

Answer 2

几种方法可以做到这一点。您可以在td中使用表格，也可以像我的示例一样使用colspan和rowpan。

祝你好运。

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>