0 2810

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:

<html>
 <body>
 <table width="30%" border="1">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

Ergebnis Internet Explorer:

leere Tabelle im internet Explorer

leere Tabelle im internet Explorer

Ergebnis Firefox:

leere Tabelle im Firefox

leere Tabelle im Firefox

Ergebnis Opera:

leere Tabelle im 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:

<html>
 <body>
 <table width="30%" border="0">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

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:

<html>
 <body>
 <table width="30%" border="1" frame="void">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

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

Tabelle im Internet Explorer Frame=void

Das Ergebnis im Firefox:

Tabelle im Firefox Frame=void

Tabelle im Firefox Frame=void

und das Ergebnis im Opera:

Tabelle im Opera Frame=void

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:

<html>
 <body>
 <table width="30%" border="1" frame="above">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

Das Ergebnis im Internet Explorer:

Tabelle im Internet Explorer Frame=above

Tabelle im Internet Explorer Frame=above

Ergebnis im Firefox:

Tabelle im Firefox Frame=above

Tabelle im Firefox Frame=above

Ergebnis im Opera:

Tabelle im Opera Frame=above

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:

<html>
 <body>
 <table width="30%" border="1" frame="below">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

Das Ergebnis im Internet-Explorer:

Tabelle im Internet Explorer Frame=below

Tabelle im Internet Explorer Frame=below

Das Ergbenis im Firefox:

Tabelle im Firefox Frame=below

Tabelle im Firefox Frame=below

Das Ergebnis im Opera:

Tabelle im Opera Frame=below

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:

<html>
 <body>
 <table width="30%" border="1" frame="rhs">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

Das Ergebnis im Internet-Explorer:

Tabelle im Internet Explorer Frame=rhs

Tabelle im Internet Explorer Frame=rhs

Das Ergebnis im Firefox:

Tabelle im Firefox Frame=rhs

Tabelle im Firefox Frame=rhs

Das Ergebnis im Opera:

Tabelle im Opera Frame=rhs

Tabelle im Opera Frame=rhs

Um den linken Tabellenrahmen anzeigen zu lassen weisen wir dem frame-Element den Wert lhs zu:

Beispielcode HTML:

<html>
 <body>
 <table width="30%" border="1" frame="lhs">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

Das Ergbnis im Internet-Explorer:

Tabelle im Internet Explorer frame=lhs

Tabelle im Internet Explorer frame=lhs

Das Ergebnis im Firefox:

Tabelle im Firefox frame=lhs

Tabelle im Firefox frame=lhs

Das Ergebnis im Opera:

Tabelle im Opera frame=lhs

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:

<html>
 <body>
 <table width="30%" border="1" frame="vsides">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

Das Ergebnis im Internet Explorer:

Tabelle im Internet Explorer frame=vsides

Tabelle im Internet Explorer frame=vsides

Das Ergebnis im Firefox:

Tabelle im Firefox frame=vsides

Tabelle im Firefox frame=vsides

Das Ergebnis im Opera:

Tabelle im Opera frame=vsides

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:

<html>
 <body>
 <table width="30%" border="1" frame="hsides">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

Das Ergebnis im Internet Explorer:

Tabelle im Internet Explorer frame=hsides

Tabelle im Internet Explorer frame=hsides

Das Ergebnis im Firefox:

Tabelle im Firefox frame=hsides

Tabelle im Firefox frame=hsides

Das Ergebnis im Opera:

Tabelle im Opera frame=hsides

Tabelle im Opera frame=hsides