Herausforderung: Tabellen
Ziel
Präsentieren Sie Mitarbeiterinformationen in einem strukturierten Tabellenformat, indem Sie geeignete HTML-Tags verwenden, um Zeilen und Spalten zu erstellen.
Aufgabe
Erstellen Sie eine Tabelle mit drei Spalten: Name, Position und Lohn. Konzentrieren Sie sich darauf, die geeigneten HTML-Tags zu verwenden, um die Tabelle mit den richtigen Zeilen und Spalten zu füllen. Hier sind die Daten, die aufgenommen werden sollen:
- Name: Emma Johnson | Position: Verkaufsmitarbeiterin | Lohn: $15.50 pro Stunde.
- Name: Liam Thompson | Position: Kundendienstmitarbeiter | Lohn: $14.75 pro Stunde.
- Name: Olivia Rodriguez | Position: Marketingkoordinatorin | Lohn: $18.25 pro Stunde.
- Name: Noah Smith | Position: IT-Support-Spezialist | Lohn: $20.00 pro Stunde.
- Name: Ava Davis | Position: Verwaltungsassistentin | Lohn: $16.80 pro Stunde.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<table>
<!-- Table header: Defines the column headings -->
<thead>
<tr>
<th>___</th>
<th>Position</th>
<___>Wage</___>
</tr>
</thead>
<!-- Table body: Contains data for each employee -->
<tbody>
<!-- Row 1 -->
<tr>
<td>Emma Johnson</td>
<td>___</td>
<td>$15.50 per hour</td>
</tr>
<!-- Row 2 -->
<tr>
<___>Liam Thompson</___>
<td>Customer Service Representative</td>
<td>$14.75 per hour</td>
</tr>
<!-- Row 3 -->
<___>
<td>Olivia Rodriguez</td>
<td>Marketing Coordinator</td>
<td>$18.25 per hour</td>
</___>
/*
We collapse the borders of each cell.
By default, each cell has its own borders
which are not connected.
*/
table {
border-collapse: collapse;
margin: 0 auto;
margin-top: 30px;
font-family: Arial, sans-serif;
}
/*
Add a border and padding to the cells,
the distance from the content to the border.
*/
table th,
table td {
padding: 10px;
border: 3px solid #ff8a00;
text-align: center;
}
/* Style for table header row */
thead th {
background-color: #f2f2f2;
font-weight: bold;
text-transform: uppercase;
}
/* Alternate row background color */
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Hover effect on table rows */
War alles klar?
Danke für Ihr Feedback!
Abschnitt 4. Kapitel 8
