Browse Array and view in table

Question

I need to add the data from array in a table HTML, remembering that it should be 3 arrays and only HTML and PHP for requirements of the teacher. is attached an assembly of how it should be. follows my code:

<?php
   $vetor1 = array("GT 1030 DDR4", "GT 1030 GDDR5", "GTX 750", "GTX 750 TI", "GTX 1050 TI", "GTX 1050"); 
   $vetor2 = array(400, 350, 600, 500, 1000, 800); 
   $vetor2 = array("péssima", "regular", "boa", "muito boa", "ótima", "aceitável"); 
   echo "<table>";
?>

<table>
   <tr>
      <th>GPU</th>
      <th>preço</th>
      <th>qualidade</th>
   </tr>

Answer 1

I understand that you want the 3 vectors to be shown as 3 lines below the HTML code you passed, this should serve:

<?php
  $vetor1 = array("GT 1030 GDDR5", "GT 1030 DDR4", "GTX 750 TI", "GTX 750", "GTX 1050 TI", "GTX 1050"); 
  $vetor2 = array(400, 350, 600, 500, 1000, 800); 
  $vetor2 = array("péssima", "regular", "boa", "muito boa", "ótima", "aceitável");

  $rows = {$vetor1, $vetor2, $vetor3};
?>

<table>
  <tr>
     <th>GPU</th>
     <th>preço</th>
     <th>qualidade</th>
  </tr>
  <?php
     for($i = 0; $i < count($rows); $i++){
         echo "<tr>";
         for($j = 0; $j < count($rows[i]); $j++){
             echo "<th>".$rows[i][j]."</th>"
         }
         echo "</tr>";
     }
  ?>

Answer 2

Instead of writing three arrays, I would recommend that you represent this content in an object structure for javascript itself... so you could later change your script to deliver this content asynchronously or even add other features like filters and ordering. This way the manipulation of content in the browser will become much more practical.

See the example below:

let conteudo = [
{ "gpu" : "GT 1030 GDDR5", "preco": 400, qualidade: "péssima" },
{ "gpu" : "GT 1030 DDR4", "preco": 350, qualidade: "regular" },
{ "gpu" : "GTX 750 TI", "preco": 600, qualidade: "boa" },
{ "gpu" : "GTX 750", "preco": 500, qualidade: "muito boa" },
{ "gpu" : "GTX 1050 TI", "preco": 1000, qualidade: "ótima" },
{ "gpu" : "GTX 1050", "preco": 800, qualidade: "aceitavel" }
];

$(document).ready(()=>{
  
  $.each(conteudo, function( index, value ) {
    let linha = 
      `<tr>
        <td>${value.gpu}</td>
        <td>${value.preco}</td>
        <td>${value.qualidade}</td>
       </tr>`
    $('#tbConteudo tbody').append(linha);
  });
  
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbConteudo" width="100%">
 <thead align="left"> 
    <tr>
      <th>GPU</th>
      <th>preço</th>
      <th>qualidade</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>