dynamische Tabelle oder dynamische DIV's

[urvater]

Es kommt immer mal wieder bei einigen die Frage auf, wie erstelle ich eine Tabelle dynamisch, wenn ich nicht weiß, wie viele Einträge später vorhanden sein werden oder zum Beispiel die Menge der Einträge nicht mit der Menge der benötigten Tabellenfelder überein stimmt.Aus meiner Sicht gibt es 2. Möglichkeiten.

1. als dynamische Tabelle
2. als tabellarische Anzeige per DIV

Aus diesem Grund hab ich mal 2 kleine Scripte geschrieben, damit nicht immer wieder die gleichen Fragen zum selben Thema kommen.
Eine dynamische Tabelle

PHP-Code:

<?php
//dynamische Tabelle
$testdata = array('1','2','3','4','5','6','7','8','9','10','11','12','13');

//Menge, die benötigt wird um die Schleife für die Tabelle durchlaufen zu können
$mengData = count($testdata);

//Anzahl der gewünschten Spalten
$maxSpalten = 3;

//berechnen der benötigten Zeilenmenge
$maxZeilen = $mengData/$maxSpalten;

//testen ob es eine Fließkommazahl ist und ggf. aufrunden
if(is_float($maxZeilen)) {
    $check =  round($maxZeilen,0);
    if($check < $maxZeilen) {
        $maxZeilen = $check+1;
    } else {
        $maxZeilen = $check;
    }
}

//Menge der zusätzlich benötigten TD's
$minFelder = $maxSpalten*$maxZeilen-$mengData;

//Startwert für die einzelnen Zeilen der Tabelle
$numFeld = 1;

//Ausgabe der Tabelle
echo '<table><tr>';
for($i=0;$i<$mengData;$i++) {
    echo '<td>'. $testdata[$i].'</td>'."\n";
    //Ausgabe einer neuen Zeile, wenn die maximale Spaltenmenge erreicht ist
    //und noch nicht alle Elemente ausgegeben wurden
    if(($numFeld === $maxSpalten) and (($i+1)/$numFeld < $maxZeilen)){
        echo '</tr><tr>'."\n";
        $numFeld = 0;
    }
    $numFeld++;
}
//zusatzliche TD's schreiben, wenn die Zeile nicht vollständig gefüllt ist
if($minFelder >0) {
    for($zus=0;$zus<$minFelder;$zus++) {
        echo '<td></td>'."\n";
    }
}
echo '</tr></table>';
?>

dynamische, tabellarische Übersicht per DIV

PHP-Code:

<?php
//dynamische tabellarische Anzeige per DIV
$testdata = array('1','2','3','4','5','6','7','8','9','10','11','12','13');

//Menge, die benötigt wird um die Schleife für die Tabelle durchlaufen zu können
$mengData = count($testdata);

//Anzahl der gewünschten Spalten
$maxSpalten = 3;

//berechnen der benötigten Zeilenmenge
$maxZeilen = $mengData/$maxSpalten;

//testen ob es eine Fließkommazahl ist und ggf. aufrunden
if(is_float($maxZeilen)) {
    $check =  round($maxZeilen,0);
    if($check < $maxZeilen) {
        $maxZeilen = $check+1;
    } else {
        $maxZeilen = $check;
    }
}

//Startwert für die einzelnen Zeilen der Tabelle
$numFeld = 1;

//Ausgabe der taballarischen Übersicht mittels DIV
echo '<div style="width:460px;">';  //die Breite muß hier der Menge der gewünschten Spalten
//und deren Breite angepaßt werden
for($i=0;$i<$mengData;$i++) {
    echo '<div style="float:left; width:150px; height:100px;">'. $testdata[$i].'</div>'."\n";
    //Ausgabe einer neuen Zeile, wenn die maximale Spaltenmenge erreicht ist
    //und noch nicht alle Elemente ausgegeben wurden
    if(($numFeld === $maxSpalten) and (($i+1)/$numFeld < $maxZeilen)){
        echo '<div style="clear:both;"></div>'."\n";
        $numFeld = 0;
    }
    $numFeld++;
}
//zusätzlich zum beenden des DIV wird noch ein zusätzliches DIV davor gesetzt,
//damit das float unterbrochen wird.
echo '<div style="clear:both;"></div></div>';
?>

