Der fertige Effekt ist wie folgt:
2. Verwenden Sie die Attribute dunkler Rand (bordercolordark) und heller Rand (bordercolorlight) der Tabelle, um eine Tabelle mit dünnen Linien zu erstellen:
Oder drücken Sie Strg+Alt+T, um die Tabelle einzufügen und sie wie im Dialogfeld gezeigt einzustellen (Elemente mit roten Kästchen sind fixiert, andernfalls haben sie keine Wirkung).
Nachdem Sie die Tabelle ausgewählt haben, drücken Sie F9, um die Bedienfeldgruppe „Tag-Inspektor“ zu erweitern und legen Sie die Einstellungen im Bedienfeld „Attribute“ wie unten gezeigt fest:
Nach der Fertigstellung sieht es so aus:
3. Stellen Sie das CSS-Attribut „border-collapse“ der Tabelle auf „collapse“ ein: Drücken Sie Strg+Alt+T, um die Tabelle einzufügen. Die Einstellung des Dialogfelds ist dieselbe wie bei Methode 2. Wählen Sie die Tabelle aus und legen Sie die Rahmenfarbe der Tabelle im Eigenschaftenfenster fest:
Drücken Sie F9, um das Bedienfeld „Tag-Inspektor“ zu erweitern, und geben Sie „border-collapse:collapse;“ in „style“ im Bedienfeld „Attribute“ ein.
Nach der Fertigstellung sieht es so aus:
Hinweis: Die mit Methode 3 erstellte Thin-Line-Tabelle ist nur für IE5+ geeignet. Die kompatibelste Methode ist Methode 1. Methode 2 ist keine Thin-Line-Tabelle im engeren Sinne.
Tipp: In Methode 1 können Sie mithilfe von CSS die Hintergrundfarbe von Tabellenzellen definieren, um den Codeumfang zu reduzieren:
<Stil>
.thin{Hintergrund:#000000}
.thin td{background:#FFFFFF}
</style>
<table width="200" border="0" cellpacing="1" cellpadding="0" class="thin">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>