Ändern von Rahmenfarben in Tabellen mit HTML
Farbänderung der Elemente in Tabellen
Die Browser ermöglichen eine Farbänderung der Elemente im Tabellenrahmen bei Verwendung der bordercolor-, bordercolorlight- und bordercolordark-Attribute. Jedes dieser Attribute erhält entweder eine Farbennummer oder eine Farbbezeichnung und kann in <tables>, <td> oder <th> verwendet werden. Wie bei Hintergrundfarben, überdecken die Rahmenfarben jeweils die Farben des umschließenden Elements. Alle drei Attribute benötigen das abschließende <table>-Tag zur Erstellung des border-Attributs.
Diese Erweiterungen wurden unterstützt, außer
bordercolor. Alle drei Attribute gelten als verworfen und wurden von Style Sheets ersetzt.
bordercolorlegt die Rahmenfarbe fest, die den 3D-Look des Standardrahmens überdeckt.bordercolordarklegt die dunklen Komponenten des 3D-Looks des Rahmens fest und platziert diese außen rechts im Tabellenrahmen.bordercolorlightlegt die hellen Komponenten des 3D-Looks des Rahmens fest und platziert diese innen links im Tabellenrahmen.
In Abbildung sehen Sie ein Beispiel einer Tabelle mit einem 10 Pixel Rahmen. Um die Attribute zu demonstrieren, wurden bordercolorlight und bordercolordark hinzugefügt, um dem dickeren Tabellenrahmen einen 3D-Look zu geben. Die erste Zeile des Codes wurde wie im folgenden Beispiel geändert:
<table border="10" bordercolorlight="red" bordercolordark="black" bgcolor="#ffffff" width="50%">
Diese Code-Zeile ist etwas lang, finden Sie nicht?
Das Lesen des Codes wird Ihnen leichter fallen, wenn Sie jedes Attribut in eine separate Zeile setzen, wie Sie im folgenden Beispiel sehen können. Dieser Code funktioniert genauso wie der andere. Denken Sie nur daran, dass die abschließende Klammer (>) nur einmal, nach dem letzten Attribut, erscheinen darf.
<table border="10"
bordercolorlight="red"
bordercolordark="black"
bgcolor="#ffffff"
width="50%">
Der vollständige HTML-Code für diesen Beispiel
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-utf-8" />
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h1>
Ändern von Rahmenfarben
</h1>
<head>
<title>HTML - Lernen</title>
</head>
<table border="10" bordercolorlight="red" bordercolordark="black" bgcolor="#ffffff" width="50%">
<tr align="center">
<td bgcolor="#000000" width="33%"><img src="redcircle.png" alt="red circle" width="75" height="75"></td>
<td width="33%"><img src="redcircle.png" alt="red circle" width="75" height="75"></td>
<td bgcolor="#000000" width="33%"><img src="redcircle.png" alt="red circle" width="75" height="75"></td>
</tr>
<tr align="center">
<td><img src="blackcircle.png" alt="black circle" width="75" height="75"></td>
<td bgcolor="#000000">
<br />
</td>
<td><img src="blackcircle.png" alt="black circle" width="75" height="75"></td>
</tr>
<tr align="center">
<td bgcolor="#000000">
<br />
</td>
<td><img src="blackcircle.png" alt="black circle" width="75" height="75">
<br />
</td>
<td bgcolor="#000000">
<br />
</td>
</tr>
</table>
</body>
</html>
