How to create HTML Tables in Python

Learn how to create HTML Tables in Python

If you want to display a table in a Python program just follow the example. You have to run a for loop to get the data of the table and then use HTML tags for making rows and columns of the table and for giving the values you need to give {{ obj.email}}.In this syntax, there is the object and column name between curly braces.


<main id="main">

    <!-- ======= About Us Section ======= -->
    <section class="breadcrumbs">
      <div class="container">

        <div class="d-flex justify-content-between align-items-center">
          <h2>View Data</h2>
            <li><a href="index.html">Home</a></li>
            <li>View Data</li>

    <!-- End About Us Section -->
<div class="container">
    {% if alldata|length==0 %}
    <div class="alert alert-primary" role="alert">
      No Record
    {% else %}
    <table class="table table-bordered">
    {% for obj in alldata %}
    <tr><td>{{obj.no}}</td><td>{{obj.name}}</td><td>{{obj.email}}</td><td>{{obj.userid}}</td><td>{{obj.passwrd}}</td><td><a href="/delete/{{obj.no}}" class="btn btn-success btn-sm" onclick="return confirm('Are you sure?')">Delete</a> 
        <a href="/update/{{obj.no}}" class="btn btn-success btn-sm" data-toggle="modal" data-target="#exampleModal{{obj.no}}">Update</a>
      <!-- Modal -->
<div class="modal fade" id="exampleModal{{obj.no}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Update Records</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      <div class="modal-body">
        <form action="/update/{{obj.no}}" method="post">
          <div class="form-group">
            <label for="formGroupExampleInput2">Name</label>
            <input type="text" class="form-control" name="txtname" placeholder="Name" value="{{obj.name}}">
          <div class="form-group">
              <label for="formGroupExampleInput2">Email</label>
              <input type="text" class="form-control" name="txtemail" placeholder="E-mail" value="{{obj.email}}">
            <div class="form-group">
              <label for="formGroupExampleInput2">User ID</label>
              <input type="text" class="form-control" name="txtuserid" placeholder="User ID" value="{{obj.userid}}">
            <div class="form-group">
              <label for="formGroupExampleInput2">Password</label>
              <input type="text" class="form-control" name="txtpassword" placeholder="Password" value="{{obj.passwrd}}">
            <div class="form-group">
              <input type="submit" class="form-control btn-primary" id="formGroupExampleInput2" value="Save Changes">
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    {% endfor %}
    {% endif %}
  </main><!-- End #main -->


Leave a Comment