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>
Formuliere den Quelltext für das folgende HTML-Dokument und speichere es unter dem Titel Aufgabe 3.7.1