Python Lernhandbuch

Kapitel 15: Schöne Oberflächen ohne Design-Studium · Abschnitt 4 von 7

Die Tabelle aufbereiten

Deutsches Zahlenformat als eigener Jinja-Filter in main.py:

python
def euro(wert):
    text = f'{wert:,.2f}'                                   # 1,234.50
    return text.replace(',', 'X').replace('.', ',').replace('X', '.') + ' €'

def datum(wert):
    return wert.strftime('%d.%m.%Y') if wert else ''

templates.env.filters['euro'] = euro
templates.env.filters['datum'] = datum

Verwendung im Template: {{ k.umsatz|euro }} und {{ k.angelegt|datum }}. Die Tabelle von Kapitel 14, schöner:

html
<div class="overflow-auto">
  <table class="striped">
    <thead>
      <tr>
        <th>Name</th><th>Stadt</th><th class="zahl">Umsatz</th><th></th>
      </tr>
    </thead>
    <tbody id="tabelle">
      {% include '_zeilen.html' %}
    </tbody>
  </table>
</div>

Gestaltungsregeln, die sofort professioneller wirken:

  • Ein einziger Akzentfarbton, der Rest in Grau.
  • Zahlen rechtsbündig, Text linksbündig, Spaltenüberschriften passend ausgerichtet.
  • Leere Zustände benennen ("Keine Kunden gefunden"), statt eine leere Tabelle zu zeigen.
  • Gefährliche Aktionen (Löschen) zurückhaltend gestalten (class="secondary outline"), die Hauptaktion deutlich.
  • Mindestens 16 px Schriftgröße, großzügiger Abstand, nie mehr als eine Handvoll Farben.
  • Auf dem Handy testen: Browser-Entwicklerwerkzeuge (F12) mit Gerätemodus.

Tipp: Bei Python-Beispielen kannst du auf ▶ Ausprobieren klicken, den Code verändern und direkt ausführen.

← Zurück