'separate big table in html into small tables

I am creating a table but I have to separate it into separate tables. They must be separated by "table_title" and the content of the tables is "table_line" I would greatly appreciate your support

<thead>  
    <tr>
      <th>Product</th>
      <th></th>
    </tr>
  </thead>
 <tbody>
      <tr>
         <td colspan="2" class="titulo_tabla">Title 1</td>
      </tr>
      <tr>
         <td class="linea_tabla">Resolución de la pantalla</td>
         <td class="linea_tabla">1366 x 768 Pixeles</td>
      </tr>
      <tr>
         <td class="linea_tabla">Pantalla táctil</td>
         <td class="linea_tabla">No</td>
      </tr>
      <tr>
         <td class="linea_tabla">Tipo HD</td>
         <td class="linea_tabla">HD</td>
      </tr>
      <tr>
         <td class="linea_tabla">Retroiluminación LED</td>
         <td class="linea_tabla">Si</td>
      </tr>
      <tr>
         <td class="linea_tabla">Relación de aspecto nativa</td>
         <td class="linea_tabla">16:9</td>
      </tr>
      <tr>
         <td class="linea_tabla">Pantalla antirreflejante</td>
         <td class="linea_tabla">Si</td>
      </tr>
      <tr>
         <td class="linea_tabla">Brillo de pantalla</td>
         <td class="linea_tabla">220 cd / m²</td>
      </tr>
      <tr>
         <td class="linea_tabla">Densidad del pixel</td>
         <td class="linea_tabla">112 ppi</td>
      </tr>
      <tr>
         <td class="linea_tabla">Espacio de color RGB</td>
         <td class="linea_tabla">NTSC</td>
      </tr>
      <tr>
         <td class="linea_tabla">Gama de colores</td>
         <td class="linea_tabla">45%</td>
      </tr>
      <tr>
         <td class="linea_tabla">Máxima velocidad de actualización</td>
         <td class="linea_tabla">60 Hz</td>
      </tr>
      <tr>
         <td class="linea_tabla">Razón de contraste (típica)</td>
         <td class="linea_tabla">400:1</td>
      </tr>
      <tr>
         <td colspan="2" class="titulo_tabla">TItle 2</td>
      </tr>
      <tr>
         <td class="linea_tabla">Modelo del procesador</td>
         <td class="linea_tabla">i5-1135G7</td>
      </tr>
      <tr>
         <td class="linea_tabla">Frecuencia del procesador turbo</td>
         <td class="linea_tabla">4.2 GHz</td>
      </tr>
      <tr>
         <td class="linea_tabla">Familia de procesador</td>
         <td class="linea_tabla">Intel® Core™ i5 de 11ma Generación</td>
      </tr>
      <tr>
         <td class="linea_tabla">Núcleos del procesador</td>
         <td class="linea_tabla">4</td>
      </tr>
      <tr>
         <td class="linea_tabla">Caché del procesador</td>
         <td class="linea_tabla">8 MB</td>
      </tr>
      <tr>
         <td class="linea_tabla">Tipo de cache en procesador</td>
         <td class="linea_tabla">Smart Cache</td>
      </tr>
      <tr>
         <td class="linea_tabla">Frecuencia configurable TDP-up</td>
         <td class="linea_tabla">2.4 GHz</td>
      </tr>
      <tr>
         <td class="linea_tabla">TDP-up configurable</td>
         <td class="linea_tabla">28 W</td>
      </tr>
      <tr>
         <td class="linea_tabla">TDP-down configurable</td>
         <td class="linea_tabla">12 W</td>
      </tr>
      <tr>
         <td class="linea_tabla">Frecuencia configurable TDP-down</td>
         <td class="linea_tabla">0.9 GHz</td>
      </tr>
      <tr>
         <td colspan="2" class="titulo_tabla">Title 3</td>
      </tr>
      <tr>
         <td class="linea_tabla">Cantidad de puertos tipo A USB 3.2 Gen 1 (3.1 Gen 1)</td>
         <td class="linea_tabla">2</td>
      </tr>
      <tr>
         <td class="linea_tabla">Puertos Ethernet LAN (RJ-45)</td>
         <td class="linea_tabla">1</td>
      </tr>
      <tr>
         <td class="linea_tabla">Número de puertos HDMI</td>
         <td class="linea_tabla">1</td>
      </tr>
      <tr>
         <td class="linea_tabla">Versión HDMI</td>
         <td class="linea_tabla">1.4</td>
      </tr>
      <tr>
         <td class="linea_tabla">Combo de salida de auriculares / micrófono del puerto</td>
         <td class="linea_tabla">Si</td>
      </tr>
      <tr>
         <td class="linea_tabla">Tipo de puerto de carga</td>
         <td class="linea_tabla">Toma de entrada de CC</td>
      </tr>
   </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
let types = [... new Set($('table.original tr .titulo_tabla').get().map(type => type.textContent))];

//create a container for the cloned tables
$('table.original').after(`<h4>After:</h4><div class="cloned-tables"></div>`)

//loop over types, clone tables, modify accordingly
$.each(types, function(index, type) {
  $(`<p class="type">${type}</p>${$('table.original')[0].outerHTML}`)
    .appendTo('.cloned-tables')
    .find('.titulo_tabla').each(function() {
      //if (this.textContent !== type) { this.parentElement.remove();  }        
      //this.remove();
  });
});
</script>

I would like to separate by table title, any help is welcome. I would like to separate by table title, any help is welcome. I would like to separate by table title, any help is welcome. I would like to separate by table title, any help is welcome. I would like to separate by table title, any help is welcome. I would like to separate by table title, any help is welcome. I would like to separate by table title, any help is welcome. I would like to separate by table title, any help is welcome. I would like to separate by table title, any help is welcome. I would like to separate by table title, any help is welcome.

descripcion de código

Solution 1:^[1]

Can you just make two separate tables similar to this:

<tbody>
      <tr>
         <td colspan="2" class="titulo_tabla">Title 1</td>
      </tr>
...
<tbody>
      <tr>
         <td colspan="2" class="titulo_tabla">Title 2</td>
      </tr>

Solution 2:^[2]

eg:

Assume have a Utility class which will read from file and return as String

class Utils{

public static String readFromFile(String filePath){
  InputStream inputStream=Utils.class.getResourceAsStream(filePath); //eg:- configs/temp_file.txt
/* Now once you get the InputStream there 
are lot of utility library to return as string */

String newLine = System.getProperty("line.separator");
 BufferedReader reader = new BufferedReader(
         new InputStreamReader(inputStream));
 StringBuilder result = new StringBuilder();
 for (String line; (line = reader.readLine()) != null; ) {
     if (result.length() > 0) {
         result.append(newLine);
     }
     result.append(line);
 }
 return result.toString();
}
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Slava
Solution 2	S Manikandan

'separate big table in html into small tables

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]