1
Per MDN a TR
may only contain a mixture of TD
or TH
elements.
Change your template to compensate for this. (also it appears you likely have a typo and meant t.completed)
Possibly:
<h1 id="title">Joe's Basic Task List</h1>
<table id="taskTable">
{% for t in taskList %}
<tr>
{%if t.completed == 1%}
<td><div class="btn active"><i class="fa fa-check"></i></div></t d>
{%else%}
<td><div class="btn"><i class="fa fa-check"></i></div></td>
{%endif%}
<td class="tableText">
<a href="{% url 'tasks:detail' t.id%}">{{t.task}}</a>
<input type="hidden" name="id" value="{{t.id}}"/>
</td>
</tr>
{% endfor %}
</table>
Also consider changing the div’s to span or putting the styles directly on the td. Both display as block elements (well the td is a table-cell display, but will behave similarly as a block level element with styling).
Having divs nested inside of a td just seems wrong as you don’t really need it for positioning / styling purposes.
Source:stackexchange.com