Hallo,
habe hier ein kleines Skript, das eine Gitternetz-Tabelle erstellt. Die Zellen sind jeweils mit CSS selektier- und anpassbar. Speziell ging es um die Randfarbe der selektierten Zelle.
Rahmen und Rand sind in folgenden Text jeweils als das selbe anzusehen.
Kurz erklärt wird für eine Gitternetz-Tabelle das Prinzip verwendet, dass die Tabelle oben und links einen Rand bekommt und alle Zellen darin rechts und unten.
Würde man im Gegensatz dazu jeder Zelle einen 1px-Rand zuweisen, würde sich der Rand benachbarter Zellen aufaddieren (= 2px).
Möchte man nun selektierbare Zelle haben, deren Rand einfarbig ist, reicht dieses Handling nicht mehr aus, denn oben und links ist ja der durchgehende Rand der Tabelle.
Also muss statt der Tabelle, allen Zellen, die sich am linken Rand befinden, zusätzlich ein linker Rahmen und allen Zellen, die sich am oberen Rand befinden, zusätzlich ein oberer Rahmen zugewiesen werden. Die Zelle links oben bekommt demnach zusätzlich oben und links einen Rand zugewiesen (rechts und unten hat ja bereits per Definition jede Zelle einen Rand).
Die Aufgabe ist nun, der Zelle oberhalb der selektierten Zelle die gewünschte Rahmenfarbe extra zuzuweisen (da diese ja zuständig dafür ist, den geteilten Rahmen benachbarter Zellen darzustellen), gleiches gilt für die Zelle links der selektierten.
Folgende CSS-Klassen können einer Tabelle nun (kombiniert) zugeteilt werden:
cell
bekommt jede Zelle zugewiesen (alle <td>s anzusprechen wäre zu allgemein, schließlich könnte der Inhalt einer Gitternetz-Zelle ja wieder mittels einer Tabelle gestaltet werden)
left
Zelle befindet sich am linken Rand
top:
.. oberen Rand
right
.. rechten Rand
bottom
.. unteren Rand
selected
Zelle ist selektiert
below-selected
Zelle darunter ist selektiert
right-selected
Zelle rechts daneben ist selektiert
Hier der Gesamt-Code:
Der Versuch, der selektierten Zelle einfach aus Komfort-Gründen einen durchgehenden eigenen Rand zuzweisen (damit wäre das Border-Styling nicht auf mehrere CSS-Klassen verteilt worden) und der oberen und linken Zelle den Rand sozusagen entziehen, war nicht möglich, da der Rand in den Inhalt der jeweiligen Zelle gelegt wird. Somit würde der obere und linke Rahmen der Zelle beim Selektieren, von den benachbarten Zellen in die eigene Zelle springen, was für den Betrachter sichtbar und als nicht normal empfunden würde.
habe hier ein kleines Skript, das eine Gitternetz-Tabelle erstellt. Die Zellen sind jeweils mit CSS selektier- und anpassbar. Speziell ging es um die Randfarbe der selektierten Zelle.
Rahmen und Rand sind in folgenden Text jeweils als das selbe anzusehen.
Kurz erklärt wird für eine Gitternetz-Tabelle das Prinzip verwendet, dass die Tabelle oben und links einen Rand bekommt und alle Zellen darin rechts und unten.
Würde man im Gegensatz dazu jeder Zelle einen 1px-Rand zuweisen, würde sich der Rand benachbarter Zellen aufaddieren (= 2px).
Möchte man nun selektierbare Zelle haben, deren Rand einfarbig ist, reicht dieses Handling nicht mehr aus, denn oben und links ist ja der durchgehende Rand der Tabelle.
Also muss statt der Tabelle, allen Zellen, die sich am linken Rand befinden, zusätzlich ein linker Rahmen und allen Zellen, die sich am oberen Rand befinden, zusätzlich ein oberer Rahmen zugewiesen werden. Die Zelle links oben bekommt demnach zusätzlich oben und links einen Rand zugewiesen (rechts und unten hat ja bereits per Definition jede Zelle einen Rand).
Die Aufgabe ist nun, der Zelle oberhalb der selektierten Zelle die gewünschte Rahmenfarbe extra zuzuweisen (da diese ja zuständig dafür ist, den geteilten Rahmen benachbarter Zellen darzustellen), gleiches gilt für die Zelle links der selektierten.
Folgende CSS-Klassen können einer Tabelle nun (kombiniert) zugeteilt werden:
cell
bekommt jede Zelle zugewiesen (alle <td>s anzusprechen wäre zu allgemein, schließlich könnte der Inhalt einer Gitternetz-Zelle ja wieder mittels einer Tabelle gestaltet werden)
left
Zelle befindet sich am linken Rand
top:
.. oberen Rand
right
.. rechten Rand
bottom
.. unteren Rand
selected
Zelle ist selektiert
below-selected
Zelle darunter ist selektiert
right-selected
Zelle rechts daneben ist selektiert
Hier der Gesamt-Code:
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
table.reticule {
table-layout : fixed;
}
table.reticule
td.cell {
border-color : black;
border-style : solid;
border-width : 0 1px 1px 0;
text-align : center;
height : 25px;
width : 25px;
}
table.reticule
td.cell.top {
border-top-width : 1px;
}
table.reticule
td.cell.left {
border-left-width : 1px;
}
table.reticule
td.selected {
background : silver;
border-color : red;
}
table.reticule
td.below-selected {
border-bottom-color : red;
}
table.reticule
td.right-selected {
border-right-color : red;
}
table.reticule
td.cell
a {
text-decoration : none;
color : black;
}
</style>
</head>
<body>
<table cellspacing="0" class="reticule">
<tbody>
<?
$rmax = 4;
$cmax = 7;
$max = $rmax * $cmax;
$selected = @$_GET['selected'];
$selected = $selected <= $max && $selected != 0 ? $selected : mt_rand(1, $max);
for ($r = 0, $i = 1; $r < $rmax; $r++) { // r = row, i = current cell number
?>
<tr>
<?
for ($c = 0; $c < $cmax; $c++, $i++) { // c = column
$class = array('cell');
if ($r == 0) { $class[] = 'top'; }
if ($r + 1 == $rmax) { $class[] = 'bottom'; }
if ($c == 0) { $class[] = 'left'; }
if ($c + 1 == $cmax) { $class[] = 'right'; }
if ($i + $cmax == $selected) {
$class[] = 'below-selected';
} else if ($i + 1 == $selected && $selected % $cmax != 1) {
$class[] = 'right-selected';
} else if ($i == $selected) {
$class[] = 'selected';
}
?>
<td class="<?=implode(' ', $class)?>">[url="<?=$_SERVER['PHP_SELF']?>?selected=<?=$i?>"]<?=$i?>[/url]</td>
<?
}
?>
</tr>
<?
}
?>
</tbody>
</table>
</body>
</html>