Tabellenrahmen und -ränder in CSS
Individuell gestaltete Tabellen gehören seit CSS der Vergangenheit ein. Dieser Artikel zeigt, wie Sie jede Tabellenzelle mit einer anderen Formatierung versehen können.
Jede Tabellenzelle bekommt zu diesem Zweck eine eigene CSS-Klasse, in der die Eigenschaften definiert werden.
<html>
<head>
<style type="text/css">
<!--
.Zelle1 {
border: 15px none maroon;
}
.Zelle2 {
border: 15px dotted olive;
}
.Zelle3 {
border: 15px dashed green;
}
.Zelle4 {
border: 15px solid navy;
}
.Zelle5 {
border: 15px double teal;
}
.Zelle6 {
border: 15px groove gray;
}
.Zelle7 {
border: 15px ridge silver;
}
.Zelle8 {
border: 15px inset red;
}
.Zelle9 {
border: 15px outset lime;
}
-->
</style>
<title>Tabellenrahmen und -ränder</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="50">
<tr>
<td class="Zelle1"> </td>
<td class="Zelle2"> </td>
<td class="Zelle3"> </td>
</tr>
<tr>
<td class="Zelle4"> </td>
<td class="Zelle5"> </td>
<td class="Zelle6"> </td>
</tr>
<tr>
<td class="Zelle7"> </td>
<td class="Zelle8"> </td>
<td class="Zelle9"> </td>
</tr>
</table>
</body>
</html>
Experimentieren Sie mit den verschiedenen Parametern des CSS-Befehls border und entdecken Sie so die unterschiedlichsten Gestaltungsmöglichkeiten für die Rahmen der einzelnen Tabellenzellen.
Kategorie: CSS
