HTML/CSS: Gitternetz-Tabelle, selektierte Zellen

Zergling-new · 06.07.2007, 19:53

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:

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>

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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Zeilenanzahl einer tabelle mit WHERE aber ohne schleife?	sovereign	Datenbanken	13	17.04.2006 20:34
[Erledigt] Problem mit dem Füllen einer Tabelle über Formular		PHP Tipps 2006	18	10.01.2006 12:51
Problem mit Anzeige einer Tabelle mit dem Firefox?		HTML, Usability und Barrierefreiheit	8	28.11.2005 15:08
[Erledigt] Tabelle aktualisieren		Datenbanken	3	23.11.2005 09:54
[Erledigt] Problem mit mySQL		Datenbanken	7	27.09.2005 12:06
[Erledigt] mysql abfrage über 4 Tabelle - bis 3 geht, bei der 4. habert		Datenbanken	2	08.09.2005 11:59
tabelle in tabelle ohne aussenrand	noskule	HTML, Usability und Barrierefreiheit	6	25.08.2005 14:17
Grafik über mehrere Zellen einer Tabelle	neodrei	HTML, Usability und Barrierefreiheit	9	18.08.2005 19:26
Tabelle in Tabelle ausrichten		HTML, Usability und Barrierefreiheit	7	03.01.2005 14:32
Sortieren anhand einer zweiten Tabelle		PHP Tipps 2004	6	20.09.2004 09:03
HILFE: Column count doesn't match value count at row 1		Datenbanken	17	12.06.2004 16:45

06.07.2007, 19:53
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	HTML/CSS: Gitternetz-Tabelle, selektierte Zellen 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: 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> 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.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten