Lernfabrik

📄 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.

🔨 Das Grundgerüst deines Lebenslaufs

Jede HTML-Seite hat einen festen Aufbau. Für den Lebenslauf fügen wir eine Tabelle hinzu:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Mein Lebenslauf</title>
</head>
<body>
  <h1>Lebenslauf von Max Mustermann</h1>
</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

📊 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>

🎨 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>
💡 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!
  1. Öffne einen Texteditor (Notepad, VS Code, etc.)
  2. Kopiere das Grundgerüst von oben
  3. Ändere den Titel in deinen Namen, z.B. "Lebenslauf von Anna Schmidt"
  4. Füge eine Tabelle mit mindestens 5 Zeilen ein (z.B. Schulbildung, Praktika, Hobbys)
  5. Nutze die Spalten: Zeitraum und Tätigkeit
  6. Füge das minimale CSS für die Tabelle hinzu
  7. Speichere die Datei als lebenslauf.html
  8. Ö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; }
  </style>
</head>
<body>
  <h1>Lebenslauf von Anna Schmidt</h1>
  <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?

🔍 Lösung anzeigen

Richtig sind: 1, 2 und 3

Zurück Weiter: Überschriften & Absätze