WebTech - Wolf 5
Tabellen und Hyperlinks
Tabellen und Hyperlinks
Fichier Détails
| Cartes-fiches | 12 |
|---|---|
| Langue | Deutsch |
| Catégorie | Informatique |
| Niveau | Autres |
| Crée / Actualisé | 17.01.2021 / 07.02.2021 |
| Attribution de licence | Non précisé (Jürgen Wolf) |
| Lien de web |
https://card2brain.ch/box/20210117_webtech_wolf_5
|
| Intégrer |
<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>
...
