Jinja를 이용하여 HTML 테이블 생성하기

Python

Jinja

Web

DevOps

Author

gabriel yang

Published

October 9, 2024

Jinja를 이용하여 HTML 테이블 생성하기

Jinja는 Python의 데이터를 템플릿에 삽입해 동적으로 HTML 문서를 생성하는 템플릿 엔진입니다. 그중에서도 자주 사용되는 기능 중 하나가 HTML 테이블을 동적으로 생성하는 것입니다. 특히 데이터가 행과 열로 구성된 경우, 이를 시각적으로 표현하기 위해 테이블을 생성하는 것은 매우 유용합니다.

이 글에서는 Jinja를 이용해 테이블을 어떻게 생성하고, 다양한 데이터를 렌더링하는 방법을 예제 코드와 함께 설명하겠습니다.

Jinja에서 테이블 생성의 장점

동적 데이터 표현: Python의 리스트나 딕셔너리 같은 데이터를 쉽게 HTML 테이블 형식으로 표현할 수 있습니다.
유연한 구성: 조건문이나 반복문을 통해 다양한 방식으로 테이블의 구조를 동적으로 조작할 수 있습니다.
템플릿 상속 가능: 테이블을 하나의 템플릿으로 재사용하거나, 상위 템플릿에 삽입해 활용할 수 있습니다.

예제 1: 간단한 2차원 리스트 데이터를 이용한 테이블 생성

2차원 리스트 데이터를 사용하여 간단한 HTML 테이블을 생성해보겠습니다.

1. Jinja 템플릿 작성

먼저, table_template.html 파일에 Jinja 템플릿을 작성합니다.

<!-- table_template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>

    <table border="1">
        <thead>
            <tr>
                {% for header in headers %}
                    <th>{{ header }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
                <tr>
                    {% for item in row %}
                        <td>{{ item }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>

이 템플릿은 동적으로 테이블을 생성합니다. Jinja의 for 문을 사용하여 테이블의 헤더와 데이터를 반복 출력하며, HTML의 <table> 태그를 사용해 테이블 구조를 정의합니다.

2. Python 코드에서 템플릿 렌더링

다음으로, Python에서 Jinja 템플릿을 렌더링하는 코드를 작성합니다.

from jinja2 import Environment, FileSystemLoader

# Jinja 환경 설정
env = Environment(loader=FileSystemLoader('templates'))

# 템플릿 파일 로드
template = env.get_template('table_template.html')

# 테이블 데이터
headers = ["Name", "Age", "Occupation"]
data = [
    ["John", 28, "Engineer"],
    ["Jane", 32, "Doctor"],
    ["Doe", 22, "Student"]
]

# 템플릿에 전달할 데이터
context = {
    'title': 'User Information Table',
    'headers': headers,
    'data': data
}

# 템플릿 렌더링
rendered_html = template.render(context)

# 렌더링된 HTML 출력
with open('output_table.html', 'w') as f:
    f.write(rendered_html)

print("HTML 파일이 성공적으로 생성되었습니다.")

이 코드는 템플릿을 로드하고, headers와 data를 포함한 Python 데이터를 템플릿에 전달하여 동적으로 테이블을 생성합니다. 생성된 HTML은 output_table.html 파일로 저장됩니다.

3. 결과

렌더링된 HTML 파일은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Information Table</title>
</head>
<body>
    <h1>User Information Table</h1>

    <table border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Occupation</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>28</td>
                <td>Engineer</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>32</td>
                <td>Doctor</td>
            </tr>
            <tr>
                <td>Doe</td>
                <td>22</td>
                <td>Student</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

예제 2: 딕셔너리 데이터를 이용한 테이블 생성

데이터가 딕셔너리 형식으로 제공되는 경우에도 Jinja를 사용하여 동적으로 테이블을 생성할 수 있습니다.

1. 템플릿 작성

table_template.html 파일에서, 딕셔너리 데이터를 처리할 수 있는 템플릿을 조금 수정합니다.

<!-- table_template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>

    <table border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody>
            {% for key, value in data.items() %}
                <tr>
                    <td>{{ key }}</td>
                    <td>
                        {% for detail_key, detail_value in value.items() %}
                            {{ detail_key }}: {{ detail_value }}<br>
                        {% endfor %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>

2. Python 코드 작성

from jinja2 import Environment, FileSystemLoader

# Jinja 환경 설정
env = Environment(loader=FileSystemLoader('templates'))

# 템플릿 파일 로드
template = env.get_template('table_template.html')

# 딕셔너리 데이터
data = {
    "John": {"Age": 28, "Occupation": "Engineer", "Location": "New York"},
    "Jane": {"Age": 32, "Occupation": "Doctor", "Location": "Boston"},
    "Doe": {"Age": 22, "Occupation": "Student", "Location": "San Francisco"}
}

# 템플릿에 전달할 데이터
context = {
    'title': 'User Information Table with Details',
    'data': data
}

# 템플릿 렌더링
rendered_html = template.render(context)

# 렌더링된 HTML 출력
with open('output_table.html', 'w') as f:
    f.write(rendered_html)

print("HTML 파일이 성공적으로 생성되었습니다.")

3. 결과

이 코드는 딕셔너리 데이터를 테이블 형식으로 출력합니다.

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Age: 28<br>Occupation: Engineer<br>Location: New York<br></td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Age: 32<br>Occupation: Doctor<br>Location: Boston<br></td>
        </tr>
        <tr>
            <td>Doe</td>
            <td>Age: 22<br>Occupation: Student<br>Location: San Francisco<br></td>
        </tr>
    </tbody>
</table>

결론

Jinja를 이용해 동적으로 테이블을 생성하는 방법은 매우 간단하면서도 유연합니다. Python의 데이터를 HTML 템플릿에 쉽게 삽입하여 반복적인 구조를 렌더링할 수 있으며, 리스트뿐만 아니라 딕셔너리 데이터를 처리하는 데도 유용합니다. 특히 웹 애플리케이션에서 대량의 데이터를 표 형태로 보여줄 때 매우 유용한 기술입니다.