Создание веб-таблиц на Python: практическое руководство

Пример 1: Таблица с объединением ячеек (colspan / rowspan)

Для создания сложных заголовков или сводных столбцов можно использовать атрибуты colspan и rowspan. Такую разметку удобно формировать вручную.

data = [
    ["Отдел", "Продавец", "Январь", "Февраль"],
    ["A", "Иван", 100, 120],
    ["A", "Мария", 130, 110],
    ["B", "Петр", 90, 95]
]

rows = ""
# Заголовок с объединением
rows += "СотрудникПродажи"
rows += "ОтделИмяЯнвФев"

for row in data:
    rows += ""
    for cell in row:
        rows += f"{cell}"
    rows += ""

html = f"{rows}"
print(html)
  

<table border='1'><tr><th colspan='2'>Сотрудник</th><th colspan='2'>Продажи</th></tr><tr><th>Отдел</th><th>Имя</th><th>Янв</th><th>Фев</th></tr><tr><td>A</td><td>Иван</td><td>100</td><td>120</td></tr><tr><td>A</td><td>Мария</td><td>130</td><td>110</td></tr><tr><td>B</td><td>Петр</td><td>90</td><td>95</td></tr></table>
  

В данном примере две строки заголовка: первая группирует столбцы по отделам и продажам, вторая уточняет названия. Объединение ячеек достигается атрибутами colspan.

Пример 2: Таблица с CSS классами и стилями через Pandas

Pandas позволяет добавить CSS классы к таблице, а также изменить атрибуты с помощью служебных функций.

import pandas as pd

df = pd.DataFrame({
    'Продукт': ['Ноутбук', 'Мышь', 'Клавиатура'],
    'Цена': [50000, 1500, 3000]
})

# Добавим CSS класс и границы
html = df.to_html(classes='table table-striped', border=2)
# Можно обернуть в div с дополнительными стилями
html = f'
{html}
'
print(html)
  

<div style="font-family: Arial;"><table border="2" class="table table-striped">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>Продукт</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>Ноутбук</td>
      <td>50000</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Мышь</td>
      <td>1500</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Клавиатура</td>
      <td>3000</td>
    </tr>
  </tbody>
</table></div>
  

Параметр classes добавляет к тегу <table> указанные классы. С помощью CSS можно легко стилизовать таблицу (полосы, границы, шрифты).

Пример 3: Генерация таблицы из CSV файла

Часто данные поступают в формате CSV. Модуль csv позволяет прочитать файл и преобразовать его в HTML таблицу.

import csv

def csv_to_html(filename):
    with open(filename, 'r', encoding='utf-8') as f:
        reader = csv.reader(f)
        headers = next(reader)  # первая строка как заголовок
        rows_html = ""
        for row in reader:
            rows_html += "" + "".join(f"{cell}" for cell in row) + ""
        header_html = "" + "".join(f"{h}" for h in headers) + ""
    return f"{header_html}{rows_html}"

# Пример использования (предположим, файл 'data.csv' существует)
# html = csv_to_html('data.csv')
# print(html)
  

При работе с реальным CSV следует учитывать возможные кавычки и спецсимволы – лучше дополнительно применять html.escape() для каждой ячейки.

Пример 4: Таблица с изображениями и гиперссылками

Внутри ячеек таблицы можно размещать любые HTML элементы, включая картинки и ссылки.

import html

data = [
    ("Python", "https://www.python.org", "python-logo.png"),
    ("Jinja2", "https://jinja.palletsprojects.com", "jinja-logo.png")
]

rows = ""
for name, url, img in data:
    rows += ""
    rows += f"{html.escape(name)}"
    rows += f""
    rows += ""

html_table = f"{rows}"
print(html_table)
  

<table border='1'><tr><td><a href='https://www.python.org'>Python</a></td><td><img src='python-logo.png' alt='Логотип' width='50'></td></tr><tr><td><a href='https://jinja.palletsprojects.com'>Jinja2</a></td><td><img src='jinja-logo.png' alt='Логотип' width='50'></td></tr></table>
  

Важно экранировать атрибуты и содержимое, если данные поступают от пользователя, чтобы избежать инъекций.

Пример 5: Использование библиотеки dominate для построения DOM

Библиотека dominate позволяет создавать HTML элементы как объекты Python, что дает удобный интерфейс и автоматическое экранирование.

from dominate import tags as t
from dominate.util import raw

data = [
    ["Иван", 25, "Москва"],
    ["Мария", 30, "Санкт-Петербург"]
]

with t.table(border='1') as table:
    with table.add(t.tr()):
        t.th('Имя')
        t.th('Возраст')
        t.th('Город')
    for row in data:
        with table.add(t.tr()):
            for cell in row:
                t.td(cell)

html = str(table)
print(html)
  

<table border="1">
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
    <th>Город</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>25</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Мария</td>
    <td>30</td>
    <td>Санкт-Петербург</td>
  </tr>
</table>
  

Dominate автоматически обрабатывает отступы и экранирование. Установка: pip install dominate.

Пример 6: Чередование цветов строк с помощью Jinja2

Шаблонизатор позволяет легко реализовать стилистические эффекты, например, зебровую расцветку.

from jinja2 import Template

template_str = """

  {% for item in items %}
  
  {% endfor %}

  

    
№
Название
Цена
  

    
{{ loop.index }}
    
{{ item.name }}
    
{{ item.price }}
  
"""

template = Template(template_str)
items = [{'name':'Книга','price':500},{'name':'Ручка','price':50},{'name':'Тетрадь','price':100}]
html = template.render(items=items)
print(html)
  

<table>
  <tr>
    <th>№</th><th>Название</th><th>Цена</th>
  </tr>
  <tr class="odd">
    <td>1</td>
    <td>Книга</td>
    <td>500</td>
  </tr>
  <tr class="even">
    <td>2</td>
    <td>Ручка</td>
    <td>50</td>
  </tr>
  <tr class="odd">
    <td>3</td>
    <td>Тетрадь</td>
    <td>100</td>
  </tr>
</table>
  

Здесь используется встроенная переменная loop.index и фильтр even/odd для присвоения классов. С помощью CSS можно задать разные фоны для четных и нечетных строк.