Erstellung einer Tabelle

1 Lösung

#10

Anfänger - HTML/CSS von Luigi - 23.11.2020 um 09:59 Uhr

Erstelle eine Tabelle mit mindestens 5 Spalten und mit mindestens 4 Zeilen. Die Tabelle soll einen Bereich für den Head und ein Bereich für den Footer aufweisen. Die einzelnen Bereiche sollen farblich hervorgehoben sein, ebenfalls die Zeilen in dem Tabellen Body.

Zur weiteren Erklärung findet Ihr im Anhang eine mögliche Lösung.

Denkt an den internen Stylebereich!

Viel Spass!

Bitte melden Sie sich an um zur Aufgabenbeschreibung eine Frage zu stellen.

Frage stellen

Bitte melden Sie sich an um eine Lösung einzureichen.

Lösung einreichen

von thet1983 (800 Punkte) - 08.07.2021 um 11:38 Uhr

HTML-Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="thet1983">
    <title>Train HTML #10</title>
    <!-- CSS STYLE START -->
    <style>
        
    html,body{
        scroll-behavior: smooth;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    

    .wrapper {
        position: relative;
        height: fit-content;
        margin: 2% auto;
        border-radius: 7px;
        background-color: #f2f2f2;
        padding: 20px;
    }
    table {
        background-color: white;
        border-spacing: 0;
    }
    table thead tr th[border="true"],
    table tfoot tr th[border="true"]{
        text-align: center;
        border: 2px solid black;
        margin: 0px;
        padding: 8px;
        background-color: chartreuse;
    }

    table tbody tr:nth-child(even) {
        background-color: #c6dfff;
    }
    table tbody tr:nth-child(odd) {
        background-color: #91bdf7;
    }

    table tbody tr td{
        text-align: center;
        border: 1px solid black;
        margin: 0px;
        padding: 10px;
    }
    
    

    </style>
    <!-- CSS STYLE END -->
</head>
<body>
    <div class="wrapper">
        <h3>Stadt Land Fluss</h3>
        <table>
            <thead>
                <tr>
                    <th border="true">Buchstabe</th>
                    <th border="true">Stadt</th>
                    <th border="true">Land</th>
                    <th border="true">Fluss</th>
                    <th border="true">Obst</th>
                    <th border="true">Gemüse</th>
                    <th border="true">Punkte</th>
                </tr>
                <tr>
                    <th colspan="6"></th>
                    <th border="true"><small>0,10 oder20<br>Punkte je Item</small></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>"F"</td>
                    <td>Frankfurt</td>
                    <td>Frankreich</td>
                    <td>-</td>
                    <td>Feige</td>
                    <td>-</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>"K"</td>
                    <td>Koblenz</td>
                    <td>Kroatien</td>
                    <td>Kongo</td>
                    <td>-</td>
                    <td>Karotte</td>
                    <td>50</td>
                </tr>
                <tr>
                    <td>"N"</td>
                    <td>Nürnburg</td>
                    <td>Norwegen</td>
                    <td>Neckar</td>
                    <td>Nektarine</td>
                    <td>-</td>
                    <td>40</td>
                </tr>
                <tr>
                    <td>"H"</td>
                    <td>Heidelberg</td>
                    <td>Honduras</td>
                    <td>Hase</td>
                    <td>Heidelbeere</td>
                    <td>-</td>
                    <td>60</td>
                </tr>
            </tbody>
            <tfoot>
                    <th colspan="5"></th>
                    <th border="true"><u>Gesamtpunkte</u></th>
                    <th border="true"><u>180 Punkte</u></th>
            </tfoot>
        </table>
    </div>
    
</body>
</html>