How can I merge two tables into one?

[namet]

Since I have this code below which is the information on the 2nd table is just plain text it's not information in a product information as a 1st table, So I want to make it visible on the same table.

<table align="center"><tr><td>
<table border="1">
  <tr>
    <th>No.</th>
    <th>Product SKU</th>
    <th>Product Name</th>
    <th>Price</th>
  </tr>
  {% for product in collection.products %}
  <tr>
    <td>{{ forloop.index }}</td>
    <td><a style="text-decoration: none;color: black;" href="{{ product.url }}">{{ product.sku }}{{ product.selected_or_first_available_variant.sku }}</a></td>
    <td><a style="text-decoration: none;color: black;" href="{{ product.url }}">{{ product.title }}</a></td>
    <td>{{ product.price }}</td>
  </tr>
  {% endfor %}
</table>

</td><td>
<table border="1">
  <tr>
    <th>QTY.</th>
    <th>REMARKS</th>
  </tr>
  <tr>
    <td>1</td>
    <td>OPT</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>
  <tr>
    <td>1</td>
    <td>NOT ILLUSTRATED</td>
  </tr>

</table>
</td></tr></table>

[made4Uo]

Hi @namet 

You use flex box. Please provide your website or link to where the table is, so we can provide a code appropriate for you

[namet]

Hi @made4Uo  Thanks for your reply. Here’s a link Click .