Beachtet bei den DIV's, daß die jeweiligen Breiten zueinander passen, damit alles auch inneinander paßt.

[urvater]

Für die Ausgabe ist es recht unerheblich ob man eine Tabelle oder eine Lösung per Container nutzt. Allerdings ist eine Tabelle eben eine Tabelle und sollte auch nur mit Inhalten gefüllt werden, die eine tabellarische Ausgabe benötigen.
Aus diesem Grund empfiehlt das W3C auch die Ausgabe nicht über Tabellen zu nutzen.

Hintergrund des Ganzen ist, daß zum Beispiel Screenreader und andere spezielle Ausgabegeräte auf HTML-TAG's reagieren. Da eine Tabelle von solchen Geräten anders Ausgegeben wird als eine tabellarische Anzeige per DIV, kann es für Menschen, die solche Geräte nutzen recht schwer sein den Sinn der Ausgabe zu verstehen.

Ein nützlicher Nebeneffekt wäre die erleichterte Manipulation des Inhaltes durch z.B. clientseitigen Scriptsprachen.

[nchundert]

Zitat von urvater

Da es immer wieder zu Problemen mit der Ausgabe dynamischer Tabellen kommt, hab ich mir einmal die Mühe gemacht ein einfaches Beispiel zu erstellen.
Zusätzlich hab ich das Gleiche auch als tabellarische Ausgabe mit DIV's erstellt.

Ich hab es unter http://www.selfphp.de/forum/showthread.php?t=21269 eingestellt.

War bestimmt eine gute Arbeit. Bedanke mich.

[urvater]

Da ich oben leider nicht mehr editieren kann möchte ich das obige hier noch einmal erweitern.

PHP-Code:

class My_Class{
    /*****
     *Die Methode erstellt aus einem eindimensionalen Array eine dynamische Tabelle aus einzelnen DIV's
     *@param array $daten Die Daten, welche ausgegeben werden solle
     *@param int $spalten Die Anzahl der Spalten welche die Tabelle später haben soll
     *@param string|false $cssClass Die CSS Klasse, welche dem DIV zugeordnet werden soll
     *@return string $ausgabe Ein formatierter String mit allen HTML Tags incl. dem Inhalt für die Ausgabe
     */
    public function divTabelle(array $daten,$spalten,$cssClass=false){
        $ausgabe = '';
        if(!is_int($spalten)) {return 'Die Anzahl der gewünschten Spalten wurde  nicht als Integer übergeben!';}
        if($cssClass){$cssClass = ' class="'.$cssClass.'"';}
        $anzahlDaten = count($daten);
        $maxZeilen = $anzahlDaten/$spalten;
        if(is_float($maxZeilen)){
            $check = round($maxZeilen);
            /*Wenn abgerundet wurde muss die Zeilenanzahl um 1 erhöht werden*/
            if($check<$maxZeilen){$maxZeilen = $check+1;} else {$maxZeilen = $check;}
        }
        /*interner Zähler. Wird für eine neue Zeile benötigt*/
        $numFeld = 1;
        for($i=0;$i<$anzahlDaten;$i++) {
            $ausgabe .= '<div'.$cssClass.'>'. $daten[$i].'</div>'."\n";
            /*Ausgabe einer neuen Zeile, wenn die maximale Spaltenmenge erreicht ist
            und noch nicht alle Elemente ausgegeben wurden*/
            if(($numFeld === $spalten) and (($i+1)/$numFeld < $maxZeilen)){
                $ausgabe .= '<div style="clear:both;"></div>'."\n";
                $numFeld = 0;
            }
            $numFeld++;
        }
        /*Menge der zusätzlich benötigten DIV's um eine komplette Zeile erzeugen zu können*/
        $minFelder = $spalten*$maxZeilen-$anzahlDaten;
        if($minFelder >0) {
            for($zus=0;$zus<$minFelder;$zus++) {
                $ausgabe .= '<div '.$cssClass.'></div>'."\n";
            }
        }
        /*zusätzlicher DIV um den letzten float aufzuheben*/
        $ausgabe .= '<div style="clear:both;">';
        return $ausgabe;
    }
} 


