Nested table not show in outer table in HTML

Hi

I am facing an HTML rendering error.

file HTML have the table and I want to get data that contain text as an HTML table from the database to render as nested table in in HTML.

{{ item.des }} item.des contain html table text to display.

It appears that , a nested table is not rendered as HTML. I view page source in Chrom.
< is shown &lt; and > is shown &gt;

this is result.

this is data to need to render in Detail column in HTML from databet

view page source in Chrome.

this is my HTML file
the following are javascript and css files that are referred in html

  <link rel="stylesheet" type="text/css" href="/static/app/content/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/app/content/site.css" />
    <script src="/static/app/scripts/modernizr-2.6.2.js"></script>


   <script src="/static/app/scripts/jquery-1.10.2.js"></script>
    <script src="/static/app/scripts/bootstrap.js"></script>
    <script src="/static/app/scripts/respond.js"></script>

{% extends "app/layout.html" %}
{% load crispy_forms_tags %}
{% block content %}

    <h1>List Error</h1>

    <form method="get" autocomplete="on">
    <div class='row'>
        <div class='col-md-3'>   {{ errorFilter.form.job_type| as_crispy_field }}</div>
        <div class='col-md-3'>   {{ errorFilter.form.start_datetime__gt | as_crispy_field }}</div>
        <div class='col-md-3'>   {{ errorFilter.form.end_datetime__lt| as_crispy_field }}</div>
        <div class='col-md-3'>   {{ errorFilter.form.error_type| as_crispy_field }}</div>


    </div>
     <div >
            <center><br>
                   <button class="btn btn-primary" type="submit">Search</button>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <a href="{% url 'list_error' %}" class="cancel-link">Clear Search</a>
            </center>
     </div>

    </form>


        <h3>List Error</h3>
    {% if errorList %}

        <table class="table table-striped table-hover table-condensed">
            <tr>
                 <td scope="col">ID</td>
                <td scope="col">Detail</td>
                <td scope="col">Type</td>

                <td scope="col">Date</td>
                <td scope="col">JobTran</td>

            </tr>
        <tbody>
            {% for item in errorList %}
                <tr>
                <td scope="row">{{ item.id }}</td>
                <td >{{ item.des }}</td>
                <td>{{ item.type }}</td>

                <td>{{ item.created_date }}</td>
                <td>{{ item.transaction.id }}</td>

                <td><a href="{% url 'detail_error' item.id %}">View Detail</a></td>

            {% endfor %}
            </tr>
        </tbody>
        </table>
    {% endif %}

{% endblock %}


How to fix this problem.

Thank you.
Pongthorn

See the docs on autoescape and safe.

1 Like