3.7.Tabellen

3.7.Tabellen

Tabellen werden durch das Element <table>...</table> eingeschlossen.
Jede Zeile wird durch <tr>...</tr> (table row) eingeschlossen.
Jede Zelle wird durch <td>...</td> (table data) eingeschlossen.

Gibt man keine Eigenschaften für die Formatierung an, so wird die Tabelle ohne Rahmen (!) mit Ausrichtung links unten, Hintergrundfarbe weiß und minimaler an den Inhalt angepassten Größe gezeichnet.

Beispiel einer Tabelle ohne Formatierung in Standardausgabe:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.7.1</title>
        </head>
        <body>
         <table>
          <tr>
           <td>Deutsch</td>
           <td>Italienisch</td>
          </tr>
          <tr>
           <td>Januar</td>
           <td>Gennaio</td>
          </tr>
          <tr>
           <td>Februar</td>
           <td>Febbraio</td>
          </tr>
         </table>
        </body>
       </html>

Die Formatierung der einzelnen Zellen steuert man am einfachsten zentral durch Formatvorlagen im head-Element. Alle Formatvorlagen werden durch das style-Element <style type="text/css">...</style> eingeschlossen. Eine Formatvorlage besteht aus dem jeweiligen Tabellenelement mit seinen Eigenschaften in geschweiften Klammern.

<style type="text/css">
table {align; }
td { border; border-collapse; background-color; font; text-align; vertical-align; padding }

Die möglichen Werte dieser Eigenschaften sind in den folgenden Tabellen aufgelistet. Die Werte werden mit einem Doppelpunkt an die entsprechende Eigenschaft gehängt und durch Leerzeichen voneinander getrennt. Den Abschluss bildet immer ein Semikolon: Eigenschaft:Wert Wert Wert;. Wichtig und relativ neu ist die Eigenschaft border-collapse. Der wert collapse unterdrückt die in HTML früher unvermeidbare doppelte Zellenbegrenzung und erzeugt eine Tabelle im gewohnten WORD-Stil. Mit separate erhält jede Zelle einen extra Rahmen.

Eigenschaft mögliche Werte
align left, center, right
border border-style border-width border-color
border-collapse separate, collapse
background-color rgb(x%,y%,z%)
font font-style font-weight font-size font-family
text-align left, center, right, justify
vertical-align top, middle, bottom
padding 2px, 3px, 4px, usw.

Die möglichen Werte der Untereigenschaften von border sind:

Eigenschaft mögliche Werte
border-style double, solid, dashed, dotted
border-width 2px, 3px, 4px, usw.
border-color rgb(x%,y%,z%)

Die möglichen Werte der Untereigenschaften von font sind:

Eigenschaft mögliche Werte
font-style italic, normal
font-weight bold, normal
font-size 8pt, 10pt, 12pt, usw.
font-family Times New Roman, Arial, Courier, usw.

Beispiel einer formatierten Tabelle:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.7.2</title>
         <style type="text/css">
         table {border-collapse:collapse; 
                background-color:rgb(100%,100%,0%);}
         td { border:solid 2px rgb(0%,0%,0%); 
              text-align:center; 
              vertical-align:middle }
         </style>
        </head>
        <body>
         <table>
          <tr>
           <td>Deutsch</td>
           <td>Italienisch</td>
          </tr>
          <tr>
           <td>Januar</td>
           <td>Gennaio</td>
          </tr>
          <tr>
           <td>Februar</td>
           <td>Febbraio</td>
          </tr>
         </table>
        </body>
       </html>

Aufgabe 3.7.1

Formuliere den Quelltext für das folgende HTML-Dokument und speichere es unter dem Titel Aufgabe 3.7.1

Aufgabe3.7.1.