DataTables-1

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"/>
 
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
  <!--<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.11.4/sorting/numString.js"></script>-->
  <script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.11.5/sorting/natural.js"></script>

  <title>
    Rockets 
  </title>
 
</head>
<body>
              <table class="display" id="winners" style="width:100%">
                <thead>
                  <tr class="text-center mb-0 text-lg font-weight-bold">
                    <th rowspan="2">School Year</th>
                    <th rowspan="2">Rocket Name</th>
                    <th rowspan="2">Rocket Type</th>
                    <th colspan="2">Altitude</th>
                    <th rowspan="2">Weight</th>
                    <th rowspan="2">Teacher</th>
                    </tr>
                    <tr class="text-center mb-0 text-lg font-weight-bold">
                      <th>meters</th>
                      <th>feet</th>
                    </tr>
                </thead>
                <tbody>
                
                  <tr>
                    <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">2002 - 2003</td>
                    <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">Speed Blaster</td>
                    <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">Flash</td>
                    <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">120.0 m</td>
                    <td class="text-center mb-0 text-lg font-weight-bold...