We can arrange our table with Rowspan and Colspan to design complex tables. – If you want to merge 2 or more columns into a single column, use colspan attribute . – If you want to merge 2 or more rows into a single row, use rowspan.
<table><caption>Advanced HTML tag for Table using thead,tbody and tfoot</caption><thead><tr><thcolspan="3">Purchase order:987654321</th><th>Tutorialbrain - 10th Oct 2020 </th></tr><tr><tdcolspan="2"><strong>Vendor:</strong><br>
ABC XYZ ltd. <br>
DUMMY STREET<br>
BUILDING 123<br>
HAZARIBAGH, JHARKHAND, 825301<br></td><tdcolspan="2"><strong>SHIP TO:</strong><br>
MS DHONI<br>
WILSON GARDEN<br>
SOUTHEAST BLOCK, RANCHI - 834001 <br></td></tr></thead><tbody><tr><th>Qty.</th><th>Item Code.</th><th>Description</th><th>Unit Price</th></tr><tr><td>100</td><td>IABCDE</td><td>Pencils</td><td>20.00</td></tr><tr><td>1000</td><td>IN877</td><td>Notebooks</td><td>100.00</td></tr><tr><td>500</td><td>IP8675</td><td>Pens</td><td>70.00</td></tr></tbody><tfoot><tr><thcolspan="3">Subtotal</th><td> 190.00 </td></tr><tr><thcolspan="2">GST</th><td>5%</td><td>9.50</td></tr><tr><thcolspan="3">Grand Total</th><td>$ 199.50</td></tr></tfoot></table>
The border-collapse property defines whether the table border needs to be collapsed or separate. Collapse gives a single border for the entire table and separate gives border for each cell and also gives outer border.