Lernkarten

Karten 12 Karten
Lernende 2 Lernende
Sprache Deutsch
Stufe Andere
Erstellt / Aktualisiert 17.01.2021 / 07.02.2021
Lizenzierung Keine Angabe     (Jürgen Wolf)
Weblink
Einbinden
0 Exakte Antworten 12 Text Antworten 0 Multiple Choice Antworten
Fenster schliessen

Struktur einer Tabelle: <table>

  • Tabelle
Fenster schliessen

Struktur einer Tabelle: <tr>

  • Tabellenzeile
Fenster schliessen

Struktur einer Tabelle: <td> und <th>

  • <td> = Tabellenzelle
  • <th> = Tabellenkopfzelle für Überschrift

Attribute

  • colspan
  • rowspan
  • scope
Fenster schliessen

Struktur einer Tabelle: <thead>, <tbody> und <tfoot>

  • <thead> = Tabellekopfbereich
  • <tbody> = Tabellenkörper
  • <tfoot> = Tabellenfuss

Hinweise:

  • Durch die Deklarierung spielt die Reihenfolge im HTML keine Rolle, denn der Browser kann es korrekt ordnen
Fenster schliessen

Struktur einer Tabelle: <colgroup> und <col>

  • col = Tabellenspalte
  • colgroup = Gruppe von Tabellenspalten

Hinweise:

  • dies dient der Formatierung, wenn man bspw. eine ganze Spalte mit blauem background-color machen möchte
  • muss zu Beginn direkt nach <table> deklariert werden

Beispiel:

<table>
    <colgroup>
          <col span="2" style="background-color:lightgrey;">
          <col style="background-color:snow;">
   </colgroup>
      <tr>
             <th>
               ...

 

Hier wurden die ersten zwei Spalten zu einer Gruppe zusammengefassen, 3. Spalte hat weissen Hintergrund

 

Fenster schliessen

Struktur einer Tabelle: <caption> bzw. <figcaption>

<caption>

  • Tabellenüberschrift/ - legende
  • diese Beschriftung kommt direkt nach <table>

<figcaption>

  • Tabellenbeschriftun am Ende der Tabelle

Beispiel:

<table>
   <caption>Browserstatistik 11/2018</caption>
  <tr>...

 

 

Fenster schliessen

Grundsäztliche facts zur Tabelle in HTML

Lizenzierung: Keine Angabe
  • heut zu tage werden Tabellen in HTML strukturiert, jedoch in CSS formatiert
  • wenn eine Leere Zelle ohne Inhalt angezeigt werden soll, muss <td></td> dennoch geschrieben werden
    (sonst wird die Tabelle nicht richtig angezeigt)
Fenster schliessen
  • Spalten und Zellen als solche deklarieren
  • Spalten und Zellen verbinden

Wie geht das?

  • damit man später Zellen und Spalten verbinden kann, müssen diese zuerst als solches deklariert werde

<table>
   <tr>
       <th></th>
       <th scope="col">Vormittag</th>
       <th scoope="col">Mittag</th>
       <th scope="col">Nachmitag</th>
   </tr>
   <tr>
       <th scope="row">Montag</th>
       <td colspan="2">Fotoshooting (outdoor)</td>
       <td>Workshop Bildbearbeitung</td>
   <tr>
       <th scope="row">Dienstag</th>
       <td rowspan="2"> Strassenfotografie (Stadt)</td>

...