html - How to format jinja tables

Question

I have a table that I am trying to display a table properly on a flask HTML site.

my python file is

@app.route('/test', methods=['GET'])
def LoadTest():
    global USERS,STARTTIME,ENDTIME,SUBTYPE,SUBSTATUS,USAGE
    CollectValues()
    titles = ['USERS','STARTTIME','ENDTIME','SUBTYPE','SUBSTATUS','USAGE']
    return render_template('Test.html', data1 = USERS , data2 = STARTTIME ,titles = titles)

My current html code is

  <table>
{% for item in titles %}
   <th class="c1">{{item}}</th>
{% endfor %}
{% for dater in data1 %}
  <tr><td class="c2">{{dater}}</td></tr>
{% endfor %}

{% for dater2 in data2 %}
<tr><td>{{dater2}}</td></tr>
{% endfor %}

However, this outputs the table as

USERS   STARTTIME   ENDTIME     SUBTYPE     SUBSTATUS   USAGE
cody
mimic
james
7/10/2020
7/11/2020
7/12/2020

I am trying to format the table like this

USERS   STARTTIME   ENDTIME     SUBTYPE     SUBSTATUS   USAGE
cody    7/10/2020   8/10/2020   Premium     Active       15GB
mimic   7/11/2020   8/11/2020   Premium     Active       15GB
James   7/12/2020   8/12/2020   Premium+    Active       25GB

All of the Table content meant to go below the Table headers are in lists. I have a list for Users, Starttime, Endtime, Subtype, Substatus, And Usage. I am having difficulty getting this properly formatted. I keep coming back to the issue of them stacking.

Answer 1

I think the following should solve your problem.

@app.route('/test', methods=['GET'])
def load_test():
  global USERS,STARTTIME,ENDTIME,SUBTYPE,SUBSTATUS,USAGE
  CollectValues()
  titles = ['USERS','STARTTIME','ENDTIME','SUBTYPE','SUBSTATUS','USAGE']
  dataset = zip(USERS, STARTTIME, ENDTIME, SUBTYPE, SUBSTATUS, USAGE)
  return render_template('test.html', titles=titles, data=dataset)

<table>
  <thead>
    <tr>
    {% for item in titles %}
      <th class="c1">{{item}}</th>
    {% endfor %}
    </tr>
  </thead>
  <tbody>
  {% for user, starttime, endtime, subtype, subsstatus, usage in data %}
    <tr>
      <td class="c2">{{user}}</td>
      <td class="c2">{{starttime}}</td>
      <td class="c2">{{endtime}}</td>
      <td class="c2">{{subtype}}</td>
      <td class="c2">{{substatus}}</td>
      <td class="c2">{{usage}}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>