Looping <table> Tag in HTML with Jinja2

date

Jun 20, 2023

slug

looping-table-tag-in-html-with-jinja2

author

status

Public

📜 Table of Contents

📜 Table of Contents 📖 <table> Tag in HTML 📖 What is the Jinja2?📖 Using <table> Tags in Jinja2 Template 📝 Summary 🐣 Pros 🐷 Cons

📖 <table> Tag in HTML

The HTML <table> tag is used to create a table in HTML. The table is divided into rows with the <tr> (table row) tag, and each row is divided into cells with the <td> (table data) tag. Cells can also be header cells, marked with the <th> (table header) tag.


<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1 Data 1</td>
    <td>Row 1 Data 2</td>
  </tr>
  <tr>
    <td>Row 2 Data 1</td>
    <td>Row 2 Data 2</td>
  </tr>
</table>

This will create a table with two columns and three rows (including the header row).

You can also use the <thead> and <tbody> tags to group the header content in a <table> element and to group the body content in a <table> element, respectively.

In Bootstrap, you can use the .table class to style your tables. There are also various other classes to style tables in different ways. For example:


<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <!-- more rows here -->
  </tbody>
</table>

This will create a styled table with zebra-striping (alternating light and dark rows) in Bootstrap. The .table-striped class is responsible for this effect.

📖 What is the Jinja2?

Jinja2 is a popular template engine for Python often used in web development. It is widely used because of its simplicity and flexibility. Its primary purpose is to take input (typically in the form of data) and format it in a way that's presentable to the user.

Variables and Filters: In Jinja2, you can use variables in your templates, and these variables get replaced by their values when the template is rendered. Variables in Jinja2 are enclosed in {{ }} tags. For example, {{ variable_name }} will output the value of the variable when it gets rendered. You can also apply filters to these variables using a pipe (|). For example, {{ variable_name|filter }}.

Control Structures: Jinja2 also supports control structures like loops and conditionals. These are enclosed in {% %} tags. For example, to loop over a list, you might do something like {% for item in items %} {{ item }} {% endfor %}. You can use if-else conditions in a similar manner.

Template Inheritance: Jinja2 allows "template inheritance", a feature that permits you to build a base “skeleton” template that contains all the common parts of your site and defines blocks that child templates can override. This is great for ensuring your website maintains a consistent look and feel across all pages.

Autoescaping: By default, Jinja2 is configured with "autoescaping" turned on for all HTML templates. This means that unless you explicitly mark variables as safe, any HTML they contain will be escaped, which is a crucial security feature for preventing Cross-Site Scripting (XSS) attacks.

Example of a Jinja2 template:


<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <h1>{{ heading }}</h1>
    <ul>
      {% for item in list %}
        <li>{{ item }}</li>
      {% endfor %}
    </ul>
  </body>
</html>

In this example, {{ title }} and {{ heading }} are variables that will be replaced with actual values when the template is rendered. The {% for %} loop is used to create a list item for each item in the provided list.

To use a Jinja2 template in a Flask application, you would typically use the render_template function, and pass any variables you want to use in the template as keyword arguments:


from flask import render_template

@app.route('/')
def home():
    return render_template('home.html', title='Home Page', heading='Welcome!', list=['Item 1', 'Item 2', 'Item 3'])

In this code, 'home.html' is the Jinja2 template, and title, heading, and list are variables that will be passed to the template.

📖 Using <table> Tags in Jinja2 Template

example-code-3

changjoon-park • Updated Jun 20, 2023

Jinja2 is a powerful template engine for Python that's often used in Flask applications to create dynamic HTML content. In your Flask view function, you might pass a list of dictionaries to a template, each dictionary representing a row of data for the table.

Here's a simple example. Assume you have the following Python code in Flask:


@app.route('/data')
def data():
    data = [
        {"name": "Alice", "email": "alice@example.com"},
        {"name": "Bob", "email": "bob@example.com"},
        {"name": "Charlie", "email": "charlie@example.com"}
    ]
    return render_template('data.html', data=data)

Then, in your Jinja2 template ('data.html'), you can create a dynamic table like this:


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    {% for row in data %}
    <tr>
      <th scope="row">{{ loop.index }}</th>
      <td>{{ row.name }}</td>
      <td>{{ row.email }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

In this example, Jinja2's {% for %} tag is used to loop over each row in the data variable. {{ loop.index }} is used to display the current iteration of the loop (1-indexed). The {{ row.name }} and {{ row.email }} are used to print out the name and email for each row in the data.

This way, you can build dynamic HTML tables in your Flask application with Jinja2.

📝 Summary

This post discusses how to use the HTML <table> tag and Jinja2 template engine in Python Flask applications to create dynamic HTML tables. It covers the basics of the <table> tag, how to use Jinja2 to create dynamic tables, and how to pass variables to Jinja2 templates in Flask using the render_template function.

🐣 Pros

HTML table tags provide an easy and structured way to display data on web pages.

Jinja2 template engine allows for the creation of dynamic HTML tables with customizable content.

Jinja2's autoescaping feature helps prevent Cross-Site Scripting (XSS) attacks by escaping HTML code by default.

Jinja2 supports template inheritance, which allows for consistent styling across web pages.

Flask's render_template function makes it easy to pass variables to Jinja2 templates and display dynamic content.

🐷 Cons

Tables can be difficult to style and may require additional CSS code to look aesthetically pleasing.

Using tables for layout can be problematic for accessibility and responsive design.

Jinja2 templates can become complex and difficult to maintain if not organized properly.

Autoescaping can sometimes interfere with the intended formatting of certain content.

Overuse of dynamic content in templates can negatively impact page loading times.