HTML/CSS :: Aufgabe #10
1 Lösung
Erstellung einer Tabelle
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!
Zur weiteren Erklärung findet Ihr im Anhang eine mögliche Lösung.
Denkt an den internen Stylebereich!
Viel Spass!
Lösungen:
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>