In diesem Fall ist es eine Methode innerhalb einer Klasse. Die Methode funktioniert auch, wenn man sie ausserhalb einer Klasse setzt und funktional aufruft.
Änderung zum oberen Beispiel:
1. es wird eine vollständige Tabelle ausgegeben, was wichtig ist, wenn man mit Rahmen arbeiten möchte bzw. muss.
2. alles etwas kompakter und individuel nutzbarer
Beispiel CSS

<style type="text/css">
.kat_tab{
	width:220px;
	height:45px; /*Oder auf padding umstellen*/
	float:left;
}
</style>

Beispiel in PHP

PHP-Code:

$view = new My_Class();
$tabelle = $view->divTabelle($testdata,4,'kat_tab');
echo $tabelle; 


Im CSS muss width und float:left; bzw. float:right; immer angegeben werden.
Will man optisch eine "echte" Tabelle erzeugen ist zusätzlich die CSS Angabe height zwingend erforderlich. Ansonsten reicht es die Zeilenhöhe mittels padding bzw. margin den gewünschten Anforderungen einzustellen.
Wer zwingend die Anzahl der Spalten auch bei minimierter Ansicht beibehalten muss, sollte die Ausgabe innerhalb eines Blockelementes (z.B. div) setzen und diesem eine Mindestbreite per CSS verpassen. Die Tabelle klappt ansonsten zusammen, was nur schlimm ist, wenn die Zeilen optisch zusammen bleiben müssen.

[meikel (†)]

Ich verwende bei solchen Themen folgenden Algorithmus:
http://mod.php.developer.vc/tabellenAlgorithmus/

PHP-Code:

<?php

$dbc = getSqlAccount();
$db = new mysqli($dbc['dbhost'], $dbc['dbuser'], $dbc['dbpass'], $dbc['dbname']);

$cols = 3; # Anzahl der Spalten

$r = $db->query("SELECT `inhalt` FROM tabellenAlgorithmus ORDER by `id`");

$f = 0; # Feldzaehler

echo $r->num_rows, ' Elemente in ', $cols, ' Spalten', BR;

echo '<table border="1"><tr>';
while($row = $r->fetch_assoc()){
    if ($f % $cols == 0)
    echo '</tr><tr>';
    $f++;
    echo '<td>';
    echo $row['inhalt'];
    echo '</td>';
}
# Falls die letzte Zeile noch nicht komplett ist:
while ($f % $cols != 0){
    echo '<td>';
    echo '&nbsp;'; # Entity für das Leerzeichen
    echo '</td>';
    $f++;
}
echo '</tr></table>';  
?>

Der Algorithmus kann bestimmt auch auf DIVs angewendet werden.

[urvater]

Deins sieht einfacher und ordentlicher aus als mein Tabellenbeispiel. Sind zwar nur Kleinigkeiten aber für die Übersicht doch schöner.

Für eine Umsetzung durch DIV's sehe ich da auch einiges, was man übernehmen sollte.
Gerade deine Prüfungen ob eine neue Zeile angelegt werden muß oder ob die letzte Zeile nicht komplett ist, scheint besser zu sein oder zumindest für die Lesbarkeit besser zu sein.
Sollte ich meinen Code anpassen, werde ich diesen allerdings hier nicht mehr posten. Ich denke, dass kann eigentlich jeder User nachvollziehen und für sich umsetzen.

[meikel (†)]

Zitat von urvater

