Anzeige
Tutorialbeschreibung

PHP - Teil 27 - PEAR: HTML-Tabellen generieren

PHP - Teil 27 - PEAR: HTML-Tabellen generieren

Mit HTML_Table können HTML-Tabellen auf einfachste Weise erzeugt werden. Für die Gestaltung der Tabellen können alle entsprechenden HTML-Attribute eingesetzt werden. (Wobei an dieser Stelle der Hinweis nicht fehlen darf, dass es hier um Daten-, nicht um Layouttabellen geht). Ihr findet dieses Paket unter http://www.pear.php.net in der Rubrik HTML.

Icon-Ersteller: Oxygen-Team

... übrigens findest du die komplette Serie hier: PHP-Workshop-DVD - Basics & Tricks - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Das Paket ist normalerweise bereits standardmäßig bei PEAR mit dabei. Überprüft also am besten zunächst im Verzeichnis PEAR/HTML, ob es dort Table gibt.

Bilder



 
In diesem Fall könnt ihr sofort mit den Tabellen loslegen. Fehlt Table, müsst ihr es zunächst installieren. Das könnt ihr über die Kommandozeile erledigen.

pear install HTML_Table

Alternativ dazu könnt ihr euch das Paket natürlich auch von der Seite http://pear.php.net/package/HTML_Table herunterladen und es anschließend manuell installieren.

Bilder



 

Tabellen erzeugen

Zunächst soll ein einfaches Beispiel die Arbeitsweise von HTML_Table zeigen. Es wird zu Demonstrationszwecken eine Tabelle mit jeweils drei Spalten und Zeilen generiert. Auf syntaktische Besonderheiten wird an dieser Stelle noch nicht genauer eingegangen. Es werden lediglich die wichtigsten Elemente erörtert. Auf die übrigen wird im Lauf dieses Tutorials noch eingegangen.

Legt euch zunächst eine neue PHP-Datei mit folgendem Inhalt an:

<?php
require_once('HTML/Table.php');
$table =new HTML_Table('width="400"');
$head[0][] = 'Name';
$head[0][] = 'Vorname';
$head[0][] = 'Titel';
$content[0][] = 'Hornby';
$content[0][] = 'Nick';
$content[0][] = 'Fever Pitch';
$content[1][] = 'Parsons';
$content[1][] = 'Tony';
$content[1][] = 'One for my Baby';
$content[2][] = 'Welsh';
$content[2][] = 'Irvine';
$content[2][] = 'Trainspotting';
foreach($head as $key => $value) {
   $table->addRow($head[$key], 'bgcolor="eee" align="center"', 'TD', true );
}
foreach($content as $key => $value) {
   $table->addRow($content[$key], array('bgcolor' => '#ffff00', 'align' => 'right') );
}
echo $table->toHTML();
?>


Über require_once() wird die Table-Klasse, die sich innerhalb des HTML-Verzeichnisses befindet, eingebunden. Anschließend generiert man über new HTML_Table ein neues Objekt und speichert dieses in der Variablen $table. Mit width="400" wird die Breite der Tabelle auf 400 Pixel festgelegt. Hieran schließt sich die Definition der Tabelleninhalte an. Die hierfür notwendige Syntax wird im weiteren Verlauf dieses Tutorials noch ausführlich vorgestellt.

 
Zur Ausgabe der HTML-Tabelle wird toHTML() verwendet. Der aus dieser Syntax generierte HTML-Code stellt sich folgendermaßen dar:

