inf-schule | Sportergebnisse » Tabellendarstellung

Tabellendarstellung

HTML-Tabellen

Für die Darstellung einer Ergebnistabelle der einzelnen Spiele bieten sich HTML-Tabellen an.

Eine Tabelle von Tierarten, deren Lebensraum und Größe könnte so aussehen:

<table>
    <tr>
        <td>Gorilla</td>
        <td>Zentralafrika</td>
        <td>1.6 m</td>
    </tr>
    <tr>
        <td>Panda</td>
        <td>China</td>
        <td>1.4 m</td>
    </tr>
    <tr>
        <td>Blauwal</td>
        <td>Alle Weltmeere</td>
        <td>26 m</td>
    </tr>
</table>

Elm-Code für Tierarten

Ein Elm-Programm, das die obige Tabelle im DOM erzeugt, kann ungefähr so aussehen:

module Main exposing (main)

import Html exposing (..)


-- Eine Tierart hat einen Namen, Lebensraum 
-- und eine typische Größe in Metern
type alias Tierart =
    ( String, String, Float )


type alias Model =
    List Tierart


initialModel : Model
initialModel =
    [ ( "Gorilla", "Zentralafrika", 1.6 )
    , ( "Panda", "China", 1.4 )
    , ( "Blauwal", "Alle Weltmeere", 26 )
    ]


viewTierart tierart =
    let
        xxx =
            tierart
    in
    tr []
        [ td [] [ text name ]
        , td [] [ xxx ]
        , td [] [ String.fromFloat groesse ++ " m" |> text ]
        ]


main =
    table []
        (List.xxx xxx xxx)

Aufgabe 1

Das Programm enthält an einigen Stellen die Zeichenfolge "xxx". Ersetze diese durch den korrekten Code, sodass die Tabelle korrekt dargestellt wird.

Erläutere die Funktionsweise des Programms.

Aufgabe 2 (optional)

Schöner ist es, wenn die Tabellenspalten eine Überschrift haben:

Erweitere dein Programm entsprechend.

Sportergebnisse als Tabelle

Statt Tierarten sollen nun Spielergebnisse dargestellt werden:

Im ersten Schritt kannst du ein Testspiel und eine Funktion mit dem Namen viewSpiel implementieren. Anschließend kannst du das einzelne Testspiel anzeigen. Ein Ausschnitt deines Codes hat damit folgende Form:

        testspiel =
            Spiel "FV Heim" "VfB Gast" 2 1
        
        
        viewSpiel : Spiel -> Html msg
        viewSpiel spiel =
            tr []
                [ td [] [ text spiel.heimmannschaft ]        
                , -- hier fehlt noch Einiges...
                ]
        
        main =
            div []
                [ h1 [] [ text "Ergebnisse des Spieltags" ]
                , table [] [ viewSpiel testspiel ]
                ]

Aufgabe 3

(a) Ergänze deinen Code, so dass ein einzelnes Testspiel dargestellt wird:

(b) Passe main so an, dass die gesamte Tabelle dargestellt wird. Falls du Hilfe benötigst, solltest du dir das Beispiel mit den Tierarten noch einmal ansehen.