... aber für die Übersicht doch schöner.

Danke für die Blumen.

Ich denke, dass kann eigentlich jeder User nachvollziehen und für sich umsetzen.

Ja. Wer sich aus beiden Beispielen nicht die fehlenden Rosinen rauspicken kann, der sollte sich ein anderes Hobby suchen. <ggg>

[Ckaos]

Hi

@Urvater & meikel
Da sieht man mal wieder das 2 Entwickler andere Ansätze verfolgen
und doch ein und das selbe Ergebnis erzielen können ;)
Sowas ähnliches hab ich auch mal für eine Herstellerliste von Reifen gemacht
und wieder ganz anders.

Mit Dynamisch dacht ich erst Ihr meint inkl. aller möglichen Datenfelder.
Das brauchte ich / mein miniAdmin-Tool als Alternative zu PhpMyAdmin.

@meikel
vielleicht solltest du noch

$dbc = getSqlAccount(); 
//....
echo $r->num_rows, ' Elemente in ', $cols, ' Spalten', BR; 
//^^ BR ;)

bissle erklären dann kann wirklich jemand in Zukunft per Google sich die Rosinen rausholn ;)

Bist du das oder gut kopiert? link


mfg

CKaos

[meikel (†)]

Zitat von Ckaos

@meikel
vielleicht solltest du noch ... erklären.

PHP-Code:

$dbc = getSqlAccount(); 


Ich verwende im auto_prepend_file eine Funktion, welche ein array mit den SQL Zugangsdaten liefert. In diesem Prependfile werden außerdem noch ein paar Konstanten definiert, die man häufig braucht.

PHP-Code:

define('NL', "\n");
define('BR', '<br />' . NL);
define('PB', '<pre>');
define('PE', '</pre>'):
# usw. 


Sowas erspart mir beim Echo wilde Stringadditionen.

PHP-Code:

echo $r->num_rows, ' Elemente in ', $cols, ' Spalten', BR; 
//^^ BR ;) 


Bist du das oder gut kopiert? link

Meine Domain. Der Kram ist zum überwiegenden Teil auf meinem Mist gewachsen.

Manches davon ist allerdings sehr alt. Ob alle Beispiele unter (aktuell) PHP 5.3.10 wollen, teste ich allerdings nicht immer. PHP 5.4.0 lasse ich aus, weil einige der Extensions damit noch nicht klarkommen.

[urvater]

Zitat von Ckaos

@Urvater & meikel
Da sieht man mal wieder das 2 Entwickler andere Ansätze verfolgen
und doch ein und das selbe Ergebnis erzielen können ;)
Sowas ähnliches hab ich auch mal für eine Herstellerliste von Reifen gemacht
und wieder ganz anders.

In diesem Fall hängt sicher auch sehr viel vom Stand des Entwicklers selbst ab. Damals (2009) hatte ich noch keine Ahnung von OOP. Mein letztes Beispiel hab ich hier noch einmal eingestellt, weil ich es mal wieder gebraucht habe und mir dieser Tread eingefallen ist. Ausserdem war mein erstes Beispiel für die Umsetzung mit DIVs nicht so augelegt, dass man mit Rahmen eine "echte" Tabelle erhält.
Ich glaub wenn sich noch jemand unabhängig von diesem Tread mit diesem Thema beschäftigt, dann hat der auch noch einmal eine andere Lösung. Allerdings fällt einem sofort auf, dass man um bestimmte Grundwerte nicht herum kommt.

Zitat von Ckaos

Mit Dynamisch dacht ich erst Ihr meint inkl. aller möglichen Datenfelder.
Das brauchte ich / mein miniAdmin-Tool als Alternative zu PhpMyAdmin.

Damals waren viele Anfragen hier im Forum, wie man die optische Ausgabe von DB-Tabellendaten als Tabelle hinbekommt.
Für dein miniTool hast du auch sicher mehr als eine kleine Methode/Funktion benötigt. ;)