Webmaster-Crashkurs

Tabellen in HTML erstellen

Tabellarische Daten sollten in Tabellen aufgelistet werden. Früher wurde auch das Design über Tabellen realisiert - heute, in den Zeiten von CSS, sollten Tabellen nur noch dann verwendet werden, wenn die dargestellten Daten auch in Tabellenform Sinn machen. Beispiele dafür sind Fahrpläne, Stundenpläne, Datenauflistungen etc.

Im folgenden Beispiel werden wir einen fiktiven Fahrplan für die nicht existierende Fluglinie „FlyShy Air“ von Tübingen nach Hamburg erstellen.

Wir benötigen einen Kopf für die Tabelle, in der für die einzelnen Spalten die Flugnummer, Abflugzeit und Ankunftszeit steht. Es werden 3 Flüge angeboten.

Die fertige Tabelle hat folgendes Aussehen.

Flugnummer Abflugzeit Ankunft
HSA2843 11:20 13:10
HSA8344 15:50 17:00

Tabellen schrittweise aufbauen

Gehen wir nun von innen nach außen vor:

Jede Zelle einer Tabelle hat ihren entsprechenden HTML-TAG. Dieser lautet <td> und steht für „table data“ (und als End-TAG dann das Gegenstück </td>)

Im Beispiel für die Flugnummer HSA2843 steht also im HTML:

<td> HSA2843 </td>

Kommt eine weitere Zelle in dieser Zeile hinzu, wird diese Konstruktion einfach wiederholt. Wir erstellen die Abflugzeit nach der Flugnummer:

<td> HSA2843 </td>
<td> 11:20 </td>

Um jetzt festzulegen, dass es sich hierbei um eine Zeile handelt, werden die Tabellenzellen von einem <tr> und </tr> umschlossen. Alles was sich zwischen dem Anfangs-TAG für eine Tabellenzeile <tr> und dem End-TAG </tr> befindet, gehört zu dieser Zeile. Der HTML-TAG <tr> steht für „table row“

<tr>
  <td> HSA2843 </td>
  <td> 11:20 </td>
</tr>

Hier ist es wichtig sauber einzurücken, um den Überblick zu behalten. Dem HTML-Code ist es eigentlich egal und alles könnte hintereinander stehen – die saubere Schreibweise ist für einen selber.

Jetzt fehlt für die einfachste Art von Tabelle nur noch die Angabe, wo die Tabelle anfängt und aufhört. Dafür gibt es den HTML-TAG <table> und den End-TAG </table>.

<table>
  <tr>
    <td> HSA2843 </td>
    <td> 11:20 </td>
  </tr>
</table>

Wenn wir uns nun die Tabelle im Browser ansehen, sehen wir nur die Inhalte. Während der Entwicklung der Tabelle ist es aber noch sinnvoll, den Rahmen der Tabelle sichtbar zu machen. Dazu wird über das Attribut bei dem HTML-TAG <table> der Rahmen „eingeschaltet“. Das geschieht über <table border="1">

Unsere erste kleine Tabelle:

<table border="1">
  <tr>
    <td> HSA2843 </td>
    <td> 11:20 </td>
  </tr>
</table>

Und als Ausgabe im Browser sieht es dann so aus:

HSA2843 11:20

Das mit dem Rahmen sollte nur in der Entwicklung gemacht werden. Der Rahmen ist strenggenommen Design und mit der Maxime von Trennung zwischen Inhalt und Design sollte der Rahmen später über CSS gesetzt werden.

Wir sehen im Browser, dass die Breite der einzelnen Spalten sich nach Inhalt der Zellen und deren benötigten Platz richtet.

Aufgabe zu Tabellen: Ergänzen Sie die Tabelle um die Spalte mit der Ankunftszeit und eine weitere Reihe für die Flugnummer HSA8344. Das fertige Ergebnis sollte dann wie folgt aussehen:

HSA2843 11:20 13:10
HSA8344 15:50 17:00

Lösungsweg zum Aufgabe Tabelle erstellen

Im folgenden Kapitel kommen wir zu Kopfzeile für Tabellen und erstellen dann auch einen Fußbereich.

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2024   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos • Impressum • Datenschutzerklärung
weitere eigene Projekte: