(Python)Djangoでテンプレートのforループが入ったHTMLテーブルを思ったように表示させたい

Djangoでツイッターのタイムラインを表示させるだけのアプリを作っています。

困っていること

肝心のテンプレートで表示させるところでつまづいており、
テーブルタグで下記のように表示させたいのですが、

アイコン　ユーザー名　つぶやき　日時←　ヘッダー行

アイコン　ユーザー名　つぶやき　日時

↓ ↓ ↓

↓のようなテーブルになってしまいます。

↓ヘッダー列
アイコン　アイコン　アイコン　アイコン　→

ユーザー名　ユーザー名　ユーザー名　ユーザー名　→

つぶやき　つぶやき　つぶやき　つぶやき　→

日時　日時　日時　日時　日時　→

ソースコード

試しているソースコードは下記です↓

template/index.html

HTML
1{% extends 'base.html' %}
2
3{% block header %}
4{% endblock header %}
5
6{% block content %}
7
8<div class="alert alert-success" role="alert">
9    <h1>Twitter Timeline</h1>
10</div>
11<div class="alert alert-primary" role="alert">
12    APIリミット：残り{{ API_limit }}回
13</div>
14
15# ここからテーブル
16<table border="1" class="table table-condensed">
17    <tbody>
18        <tr>
19            <th class="table-primary">アイコン</th>
20            {% for imurl in Img %}
21            <td><img src="{{ imurl }}"></td>
22            {% endfor %}
23        </tr>  
24        <tr>
25            <th class="table-primary">ユーザー名</th>
26            {% for user in User %}
27            <td>{{ user }}</td>
28            {% endfor %}
29        </tr>    
30        <tr>
31            <th class="table-primary">つぶやき</th>
32            {% for text in Text %}
33            <td>{{ text }}</td>
34            {% endfor %}
35        </tr>
36        <tr> 
37            <th class="table-primary">日時</th>
38            {% for date in Created_at %}
39            <td>{{ date }}</td>
40            {% endfor %}
41        </tr>    
42
43    </tbody>
44</table>
45
46{% endblock content %}

view.py

python
1import time
2import calendar
3import datetime
4import json
5import sys
6import codecs
7from django.shortcuts import render
8
9# Create your views here.
10from requests_oauthlib import OAuth1Session
11
12sys.stdout = codecs.getwriter('utf-8')(sys.stdout)
13
14from django.http.response import HttpResponse
15from twitterdata.models import TwitterModel
16
17
18def index(request):
19    
20
21    C_KEY = 'A'
22    C_SECRET = 'I'
23    A_KEY = 'm'
24    A_SECRET = 'm'
25
26#    url = 'https://api.twitter.com/1.1/statuses/update.json'
27#    msg = request.GET.get('words')
28#    params = {'status': msg, 'lang': 'ja'}
29#   req = tw.post(url, params=params)
30
31    tw = OAuth1Session(C_KEY, C_SECRET, A_KEY, A_SECRET)
32
33    url = 'https://api.twitter.com/1.1/statuses/home_timeline.json'
34    params = {'count': 10}
35    req = tw.get(url, params=params)
36
37    Userlist = []
38    Namelist = []
39    Textlist = []
40    Imglist = []
41    Created_atlist = []
42
43    if req.status_code == 200:
44        timeline = json.loads(req.text)
45        limit = req.headers['x-rate-limit-remaining']
46
47        for tweet in timeline:
48            Text = tweet['text']
49            User = tweet['user']['screen_name']
50            Name = tweet['user']['name']
51            Img = tweet['user']['profile_image_url']
52            Created_at = YmdHMS(tweet['created_at'])
53
54            data = TwitterModel()
55            data.user_id = User
56            data.user_name = Name
57            data.user_img = Img
58            data.user_text = Text
59            data.user_created_at = Created_at
60            data.save()
61
62            Userlist.append(User)
63            Namelist.append(Name)
64            Textlist.append(Text)
65            Imglist.append(Img)
66            Created_atlist.append(Created_at)
67
68        Message = {
69            'timeline': timeline,
70            'API_limit': limit,
71            'Text': Textlist,
72            'User': Userlist,
73            'Name': Namelist,
74            'Img': Imglist,
75            'Created_at': Created_atlist,
76        }
77
78
79        return render(request, 'index.html', Message)
80
81    else:
82        Error = {
83            'Error_message': 'API制限中',
84        }
85        return render(request, 'index.html', Error)
86
87
88def YmdHMS(created_at):
89    time_utc = time.strptime(created_at, '%a %b %d %H:%M:%S +0000 %Y')
90    unix_time = calendar.timegm(time_utc)
91    time_local = time.localtime(unix_time)
92    return int(time.strftime('%Y%m%d%H%M%S', time_local))
93

試してみたこと

index.htmlのテーブル部分を↓のように修正したりしているのですが、上手くいきません。

python
1{% extends 'base.html' %}
2
3{% block header %}
4{% endblock header %}
5
6{% block content %}
7
8<div class="alert alert-success" role="alert">
9    <h1>Twitter Timeline</h1>
10</div>
11<div class="alert alert-primary" role="alert">
12    APIリミット：残り{{ API_limit }}回
13</div>
14
15# ここからテーブル
16<table border="1" class="table table-condensed">
17    <tbody>
18        <tr>
19            <th class="table-primary">アイコン</th>
20            <th class="table-primary">ユーザー名</th>
21            <th class="table-primary">つぶやき</th>
22            <th class="table-primary">日時</th>
23        </tr>
24        <tr>
25            {% for imurl in Img %}
26        <tr>
27            <td><img src="{{ imurl }}"></td>
28        </tr>
29        {% endfor %}
30        </tr>
31        <tr>
32            {% for user in User %}
33        <tr>
34            <td>{{ user }}</td>
35        </tr>
36        {% endfor %}
37        </tr>
38        <tr>
39            {% for text in Text %}
40        <tr>
41            <td>{{ text }}</td>
42        </tr>
43        {% endfor %}
44        </tr>
45        <tr>
46            {% for date in Created_at %}
47        <tr>
48            <td>{{ date }}</td>
49        </tr>
50        {% endfor %}
51        </tr>
52
53    </tbody>
54</table>
55
56{% endblock content %}

どうすれば

アイコン　ユーザー名　つぶやき　日時←　ヘッダー行

アイコン　ユーザー名　つぶやき　日時

↓ ↓ ↓

のように表示させることができるでしょうか？

環境
Python 3.6.7
Windows10
Django3.0

コードを下記のように書き換えました↓するとまた別の問題が起こりました

テーブルではなく、Dataframeで1行ずつテンプレートに取り出すようにしました。

すると、

・下記のようにindex.htmlで画像タグが途切れて画像が表示されない。
・つぶやきの本文が途切れる
・Name: 0, dtype: object　が末尾にまじる

user Ken_Kanata アイコン <img src="http://pbs.twimg.com/profile_images/... つぶやき @sirururun もしかしたら苦労をシェアできる人がイルカモシレナイ日時 2020/05/20 01:01 Name: 0, dtype: object

↑のようになってしまいます。

解決したいこと

・下記のようにindex.htmlで画像タグが途切れて画像が表示されない。
・つぶやきの本文が途切れる
・Name: 0, dtype: object　が末尾にまじる
の3点をなんとか改善したいです。

どうぞよろしくお願いいたします。

現在のコード↓
template/index.html

HTML
1{% extends 'base.html' %}
2
3{% block header %}
4{% endblock header %}
5
6{% block content %}
7<div class="jumbotron">
8    <h1 class="display-4">Twitter Timeline</h1>
9    <hr class="my-4">
10    <a class="btn btn-primary btn-lg" href="" role="button">リロード</a>
11</div>
12
13<div class="alert alert-primary" role="alert">
14    <span class="badge badge-danger"> APIリミット：残り{{ API_limit }}回</span>
15</div>
16
17{% for index, row in Df.iterrows %}
18<div class="card">
19    <div class="card-body">
20        {{ row }}
21    </div>
22</div>
23{% endfor %}
24
25{% endblock content %}

views.py

python
1import time
2import calendar
3import datetime
4import json
5import sys
6import codecs
7import pandas as pd
8from django.shortcuts import render
9
10# Create your views here.
11from requests_oauthlib import OAuth1Session
12
13sys.stdout = codecs.getwriter('utf-8')(sys.stdout)
14
15from django.http.response import HttpResponse
16from twitterdata.models import TwitterModel
17
18
19def index(request):
20    
21
22    C_KEY = 'smFVvK13lKUr63TaghFOhaJNA'
23    C_SECRET = '4t6WiQiHLvhd3IIQCSrzy24MTMKcyxrONf6P9QehMwneN3wI9I'
24    A_KEY = '761139811369353216-ZFDNvqRZl5L1aEFS4WQODnuZNGE76Fm'
25    A_SECRET = 'SjchPG7PRrwKCGlZZpCBVqkvAk4cnbmx8Kk13TONoQq5m'
26
27#    url = 'https://api.twitter.com/1.1/statuses/update.json'
28#    msg = request.GET.get('words')
29#    params = {'status': msg, 'lang': 'ja'}
30#   req = tw.post(url, params=params)
31
32    tw = OAuth1Session(C_KEY, C_SECRET, A_KEY, A_SECRET)
33
34    url = 'https://api.twitter.com/1.1/statuses/home_timeline.json'
35    params = {'count': 200}
36    req = tw.get(url, params=params)
37
38    Userlist = []
39    Namelist = []
40    Textlist = []
41    Imglist = []
42    Created_atlist = []
43
44    if req.status_code == 200:
45        timeline = json.loads(req.text)
46        limit = req.headers['x-rate-limit-remaining']
47
48        for tweet in timeline:
49            Text = tweet['text']
50            User = tweet['user']['screen_name']
51            Name = tweet['user']['name']
52            Img = tweet['user']['profile_image_url']
53            Created_at = YmdHMS(tweet['created_at'])
54
55            data = TwitterModel()
56            data.user_id = User
57            data.user_name = Name
58            data.user_img = Img
59            data.user_text = Text
60            data.user_created_at = Created_at
61            data.save()
62
63            Userlist.append(User)
64            Namelist.append(Name)
65            Textlist.append(Text)
66            Imglist.append(Img)
67            Created_atlist.append(Created_at)
68        
69        df_user = pd.Series(Userlist)
70        df_img = pd.Series(Imglist)
71        df_text = pd.Series(Textlist)
72        df_cdate = pd.Series(Created_atlist)
73
74        df = pd.concat([df_user,df_img,df_text,df_cdate], axis=1)
75        df.columns = ['user', 'アイコン', 'つぶやき', '日時']
76        df["アイコン"] = df["アイコン"].map(lambda s: '<img src="{}" />'.format(s))
77        
78        datas = {'img': Imglist,'user': Userlist,'text': Textlist,'created_at': Created_atlist}
79
80        Message = {
81            'timeline': timeline,
82            'API_limit': limit,
83            'Df':df,
84            'Name': Namelist,
85        }
86
87
88        return render(request, 'index.html', Message)
89
90    else:
91        Error = {
92            'Error_message': 'API制限中',
93        }
94        return render(request, 'index.html', Error)
95
96
97def YmdHMS(created_at):
98    time_utc = time.strptime(created_at, '%a %b %d %H:%M:%S +0000 %Y')
99    unix_time = calendar.timegm(time_utc)
100    time_local = time.localtime(unix_time)
101    return str(time.strftime('%Y/%m/%d %H:%M', time_local))
102

行動規範の内容に同意します

回答1件

ベストアンサー

Python
1# views.py
2datas = {"img":Imglist, "user":Userlist, "text":Textlist, "created_at":Created_atlist}
3Message = {
4    'timeline': timeline,
5    'API_limit': limit,
6    'datas':datas,
7    'Name': Namelist,
8}

HTML
1# index.html
2<table border="1" class="table table-condensed">
3  <tr>
4    <th class="table-primary">アイコン</th>
5    <th class="table-primary">ユーザー名</th>
6    <th class="table-primary">つぶやき</th>
7    <th class="table-primary">日時</th>
8  </tr>
9  {% for data in datas %}
10  <tr>
11    <td>{{ data.img }}</td>
12    <td>{{ data.user }}</td>
13    <td>{{ data.text }}</td>
14    <td>{{ data.created_at }}</td>
15  <tr>
16  {% endfor %}
17</table>
18```こんな感じでどうですか？