<table width="400"> 
  <tr bgcolor="eee" align="center"> 

     <td>Name</td> 
     <td>Vorname</td> 
     <td>Titel</td> 
  </tr> 
  <tr> 
     <td bgcolor="#ffff00" align="right">Hornby</td>
     <td bgcolor="#ffff00" align="right">Nick</td> 
     <td bgcolor="#ffff00" align="right">Fever Pitch</td> 
  </tr> 
  <tr>
     <td bgcolor="#ffff00" align="right">Parsons</td> 
     <td bgcolor="#ffff00" align="right">Tony</td>
     <td bgcolor="#ffff00" align="right">One for my Baby</td>
  </tr> 
  <tr> 
     <td bgcolor="#ffff00" align="right">Welsh</td> 
     <td bgcolor="#ffff00" align="right">Irvine</td> 
     <td bgcolor="#ffff00" align="right">Trainspotting</td> 
  </tr> 
</table>


Wie ihr seht, handelt es sich um eine vollwertige Tabelle. Die Syntax entspricht einer normalen HTML-Tabelle, muss also an dieser Stelle nicht weiter beschrieben werden.

 
Ruft man die Seite im Browser auf, ergibt sich folgendes Bild:

Bilder



Das Beispiel hat eindrucksvoll demonstriert, mit wie wenig Aufwand sich HTML-Tabellen über HTML_Table erstellen lassen.


 

Spalten und Reihen hinzufügen

Nach dem einleitenden Beispiel sollen die grundlegenden Syntax-Elemente von HTML_Table im Detail vorgestellt werden.

Wie üblich, bestehen Tabellen aus Reihen und Spalten. Um über HTML_Table einer Tabelle eine neue Reihe hinzuzufügen, wird addRow()verwendet.

Ein Beispiel:

$head[0][] = 'Name';
$head[0][] = 'Vorname';
$head[0][] = 'Titel';
$content[0][] = 'Hornby';
$content[0][] = 'Nick';
$content[0][] = 'Fever Pitch';


Diese Inhalte sollen nebeneinander in drei Tabellenreihen angezeigt werden. Hierzu werden die Daten mittels einer foreach()-Schleife durchlaufen. Über addRow() wird der Tabelle bei jedem Schleifendurchlauf eine neue Reihe zugewiesen.

foreach($content as $key => $value) {
 $table->addRow($content[$key], 
 array('bgcolor' => '#ffff00', 'align' => 'right') );
}


 
Als Parameter wird addRow() jeweils der Inhalt der Tabellenreihe hinzugefügt.

Bilder



 
Dieses Skript bewirkt, im Browser aufgerufen, die folgende HTML-Syntax.

<table width="400"> 
    <tr bgcolor="eee" align="center"> 
        <td>Name</td> 
        <td>Vorname</td> 
        <td>Titel</td> 
    </tr> 
    <tr> 
        <td bgcolor="#ffff00" align="right">Hornby</td> 
        <td bgcolor="#ffff00" align="right">Nick</td> 
        <td bgcolor="#ffff00" align="right">Fever Pitch</td> 
    </tr> 
</table> 


Neben Reihen können Tabellen auch aus Spalten bestehen. (Wobei Tabellen natürlich üblicherweise auf einer Kombination von Spalten und Reihen basieren). Jede neue Spalte wird in HTML über das tr-Element eingeleitet. In HTML_Table ist hierfür addCol() zuständig. Die folgende Syntax bedient sich der zuvor aufgeführten Inhalte.

foreach($content as $key => $value) {
 $table->addCol($content[$key], 
 array('bgcolor' => '#ffff00', 'align' => 'right') 

 );
}


 
Als Parameter erwartet addCol() jeweils den Inhalt der Tabellenspalte.

Bilder



 
Durch dieses Skript wird im Browser der folgende HTML-Code erzeugt:

<table width="400"> 
   <tr> 
      <td bgcolor="#ffff00" align="right">Hornby</td> 
   </tr>
   <tr> 
       <td bgcolor="#ffff00" align="right">Nick</td> 
   </tr> 
   <tr>
       <td bgcolor="#ffff00" align="right">Fever Pitch</td> 
   </tr> 
 </table>


