Un-Logisches

Einerseits habe ich Euch (und werde ich auch in Zukunft) sehr ans Herz gelegt, Formatierungen wie Fettdruck, die Schriftgrösse o. ä. nicht in HTML, sondern mit CSS zu machen. Andererseits findet Ihr die sogenannten physikalischen Tags noch in vielen Codes, und in bestimmten Fällen können sie sogar ganz praktisch sein. Daher werden sie hier kurz besprochen.

Alle in diesem Abschnitt vorgestellten Tags sind Inline-Tags. Keine weitere Erläterung bedürfen wohl die Tags b, i und u. Sie erzeugen Fettdruck (bold), Kursivschrift (italics) und unterstrichenen Text (underlined). Außerdem gibt es folgende Tags

• tt erzeugt eine sogenannte diktengleiche oder Teletyper-Schrift. Das sieht dann so aus.
• s und strike erzeugen durchgestrichenen Text, wie diesen hier.
• big bzw. small machen den enthaltenen Text grösser bzw. kleiner als in der Umgebung.
• sup und sub benutzt man zum ^Hochstellen und _Tiefstellen von Text.

Wie div bei den Blockelementen, gibt es auch ein gewissermaßen «neutrales» Inline-Element, das oft für Formatierungen mit CSS benutzt wird. Sein Name ist span

Hier wird <span style="color:red">mit CSS</span> formatiert.

Was das style-Attribut bewirkt, soll an dieser Stelle noch außen vor bleiben.

Darüber hinaus gibt es natürlich noch eine Reihe von logischen Inline-Tags, die aber nicht oft verwendet werden. Darunter gibt es em zum Hervorheben, kbd, um Tastatureingaben zu kennzeichnen oder dfn für Definitionen. Im Normalfall werdet Ihr solche Dinge mit span-Tags und passenden CSS-Formatierungen lösen.

Zeilen, Spalten, Zellen

Die meisten Tabellen, denen Ihr beim Surfen auf Webseiten begegnet, werdet Ihr vermutlich gar nicht als solche erkennen. Denn in HTML benutzt man Tabellen nicht nur, um «richtige» Tabellen zu erstellen, sondern auch für sogenannte blinde Tabellen. Mit diesen könnt Ihr Texte, Grafiken und andere Elemente auf Eurer Webseite zueinander anordnen.

Tabellen sind Blockelemente, die Ihr mit Hilfe des table-Tags definiert. Innerhalb eines solchen table-Elements sind die einzelnen Zeilen der Spalte in Form von tr-Tags ('table row') definiert. Diese tr-Tags wiederum enthalten die Zellen in der Zeile als td-Tags ('table data'). Als Beispiel zeigt folgender Code eine Tabelle mit zwei Zeilen mit je zwei Zellen und gleich daneben, was der Browser daraus macht

<table>
  <tr>

    <td>Eins</td>
    <td>Zwei</td>
  </tr>
  <tr>
    <td>Drei</td>

    <td>Vier</td>
  </tr>
</table>

Eine solche Tabellenzelle kann beliebige Inhalte enthalten, sowohl Inline- als auch Blockelemente. Was Ihr oben seht, ist beispielsweise eine Tabelle mit einer Zeile und zwei Zellen. Eine Zelle enthält den Quelltext, die andere das konkrete Beispiel (also die Tabelle). Damit habt Ihr gleich ein Beispiel für blinde Tabellen, mit denen Ihr die Elemente auf Eurer Webseite anordnen könnt.

Der table-Tag hat einige Attribute, mit denen Ihr das Aussehen Eurer Tabelle beeinflussen könnt. Mit den beiden Attributen cellspacing und cellpadding legt Ihr die Abstände in der Tabelle fest. cellspacing bestimmt den Abstand zwischen den Tabellenzellen (in Pixel), cellpadding den Abstand zwischen dem Inhalt der Tabellenzellen und dem Rand (auch in Pixel). Das Attribut border legt die Breite der Tabellenlinien fest (ebenfalls in Pixel). Außerdem könnt Ihr festlegen, welche Tabellenlinien gezeichnet werden sollen und welche nicht. Dabei ist frame für den Außenrahmen zuständig, rules für die inneren Linien. Dabei sind folgende Werte möglich

• frame
• box zeichnet alle Außenlinien.
• void zeichnet keine Außenlinien.
• above zeichnet nur die obere Linie.
• below zeichnet nur die untere Linie.
• hsides zeichnet die horizontalen Linien, also oben und unten.
• vsides zeichnet die vertikalen Linien, also links und rechts.
• lhs zeichnet nur die linke Line ('left hand side').
• rhs zeichnet nur die rechte Linie ('right hand side').
• rules
• none zeichnet alle inneren Tabellenlinien.
• rows trennt nur die Zeilen, aber nicht die Spalten.
• cols trennt nur die Spalten, aber nicht die Zeilen.
• groups trennt nur die Tabellengruppen (Kopf, Körper, Fuß). Auf die Tabellengruppen will ich nicht näher eingehen, weil sie in der Praxis keine große Rolle spielen.
• all zeichnet alle inneren Tabellenlinien.

Für weitere Formatierungen (Hintergrundbilder, Textausrichtung, ...) steht hier wie gewohnt der Verweis auf CSS.

Eine interessante Möglichkeit ist es, Zellen miteinander zu verbinden. Dazu gebt Ihr einfach im td-Tag mit dem Attribut colspan bzw. rowspan an, über wieviele Spalten bzw. Zeilen sich die Zelle erstrecken soll

Eine Über- oder Unterschrift könnt Ihr Eurer Tabelle mit dem caption-Tag mitgeben. Dieser Tag muß direkt nach dem öffnenden table-Tag stehen. Standardmäßig wird der Text im caption-Element oberhalb der Tabelle dargestellt; mit Hilfe von CSS könnt Ihr die Überschrift auch unter oder neben die Tabelle setzen.