Seite 1 von 1

CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 10:46
von CoderGirl
Hallo,

ich habe ein paar CSV, die ich gerne in eine schicke HTML-Tabelle zusammenführen mag.
Es gibt ja diverse Ansätze, dass zu machen, daher mal die Frage an Euch:
Macht jemand da schon was und wer kann mir da ein guten Ansatz empfehlen?

Euer Codergirl

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 10:51
von nezzcarth
Soll einfach nur statisches HTML erzeugt werden? Dann kannst im Prinzip ein einfaches Skript schreiben und für das HTML eine Template-Engine nehmen. Jinja2 ist da sehr beliebt. Persönlich mag ich auch Mako und habe das auch für so etwas schon verwendet. Der Unterschied ist, dass man in Mako mehr oder weniger "normales" Python einbetten kann, was teilweise kritisch gesehen wird (Vermischung von Darstellung und Logik), aber bei solchen Projekt auch sehr praktisch sein kann.

Die Vorgehensweise ist in beiden Fällen gleich: Du bastelst dir ein entsprechendes Template, bei dem im Prinzip nur die Spaltenüberschriften und die Zeilen variabel sein müssen. In deinem Skript liest du die CSV Dateien ein, bereitest sie nach deinen Vorstellungen auf, packst sie in eine geeignete Datenstruktur und renderst dann mit diesen Daten als Kontext das Template als HTML. Wie schick das dann wird, hängt vom CSS/JS ab, das du dazu gibst ;) Da kann man bei Bedarf auf eines der gängigen Frontendframeworks (Bootstrap, Bulma, Foundation, ...) und/oder so etwas wie Datatables zurückgreifen.

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 11:41
von CoderGirl
Hallo

es soll nur statisches HTML sein. Ich habe diverse Datenquellen, die ich in einem CSV zusammengeführt habe und die Daten will ich dann per HTML
zusammenfassen, um sie mit beliebigen Browsern bei uns im Netzwerk (Mom, Dad) anzuzeigen :)

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 11:46
von noisefloor
Hallo,

mit einer Template Engine wie Jinja2 erzeugst du eine normale HTML Seite. Innerhalb des Templates kannst du dann über die Zeilen der CSV Datei iterieren und so deine Tabellenzeilen bauen. Das ist also genau das, was du suchst.
Einfacher geht es nicht, dafür sind Template Engines da.

Gruß, noisefloor

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 12:20
von CoderGirl
Hallo

danke Euch. Ich lese mich da mal dann ein :)

Euer Codergirl

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 12:27
von nezzcarth
Hier mal ein simples Beispiel, wie das gemeint ist (HTML und Code Struktur muss man natürlich noch verbessern; das Template gehört später natürlich auch in eine eigene Datei):

Code: Alles auswählen

#!/usr/bin/env python3
import csv
from jinja2 import Template

TEMPLATE = '''
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Corona</title>
    </head>
    <body>
    <table>
        <thead>
            <tr>
            {% for item in headers %}
                <th>{{ item  }}</th>
            {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in rows %}
            <tr>
                {% for label, cell  in row.items() %}
                <td>{{ cell }}</td>
                {% endfor %}
            <tr>
            {% endfor %}
        </tbody>
    </table>
    </body>
</html>
'''

def iter_csv(file):
    with open(file, 'r', encoding='utf8') as fh:
        reader = csv.DictReader(fh)
        for row in reader:
            yield row 


def to_html(rows, template):
    headers = list(rows[0].keys())
    return template.render(headers=headers, rows=rows)


def main():
    file = 'corona.csv'
    rows = list(iter_csv(file))
    template = Template(TEMPLATE)
    html = to_html(rows, template) 
    print(html)


if __name__ == '__main__':
    main()
(Daten von hier: https://data.europa.eu/euodp/de/data/da ... virus-data)

Und für ein ansprechenderes Layout kannst du dir ja eines der vielen fertigen Tabellen Templates aussuchen, die im Netz zu finden sind

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 13:04
von CoderGirl
Hallo

wow mega danke Dir. Ich mag ja Beispiele, da ich mit all dem abstrakten nix anfangen :)

Das teste ich mal durch :))

Codergirl :)

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 14:00
von CoderGirl
Hi zusammen,

das klappt super. Ich habe auch oben das etwas angepasst, dass das html in eine Datei geschrieben wird :)

Jetzt geh ich auf die Suche nach einem schicken Template :)
Müsste ja der Bereich nach TEMPLATE = ' ' ' sein :)

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 18:35
von CoderGirl
[quote=nezzcarth post_id=369932

Und für ein ansprechenderes Layout kannst du dir ja eines der vielen fertigen Tabellen Templates aussuchen, die im Netz zu finden sind
[/quote]

Irgendwie tue ich mich schwer, da was zu finden. Hast du evt die ein oder andere Quelle zur Hand?

Nur wenn es nicht zu nervig ist

Danke

Codergirl

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 19:36
von nezzcarth
Schau mal, ob hier etwas bei ist:

https://colorlib.com/wp/css3-table-templates/
https://freshdesignweb.com/free-css-tables/

Stichworte wären hier z.B. table css templates. So findet man mehrere derartiger Sammlungen.

Ein anderer Ansatz ist, ein Tabellen-Element gängiger Frontframeworks zu nehmen. Viele haben so etwas an Bord (allerdings hat man damit ggf. etwas overhead):
https://bulma.io/documentation/elements/table/
https://getbootstrap.com/docs/4.0/content/tables/
https://milligram.io/tables.html
http://getskeleton.com/#tables

etc.

Re: CSV in schicke HTML-Tabelle

Verfasst: Samstag 11. Juli 2020, 20:08
von CoderGirl
Guten Abend

Danke dir. Morgen schau ich rein. Heute Abend muss ich mich um meinen Freund kümmern. Der hat was gegen coding SA abends 😂😂