WebTech - Wolf 5

• Tabellenzeile

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

Attribute

• colspan
• rowspan
• scope

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

• 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

<caption>

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

<figcaption>

• Tabellenbeschriftun am Ende der Tabelle

Beispiel:

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

• 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)

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

...
 

• <a href="http://google.ch">Verlagsseite</a>
• Hyperlinks werden standardmässig blau angezeigt, dies kann im CSS formatiert werden
• möchte man zu einer Subpage verweisen, gibt man nur die relative URL an

Attribute:

• download: man gibt dadurch an, dass man einen Download anbietet
• href: URL Angaben, zu der der Link führt
• hreflang: Sprache des verlinkten Dokuments angeben
• media: Angaben zu Medien
• rel: vgl. <link>
• target
  • _blank:neues Fenster/Tab
  • _self:aktuelels Fenster
  • ...
• type

• <a href="mailto:[email protected]"<E-mail senden</a>

<a href="jahresumsatz.pdf">Jahresumsatz 2018</a>

oder mit Attribut title

<a title="Öffnet die PDF-Datei mit dem Jahresumsatz von 2018" href="jahresumsatz.pdf">Jahresumsatz 2014 (PDF, 4MB)</a>

oder mit Attribut download

<a href="jahresumsatz.pdf" download="jahresumsatz.pdf">Jahresumsatz 2018</a>

• mit dem globalen Attribut id kann man einen ANker setzen
• dieser Anker kann mit dem gewöhnlichen <a>-Tag angesprochen werden und somit als Sprungmarke verwendet werden (Page up, Page down)

Beispiele

• <h1 id="ankername"<Überschrift xyz</h1>
• <a href="#ankername">zur Überschrift xyz springen</a>