Tag 4: Listen & Tabellen

Ziel

Lerne, wie du Informationen mit Listen und Tabellen in HTML strukturierst.

Themen

• Ungeordnete Listen: <ul>
• Geordnete Listen: <ol>
• Verschachtelte Listen
• Tabellen: <table>, <tr>, <td>, <th>

Listen

Listen werden verwendet, um Elemente zu gruppieren. Es gibt zwei Haupttypen:

Ungeordnete Liste

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

Geordnete Liste

<ol>
  <li>Erstes Element</li>
  <li>Zweites Element</li>
</ol>

Verschachtelte Listen

<ul>
  <li>Früchte
    <ul>
      <li>Apfel</li>
      <li>Banane</li>
    </ul>
  </li>
</ul>

Tabellen

Tabellen werden verwendet, um Daten in Zeilen und Spalten darzustellen.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Alter</th>
    <th>Land</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>Kanada</td>
  </tr>
</table>

Übung

Versuche Folgendes zu erstellen:

• Eine Liste deiner 5 Lieblingsfilme (geordnet oder ungeordnet).
• Eine Tabelle mit 3 Spalten: Name, Alter, Land und 3 Datenzeilen.

Beispiel

<h2>Meine Lieblingsfilme</h2>
<ol>
  <li>Inception</li>
  <li>The Matrix</li>
  <li>Interstellar</li>
  <li>Der Herr der Ringe</li>
  <li>Avatar</li>
</ol>

<h2>Freunde Tabelle</h2>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Alter</th>
    <th>Land</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>Kanada</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>28</td>
    <td>UK</td>
  </tr>
</table>