How to split table in CSS?

#html #css #tutorial

Hello, guys in this tutorial we will learn how to split tables using HTML & CSS.

HTML Tables

HTML tables allow web developers to arrange data in rows and columns.

The <table> the tag defines an HTML table Code.
Each <tr> tag use for table row.
Each <th> tag use for table header.
Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.

How to split table

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Table </title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   </head>
   <body>
      <table class="table-bordered">
         <col>
         <col>
         <col>
         <colgroup span="4"></colgroup>
         <col>
         <tr>
            <th rowspan="2" style="vertical-align : middle;text-align:center;">S.No.</th>
            <th rowspan="2" style="vertical-align : middle;text-align:center;">Item</th>
            <th rowspan="2" style="vertical-align : middle;text-align:center;">Description</th>
            <th colspan="3" style="vertical-align : middle;text-align:center; width: 50%;">Items</th>
            <th rowspan="2" style="vertical-align : middle;text-align:center;">Rejected Reason</th>
         </tr>
         <tr>
            <th scope="col">Order</th>
            <th scope="col">Received</th>
            <th scope="col">Accepted</th>
         </tr>
         <tr>
            <th>1</th>
            <td>Watch</td>
            <td>Analog</td>
            <td>100</td>
            <td>15</td>
            <td>25</td>
            <td>Not Functioning</td>
         </tr>
         <tr>
            <th>2</th>
            <td>Pendrive</td>
            <td>16GB</td>
            <td>25</td>
            <td>16</td>
            <td>85</td>
            <td>Not Working</td>
         </tr>
      </table>
   </body>
</html>