TV Neuhof – Handball

… wo Handball Spaß macht

  • Kategorien

  • Archive

Tips und Tricks zur Formatierung

Hier findet Ihr einige Tips und Tricks um Eure Berichte zu formatieren.

  1. Tabellen
  • Tabellen werden oft zum Formatieren/Positionieren verwendet. Um diese wie hier beschrieben zu definieren, müßt Ihr von “Visuell” auf “HTML” umschalten. Dies kann beliebig oft geschen. Es geht nichts verloren.
  • Im HTML spricht man immer von Tags. Diese stehen immer zwischen < und >.
    – <table> = Anfang der Tabelle; </table> = Ende der Tabelle
    – <tr> = Anfang einer Zeile; </tr> = Ende einer Zeile
    – <td> = Anfang einer Spalte; </td> = Ende einer Spalte
    – Eine Tabelle mit 2 Zeilen und 3 Spalten:
    <table>
    <tr>
    <td>Zeile1, Spalte1</td>
    <td>Zeile1, Spalte2</td>
    <td>Zeile1, Spalte3</td>
    </tr>
    <tr>
    <td>Zeile2, Spalte1</td>
    <td>Zeile2, Spalte2</td>
    <td>Zeile2, Spalte3</td>
    </tr>
    </table>
    – So sieht’s aus:

    Zeile1, Spalte1 Zeile1, Spalte2 Zeile1, Spalte3
    Zeile2, Spalte1 Zeile2, Spalte2 Zeile2, Spalte3
  • Ok, macht noch nicht viel her. Daher erweitern wir das <table> Tag mit ‘border’ um einen Rahmen zu erhalten.
    <table border=1>
    …
    – So sieht’s aus:

    Zeile1, Spalte1 Zeile1, Spalte2 Zeile1, Spalte3
    Zeile2, Spalte1 Zeile2, Spalte2 Zeile2, Spalte3
  • Zur Positionierung können die Tags <table> und <td> mit ‘align’ erweitert werden. Dabei gibt es ‘center’, ‘left’ und ‘right’.
    <table border=1 align=”center”>
    …
    – So sieht’s aus:

    Zeile1, Spalte1 Zeile1, Spalte2 Zeile1, Spalte3
    Zeile2, Spalte1 Zeile2, Spalte2 Zeile2, Spalte3
  • Im HTML werden die Spaltenbreiten von den Inhalten bestimmt. Möchte man dieses ändern, so muß man einmal den betreffenden <td> Tag in der ersten Zeile mit ‘width’ erweitern.
    <table>
    <tr>
    <td>Zeile1, Spalte1</td>
    <td width=”150″>Zeile1, Spalte2</td>
    <td>Zeile1, Spalte3</td>
    </tr>
    …
    – So sieht’s aus:

    Zeile1, Spalte1 Zeile1, Spalte2 Zeile1, Spalte3
    Zeile2, Spalte1 Zeile2, Spalte2 Zeile2, Spalte3
  • Hier eine zentrierte Tabelle mit Rahmen und verschiedenen Spaltenausrichtungen.
    <table border=1 align=”center”>
    <tr>
    <td width=”120″>Zeile1, Spalte1</td>
    <td width=”120″ align=”center”>Zeile1, Spalte2</td>
    <td width=”120″ align=”right”>Zeile1, Spalte3</td>
    </tr>
    <tr>
    <td align=”center”>Zeile2, Spalte1</td>
    <td align=”right”>Zeile2, Spalte2</td>
    <td>Zeile2, Spalte3</td>
    </tr>
    </table>
    – So sieht’s aus:

    Zeile1, Spalte1 Zeile1, Spalte2 Zeile1, Spalte3
    Zeile2, Spalte1 Zeile2, Spalte2 Zeile2, Spalte3