i

Tabellen

Beispiel

Informationseinheiten lassen sich auch tabellarisch darstellen.


<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8"/>
    <title>Steckbrief von Bailey</title>
  </head>
  <body>
    <h1>Steckbrief</h1>
    <p>
      Ich heiße Bailey. Ich lebe in der Nähe 
      von Kaiserslautern.
    </p>
    <p>
      Ich interessiere mich für Agility-Sport.
      Meine Freundinnen und Freunde aus meiner Agility-Gruppe heißen:
    </p>
    <table border="1">
      <tr>
        <th>Freundinnen</th>
        <td>Luna</td>
        <td>Bella</td>
        <td>Amy</td>
        <td>Kira</td>  
        <td>Luna</td>
        <td>Lucy</td>
      </tr>
      <tr>
        <th>Freunde</th>
        <td>Sam</td>
        <td>Balu</td>
        <td>Paul</td> 
        <td>Charly</td>
        <td>Buddy</td>
        <td>Max</td>
      </tr>
    </table>
  </body>
</html>

Im Browser sieht die Webseite jetzt so aus.

Beispielseite

Erläuterungen

  • Tabellen werden mit dem Element <table> erstellt.
  • Mit der zusätzlichen border-Angabe in <table border="1"> wird ein Rahmen festgelegt.
    Eigentlich sollte diese Angabe nicht in HTML gemacht werden, was du in einem späteren Kapitel zu CSS noch sehen wirst.
  • Eine Tabellenzeile wird mit dem Element <tr></tr> erzeugt. Innerhalb der Zeile werden dann die einzelnen Zellen entweder mit dem Element <th> (hervorgehoben - Überschrift) oder mit dem Element <td> (Daten) ausgezeichnet.
  • Weitere Gestaltungsmöglichkeiten bei Tabellen erfährst du in einem Nachschlagewerk.

Aufgabe

  • Ergänze deinen Steckbrief um eine Tabelle. Denkbar wäre z. B. eine Darstellung deines Stundenplans.
  • Experimentiere mit der "border" - Zahl.
  • Was passiert, wenn die Zellenanzahl einer Zeile kleiner ist als die der übrigen?

Suche

v
16.5.3.2.4.5
inf-schule.de/lehrkraefte/archiv/informationsdarstellunginternet_alt/strukturbeschreibunghtml/exkurs_html/tabellen
inf-schule.de/16.5.3.2.4.5
inf-schule.de/@/page/CmzdA6x8grUuUW4m

Rückmeldung geben