In HTML besteht die Möglichkeit, Tabellenzellen miteinander zu verbinden. Über colspan wird angegeben, dass sich eine Zelle über mehrere Spalten hinweg erstreckt. Um zu erreichen, dass sich eine Zelle in einer Spalte über mehrere Zeilen hinweg erstreckt, muss rowspan eingefügt werden. Beide Varianten könnt ihr auch in HTML_Table einsetzen. Hierzu wird einer dieser Werte addCol() als dritter Parameter zugewiesen (z. B. colspan =>3). HTML_Table fügt in den so ausgestatteten HTML-Code automatisch einen Kommentar (<!—span-->) ein.


Den Tabellenkopf definieren

Die Kopfzellen von Tabellen sollten sich optisch von den übrigen Zellen unterscheiden. In HTML kann man hierfür entweder normale gestalterische Textelemente wie b, strong usw. oder den sauberen Weg, nämlich das th-Element verwenden. Das th-Element hat den Vorteil, dass hierdurch gekennzeichnete Zellen bzw. deren Inhalte fett und zentriert dargestellt werden. Die folgende HTML-Syntax zeigt, wie typischerweise ein Tabellenkopf definiert wird.

<tr bgcolor="#eee">
 <th>Name</th>
 <th>Vorname</th>
 <th>Titel</th>
</tr>


 
Im Browser sieht das folgendermaßen aus:

Bilder



 
Anstelle von td- wurden hier th-Elemente eingesetzt. Den vergleichbaren Effekt könnt ihr auch in HTML_Table erzielen. Hierfür wird setHeaderContents() verwendet. Als Parameter werden die Reihe, die Tabellenspalte und der Inhalt erwartet.

Auch hierzu wieder ein Beispiel:

<?php
 require_once('HTML/Table.php');
 $table =new HTML_Table('width=400');
 $table -> setHeaderContents(0, 0, "Name"); 
 $table -> setHeaderContents(0, 1, "Vorname");
 $table -> setHeaderContents(0, 2, "Titel");
 $hrAttrs = array("bgcolor" => "silver");
 $table -> setRowAttributes(0, $hrAttrs, true);
 $table -> setColAttributes(0, $hrAttrs);
 $content[0][] = 'Hornby';
 $content[0][] = 'Nick';
 $content[0][] = 'Fever Pitch';
 $content[1][] = 'Parsons';
 $content[1][] = 'Tony';
 $content[1][] = 'One for my Baby';
 foreach($content as $key => $value) {
   $table->addRow($content[$key], array('bgcolor' => '#ffff00', 
   'align' => 'right') );

 }
 echo $table->toHTML();
?>


 
Der Blick in den Browser liefert folgendes Ergebnis:

Bilder



 
Nach dem Generieren der 400 Pixel breiten Tabelle werden drei Zellen als Kopfzellen definiert. Das geschieht jeweils über setHeaderContents(). Durch den ersten Parameter 0 wird festgelegt, dass sich die Angaben auf die erste Reihe beziehen. Hierbei beginnt die interne Zählung der Reihen bei 0.

Die Werte des zweiten Parameters geben die jeweiligen Tabellenspalten an. Auch hier beginnt die interne Zählung wieder bei 0. Nach der Kopfzeilendefinition werden die übrigen Inhalte der Tabelle definiert. Die beiden Angaben setRowAttributes() und setColAttributes() legen die Attribute für die Kopfzellen fest. In unserem Beispiel wird den Kopfzellen jeweils Grau als Hintergrundfarbe zugewiesen.

Jetzt sind die Kopfzellen auch als solche erkennbar. Von dem grauen Hintergrund der Kopfzellen abgesehen, wird deren Gestaltung ausschließlich durch setHeaderContents() übernommen. Die Kopfzellen werden mit einem th-Element versehen und sind somit auch optisch als Tabellenkopf zu erkennen.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von franzg
  • 15.05.2017 - 00:42

Vielen Dank für das informative Tutorial!

Portrait von dmtw2107
  • 08.11.2013 - 08:39

Danke, daumen hoch, TOP

x
×
×