Der HTML Workshop geht jetzt mit Tabellen und Listen weiter…
HTML Tabellen:
Statt erst Schritt für Schritt die einzelnen Tabellen-Elemente zu erläutern, gibt es hier erst mal direkt das professionellste Tabellen-Grundgerüst…
<table border="1">
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody</td>
<td>tbody</td>
<td>tbody</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
</tr>
</tfoot>
</table>Der Quelltext für die Tabelle sollte in einen neuen Artikel mit jeweiligen Tagesdatum eingefügt werden…Der so veränderte HTML Quelltext kann auch gerne nochmal durch den HTML Validator geschickt werden…
Der HTML Validator hat hier leider einiges zu meckern…Die Angabe zu “table border“ habe ich nur gesetzt, damit man die Tabelle auch sieht. Natürlich wird das später per CSS gestaltet…
Die Tabelle wird auch nicht in ein p-Element gesetzt, denn Blockelemente dürfen nicht verschachtelt werden.
Die geordnete Liste:
<ol>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ol>Die ungeordnete Liste:
<ul>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ul>Der Unterschied zwischen beiden Listen liegt also nur in den Elementen „ol“ und „ul“.
Verschachtelung von Listen:
Der Aufbau von verschachtelten Listen sieht so aus:
<0l>
<li>Listeneintrag 1
<ol>
<li>Untereintrag Ebene 1</li>
</ol>
</li>
<li>Listeneintrag 2</li>
</ol>Hier ist eine geordnete Liste in eine geordnete Liste verschachtelt. Der Listeneintrag, also das Listenelement „li“ wird nicht geschlossen, wenn eine Verschachtelung beginnen soll.
Die beiden li-Elemente sind hier makiert und zeigen, wo das Element geöffnet und wo es geschlossen wird.
Es ist auch möglich eine ungeordnete Liste in eine ungeordnete Liste zu verschachteln.
<ul>
<li>Listeneintrag 1
<ul>
<li>Untereintrag Ebene 1</li>
</ul>
</li>
<li>Listeneintrag 2</li>
</ul>Es lassen sich auch beide Listen mischen. Eine ungeordnete Liste kann auch in eine geordnete verschachtelt werden und umgekehrt.
<ul>
<li>Listeneintrag 1
<ol>
<li>Untereintrag Ebene 1</li>
</ol>
</li>
<li>Listeneintrag 2</li>
</ul>Auch die HTML Listen werden per CSS gestaltet. Für die Navigation wurde das bei den Layouts bereits genutzt. Auch die Verschachtelung von Listen wurde bereits genutzt….