WebTech - Wolf 5
Tabellen und Hyperlinks
Tabellen und Hyperlinks
Kartei Details
| Karten | 12 |
|---|---|
| Sprache | Deutsch |
| Kategorie | Informatik |
| Stufe | Andere |
| Erstellt / Aktualisiert | 17.01.2021 / 07.02.2021 |
| Weblink |
https://card2brain.ch/box/20210117_webtech_wolf_5
|
| Einbinden |
<iframe src="https://card2brain.ch/box/20210117_webtech_wolf_5/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Struktur einer Tabelle: <table>
- Tabelle
Struktur einer Tabelle: <tr>
- Tabellenzeile
Struktur einer Tabelle: <td> und <th>
- <td> = Tabellenzelle
- <th> = Tabellenkopfzelle für Überschrift
Attribute
- colspan
- rowspan
- scope
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
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
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>...
Grundsäztliche facts zur Tabelle in HTML
- 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)
- 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>
...
Hyperlinks mit <a>- Tag
- <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
Wie kann ich eine E-Mail-Adresse verlinken?
- <a href="mailto:test@hotmail.com"<E-mail senden</a>
Wie kann ich pdf und word Dateien verlinken?
<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>
Wozu dient ein Anker und wie sieht er aus?
- 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>
