Как создать дочерний заголовок под родительским заголовком в HTML-таблице? - PullRequest
Новая
       6

Как создать дочерний заголовок под родительским заголовком в HTML-таблице?

0 голосов
/ 01 ноября 2019

Я хочу сделать этот шаблон с таблицами HTML,

Table

Это мой 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>

Но это не дает мне праваотформатируйте как изображение выше. Как я могу сделать это со столом?

Ответы [ 4 ]

1 голос
/ 01 ноября 2019

Несколько способов сделать это. Вы можете использовать таблицу в 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>
1 голос
/ 01 ноября 2019

Он называется таблицей с нерегулярными заголовками

Вы должны использовать 

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

для основного заголовка и 

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

для подзаголовков

Эта справка будет полезна для дальнейших разъяснений https://www.w3.org/WAI/tutorials/tables/irregular/

0 голосов
/ 01 ноября 2019

Вы можете сделать это, используя 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>
0 голосов
/ 01 ноября 2019

Для шаблона по ссылке необходимо использовать этот код 

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