Zellenausrichtung

Text innerhalb einer HTML-Tabelle ausrichten

  • Erstelle eine HTML-Datei mit folgendem Quellcode:

<html>
<head>
<title>Die sechste Lektion</title>
</head>
<body bgcolor="#FFCC66" text="#000000">
<table border="1" cellpadding="2" cellspacing="0" width="100%">
  <tr>
    <td align="left">align=left</td>
    <td align="center">align=center</td>
    <td align="right">align=right</td>
  </tr>
</table>


<table border="1" cellpadding="2" cellspacing="0" width="100%">
  <tr>
    <td valign="top" height="60">valign=top</td>
    <td valign="middle">valign=middle</td>
    <td valign="bottom">valign=bottom</td>
  </tr>
</table>
</body>
</html>~

  • Benenne die Datei *lektion65.htm*
  • Öffne die Datei *lektion65.htm* im Browser. Das sieht wohl so in der Richtung aus:

Du hast folgende Attribute in den Table-Tag eingefügt:

  • <td align="left">~
    Die horizontale Ausrichtung des Zelleninhalts wird mit Align (englisch = Ausrichtung) angegeben. Wie bei der Textformatierung ist der Wert
    left = linksbündig
    right = rechtsbündig
    center = zentriert
  • <td valign="top">~
    Dieses Attribut (vertical align) sorgt für die vertikale Ausrichtung in der Zelle. Die Werte hier:
    top = oben bündig
    middle = mittig
    bottom = unten bündig.
    Wenn Du valign nicht definierst, hat die Zelle standardmäßig valign="middle".
  • Innerhalb der Zellen kannst Du darüber hinaus den Text genauso formatieren, wie außerhalb von Tabellen.