📄 HTML - Tabellarischer Lebenslauf
💡 Was ist ein tabellarischer Lebenslauf?
Ein tabellarischer Lebenslauf stellt deine wichtigsten Informationen in einer übersichtlichen Tabelle dar. Er wird oft für Bewerbungen verwendet und ist einfach mit HTML zu erstellen. Zu jedem Lebenslauf gehört auch ein Bewerbungsfoto!
Ein tabellarischer Lebenslauf stellt deine wichtigsten Informationen in einer übersichtlichen Tabelle dar. Er wird oft für Bewerbungen verwendet und ist einfach mit HTML zu erstellen. Zu jedem Lebenslauf gehört auch ein Bewerbungsfoto!
🔨 Das Grundgerüst deines Lebenslaufs
Jede HTML-Seite hat einen festen Aufbau. Für den Lebenslauf fügen wir eine Tabelle und ein Bild hinzu:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Mein Lebenslauf</title>
</head>
<body>
<h1>Lebenslauf von Max Mustermann</h1>
<img src="bilder/bewerbungsfoto.jpg" alt="Bewerbungsfoto von Max Mustermann" width="150">
</body>
</html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Mein Lebenslauf</title>
</head>
<body>
<h1>Lebenslauf von Max Mustermann</h1>
<img src="bilder/bewerbungsfoto.jpg" alt="Bewerbungsfoto von Max Mustermann" width="150">
</body>
</html>
📝 Erklärung der einzelnen Teile:
| Code | Bedeutung |
|---|---|
<!DOCTYPE html> |
Sagt dem Browser: "Das ist eine HTML5-Seite" |
<html> |
Der Anfang der HTML-Seite |
<head> |
Der Kopf - enthält Infos über die Seite (nicht sichtbar) |
<meta charset="utf-8"> |
Stellt sicher, dass Umlaute (ä, ö, ü) richtig angezeigt werden |
<title> |
Der Titel der Seite (steht im Browser-Tab) |
<body> |
Der Körper - alles hier wird im Browser angezeigt |
<img> |
Fügt ein Bild ein. src gibt den Pfad an, alt den Alternativtext |
🖼️ Das Bewerbungsfoto einfügen
Ein Lebenslauf ohne Foto ist wie ein Gesicht ohne Augen! Mit dem <img>-Tag fügst du dein Bewerbungsfoto ein:
<img src="bilder/bewerbungsfoto.jpg"
alt="Bewerbungsfoto von Anna Schmidt"
width="150">
alt="Bewerbungsfoto von Anna Schmidt"
width="150">
💡 Wichtige Attribute für das Bild:
src– Der Dateipfad zum Bild (z.B.bilder/foto.jpg)alt– Beschreibung des Bildes (wird angezeigt, wenn das Bild nicht lädt)width/height– Die Größe des Bildes in Pixeln
🎨 Das Foto mit CSS verschönern
Mit CSS kannst du das Foto rund machen und einen Rahmen geben – so sieht es professionell aus:
<style>
.profilbild {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #007bff;
}
</style>
.profilbild {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #007bff;
}
</style>
So sieht das Ergebnis aus:
📊 Die Tabelle für den Lebenslauf
Eine Tabelle wird mit <table> erstellt. Jede Zeile beginnt mit <tr> (table row).
Die Überschriften stehen in <th> (table header) und die normalen Zellen in <td> (table data).
<table>
<tr>
<th>Zeitraum</th>
<th>Tätigkeit</th>
</tr>
<tr>
<td>2018 - 2022</td>
<td>Grundschule</td>
</tr>
</table>
<tr>
<th>Zeitraum</th>
<th>Tätigkeit</th>
</tr>
<tr>
<td>2018 - 2022</td>
<td>Grundschule</td>
</tr>
</table>
🎨 Minimales CSS für die Tabelle
Mit ein paar CSS-Regeln wird die Tabelle übersichtlicher. Du kannst sie im <head> in einem <style>-Block einfügen:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
💡 Tipp:
border-collapse: collapse; sorgt dafür, dass die Rahmen der Zellen zu einer Linie verschmelzen.
🎯 Deine Aufgabe
✏️ Aufgabe 1: Erstelle deinen eigenen tabellarischen Lebenslauf!
- Öffne einen Texteditor (Notepad, VS Code, etc.)
- Kopiere das Grundgerüst von oben
- Ändere den Titel in deinen Namen, z.B. "Lebenslauf von Anna Schmidt"
- Füge ein Bewerbungsfoto ein (nutze ein Platzhalterbild oder dein eigenes Foto)
- Füge eine Tabelle mit mindestens 5 Zeilen ein (z.B. Schulbildung, Praktika, Hobbys)
- Nutze die Spalten: Zeitraum und Tätigkeit
- Füge das minimale CSS für die Tabelle und das Foto hinzu
- Speichere die Datei als
lebenslauf.html - Öffne die Datei im Browser (Doppelklick)
📝 Beispiel für einen fertigen Lebenslauf
So könnte dein Lebenslauf aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Lebenslauf von Anna Schmidt</title>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #333; padding: 8px; }
th { background-color: #f2f2f2; }
.profilbild { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid #007bff; }
</style>
</head>
<body>
<h1>Lebenslauf von Anna Schmidt</h1>
<img src="bilder/bewerbungsfoto.jpg" alt="Bewerbungsfoto von Anna Schmidt" class="profilbild">
<table>
<tr>
<th>Zeitraum</th>
<th>Tätigkeit</th>
</tr>
<tr>
<td>2018 - 2022</td>
<td>Grundschule</td>
</tr>
<tr>
<td>2022 - heute</td>
<td>Gymnasium</td>
</tr>
<tr>
<td>2023</td>
<td>Schülerpraktikum bei XYZ</td>
</tr>
<tr>
<td>Hobbys</td>
<td>Lesen, Schwimmen, Programmieren</td>
</tr>
</table>
</body>
</html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Lebenslauf von Anna Schmidt</title>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #333; padding: 8px; }
th { background-color: #f2f2f2; }
.profilbild { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid #007bff; }
</style>
</head>
<body>
<h1>Lebenslauf von Anna Schmidt</h1>
<img src="bilder/bewerbungsfoto.jpg" alt="Bewerbungsfoto von Anna Schmidt" class="profilbild">
<table>
<tr>
<th>Zeitraum</th>
<th>Tätigkeit</th>
</tr>
<tr>
<td>2018 - 2022</td>
<td>Grundschule</td>
</tr>
<tr>
<td>2022 - heute</td>
<td>Gymnasium</td>
</tr>
<tr>
<td>2023</td>
<td>Schülerpraktikum bei XYZ</td>
</tr>
<tr>
<td>Hobbys</td>
<td>Lesen, Schwimmen, Programmieren</td>
</tr>
</table>
</body>
</html>
🧪 Teste dein Wissen
Welche Aussagen sind richtig?
- ☐ Mit
<tr>beginnt eine neue Tabellenzeile - ☐
<td>steht für "table data" und ist eine normale Zelle - ☐
<th>wird für Überschriften in der Tabelle verwendet - ☐
border-collapse: collapse;entfernt alle Rahmen - ☐ Mit
<img>kann man ein Bewerbungsfoto einfügen - ☐
border-radius: 50%;macht ein Bild rund
🔍 Lösung anzeigen
Richtig sind: 1, 2, 3, 5 und 6