Tabellen in HTML – Tutorial 2 der Rahmen
Rahmen der Tabellen in HTML – Tutorial
Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke einer Tabelle in HTML ändern kann. In diesem Tutorial gehe ich näher auf den Rahmen ein.
Viele Webdesigner und auch HTML-Programme wie Frontpage und Co. nutzen gerne Tabellen, um Ihr Seitenlayout damit zu gestalten. Ich kann davon nur abraten. Dafür sind Tabellen nicht gedacht. Trotzdem sollte man die Möglichkeiten kennen, die einem HTML im Umgang mit Tabellen bieten.
Wir starten mit einer Standardtabelle: Rahmendicke: 1, Tabellenbreite: 30%, alle Zellen mit gefüllt:
Beispielcode HTML:
<pre><html>
<body>
<table width="30%" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Ergebnis Internet Explorer:
leere Tabelle im internet Explorer
Ergebnis Firefox:
leere Tabelle im Firefox
Ergebnis Opera:
leere Tabelle im Opera
Manchmal möchte man bei seiner Tabelle überhaupt keinen Rahmen haben.
Den Rahmen kann man mit border=“0″ ausblenden.
Beispielcode HTML:
<pre><html>
<body>
<table width="30%" border="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Doch das möchten wir in diesem Tutorial nicht machen. Wir wollen uns weiter mit dem Rahmen beschäftigen. Wenn Sie sich die obigen Screens genauer ansehen, dann können Sie erkennen, daß um die einzelnen Zellen auch nochmal ein Rahmen gezogen wurde. Der Tabellenrahmen. Diesen Rahmen können wir mit dem Frame-Element ansprechen. Um den Rahmen der Tabelle (und nicht der Zellen) verschinden zu lassen setzen wir für das frame-Element den Wert void. Void ist bekannt aus verschiedenen Programmiersprachen und steht für ein leeres Ergebnis.
Beispielcode HTML:
<pre><html>
<body>
<table width="30%" border="1" frame="void">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
nun beginnen die Ergebnisse sich deutlich zu unterscheiden:
unschön ist das Ergebnis im Internet Explorer. Es sieht irgendwie fehlerhaft aus. Das hängt damit zusammen, daß der Internet Explorer die Einstellungen für den Tabellenrahmen auch auf die Umrandung der Zellen anwendet:
Tabelle im Internet Explorer Frame=void
Das Ergebnis im Firefox:
Tabelle im Firefox Frame=void
und das Ergebnis im Opera:
Tabelle im Opera Frame=void
Um den Tabellenrahmen nur für den oberen Rand anzuzeigen, muss man dem Frame Element den Wert above zuweisen:
Beispielcode HTML:
<pre><html>
<body>
<table width="30%" border="1" frame="above">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Das Ergebnis im Internet Explorer:
Tabelle im Internet Explorer Frame=above
Ergebnis im Firefox:
Tabelle im Firefox Frame=above
Ergebnis im Opera:
Tabelle im Opera Frame=above
Das gleiche kann man nun für den unteren Rahmen machen. Um nur den unteren Tabellenrahmen anzeigen zu lassen müssen wir dem Frame Element den Wert below zuweisen:
Beispielcode HTML:
<pre><html>
<body>
<table width="30%" border="1" frame="below">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Das Ergebnis im Internet-Explorer:
Tabelle im Internet Explorer Frame=below
Das Ergbenis im Firefox:
Tabelle im Firefox Frame=below
Das Ergebnis im Opera:
Tabelle im Opera Frame=below
Um nur den rechten Rahmen anzeigen zu lassen, weisen wir dem frame Element den Wert rhs zu (rhs ist die Abkürzung von right hand side:
Beispielcode HTML:
<pre><html>
<body>
<table width="30%" border="1" frame="rhs">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Das Ergebnis im Internet-Explorer:
Tabelle im Internet Explorer Frame=rhs
Das Ergebnis im Firefox:
Tabelle im Firefox Frame=rhs
Das Ergebnis im Opera:
Tabelle im Opera Frame=rhs
Um den linken Tabellenrahmen anzeigen zu lassen weisen wir dem frame-Element den Wert lhs zu:
Beispielcode HTML:
<pre><html>
<body>
<table width="30%" border="1" frame="lhs">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Das Ergbnis im Internet-Explorer:
Tabelle im Internet Explorer frame=lhs
Das Ergebnis im Firefox:
Tabelle im Firefox frame=lhs
Das Ergebnis im Opera:
Tabelle im Opera frame=lhs
Man kann auch den rechten und den linken Rahmen gleichzeitig anzeigen lassen. Dazu müssen wir nur dem Frame Element den Wert hsides zuweisen.
Beispielcode HTML:
<pre><html>
<body>
<table width="30%" border="1" frame="vsides">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Das Ergebnis im Internet Explorer:
Tabelle im Internet Explorer frame=vsides
Das Ergebnis im Firefox:
Tabelle im Firefox frame=vsides
Das Ergebnis im Opera:
Tabelle im Opera frame=vsides
Um den oberen und den unteren Rahmen gleichzeitig anzeigen zu lassen müssen wir nur dem Frame Element den Wert vsides zuweisen:
Beispielcode HTML:
<pre><html>
<body>
<table width="30%" border="1" frame="hsides">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Das Ergebnis im Internet Explorer:
Tabelle im Internet Explorer frame=hsides
Das Ergebnis im Firefox:
Tabelle im Firefox frame=hsides
Das Ergebnis im Opera:
Tabelle im Opera frame=hsides
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
