Table layout query-CodePudding

I have a card where I've presenting recipe info

In this card I have a table with html below. The table has 2 columns, a section name and the amount of ingredients. There's a 1 section to many amount of ingredients

<table class='table table-hover text-sm'>
  <thead>
    <tr>
      <th>Section</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tr>
    <td>Section name 1</td>
    <td>Amount Pretty 1</td>
  </tr>
  <tr>
    <td>Section name 1</td>
    <td>Amount Pretty 2</td>
  </tr>
  <tr>
    <td>Section name 2</td>
    <td>Amount Pretty 3</td>
  </tr>
</table>

The server code is

{% for res in results2 %}
  <tr>
    <td>{{res["SectionName"]}}</td> 
    <td>{{res["AmountPretty"]}}</td>
  </tr>
{% endfor %}

What I'm looking to do is not repeat the section name ie. group the AmountPretty by section like in the style below.

Section 1
    ...amount pretty
    ...amount pretty
Section 2
    ...amount pretty
    ...

Is it possible to use tables to do this? Or is there a better html construct to get this layout?

In the snippet I need to remove the second Section Name 1

CodePudding user response：

It seems to me that what you may actually prefer to use is a nested list, as in the example below:

<ul>
  <li>Section 1</li>
  <ul>
    <li>...amount pretty</li>
    <li>...amount pretty</li>
  </ul>
  <li>Section 2</li>
  <ul>
    <li>...amount pretty</li>
    <li>...amount pretty</li>
  </ul>
</ul>

Resulting in: