create html table
Date: March 21st 2016
Last updated: March 21st 2016
The creation of an html table requires a method in views.py to provide the content for the table. These rest is done in a for loop in html.
This example follows on from filter foreign keys in views.py. The objective is to create an index showing all diary entries in table form. The example assumes that a request has been sent via urls.py and it has called the diary method in views.py.
views.py
def diary(request, surfer_id):
surfer = get_object_or_404(Surfer, pk=surfer_id)
entry_list = SurfDiary.objects.filter(surfer = surfer.id)
return render(request, 'surferprofile/diary.html',
{'surfer': surfer, 'surfdiary': entry_list})
template: diary.html
Note the inclusion of static files and a reference to style.css in the head of diary.html. I also decided to center some of the columns (refer to id='diarytableentry') and make the title row bold.
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="{% static 'surferprofile/style.css' %}" />
</head>
<body>
<div>
This is a diary entry for <strong>{{ surfer.firstname }}</strong>
</div>
{% if surfdiary %}
<table id='diarytable'>
<tr id='diarytitlerow'>
<td>Beach</td>
<td>Wave name</td>
<td id='diarytableentry'>Size</td>
<td>Wind direction</td>
<td id='diarytableentry'>Wave quality</td>
<td>Board</td>
<td id='diarytableentry'>Fins</td>
<td id='diarytableentry'>Surfing quality</td>
<td>Favourite turn</td>
<td id='diarytableentry'>Crowd factor</td>
<td>Comments</td>
</tr>
{% for entry in surfdiary %}
<tr>
<td>{{ entry.beach }}</td>
<td>{{ entry.wave }}</td>
<td id='diarytableentry'>{{ entry.wavesize }}</td>
<td>{{ entry.winddir }}</td>
<td id='diarytableentry'>{{ entry.wavescore }}</td>
<td>{{ entry.board}}</td>
<td id='diarytableentry'>{{ entry.fins }}</td>
<td id='diarytableentry'>{{ entry.wavescore }}</td>
<td>{{ entry.trick }}</td>
<td id='diarytableentry'>{{ entry.crowdscore }}</td>
<td>{{ entry.notes }}</td>
</tr>
{% endfor %}
</table>
{% else %}
<p>No diary entries.</p>
{% endif %}
</body>
</html>
style.css
#diarytable{
width: 100%;
border-style: solid;
}
#diarytitlerow{
font-weight: bold;
}
#diarytableentry{
text-align: center;
}
http://127.0.0.1:8080/1/diary/
another update to css and html
As the comments column can contain up to 200 characters I have added additional CSS. The only difference in the html is for id = 'diarytablenotes'.
Updated diary.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="{% static 'surferprofile/style.css' %}" />
</head>
<body>
<div>
This is a diary entry for <strong>{{ surfer.firstname }}</strong>
</div>
{% if surfdiary %}
<table id='diarytable'>
<tr id='diarytitlerow'>
<!--<td>Duration</td>-->
<td>Beach</td>
<td>Wave name</td>
<td id='diarytableentry'>Size</td>
<td>Wind direction</td>
<td id='diarytableentry'>Wave quality</td>
<td>Board</td>
<td id='diarytableentry'>Fins</td>
<td id='diarytableentry'>Surfing quality</td>
<td>Favourite turn</td>
<td id='diarytableentry'>Crowd factor</td>
<td>Comments</td>
</tr>
{% for entry in surfdiary %}
<tr>
<!---<td> entry.surfduration </td> -->
<td>{{ entry.beach }}</td>
<td>{{ entry.wave }}</td>
<td id='diarytableentry'>{{ entry.wavesize }}</td>
<td>{{ entry.winddir }}</td>
<td id='diarytableentry'>{{ entry.wavescore }}</td>
<td>{{ entry.board}}</td>
<td id='diarytableentry'>{{ entry.fins }}</td>
<td id='diarytableentry'>{{ entry.wavescore }}</td>
<td>{{ entry.trick }}</td>
<td id='diarytableentry'>{{ entry.crowdscore }}</td>
<td id='diarytablenotes'>{{ entry.notes }}</td>
</tr>
{% endfor %}
</table>
{% else %}
<p>No diary entries.</p>
{% endif %}
</body>
</html>
Updated style.css
#diarytable{
width: 100%;
border-style: solid;
}
#diarytitlerow{
font-weight: bold;
}
#diarytableentry{
text-align: center;
}
#diarytablenotes{
width: 20%;
}
