{"id":1244,"date":"2018-01-19T19:22:36","date_gmt":"2018-01-19T19:22:36","guid":{"rendered":"http:\/\/goofy-trucks.flywheelsites.com\/pear-html_table-displaying-tabular-data-in-php\/"},"modified":"2018-01-19T19:24:38","modified_gmt":"2018-01-19T19:24:38","slug":"pear-html_table-displaying-tabular-data-in-php","status":"publish","type":"post","link":"https:\/\/phpbuilder.com\/pear-html_table-displaying-tabular-data-in-php\/","title":{"rendered":"PEAR HTML_Table: Displaying Tabular Data in PHP"},"content":{"rendered":"
\n
\n
By W. Jason Gilmore<\/div>\n
on June 1, 2011<\/div>\n<\/p><\/div>\n
\n
Tabular data output is one of those tasks which is an integral part of almost every single Web project. Yet it’s surprising how many different project-specific approaches you’ll encounter, all of which bear some resemblance yet are never done in quite the same rigorous fashion. Because the task is so commonplace, personally I prefer to treat it like stamping out a widget, and rely on a drop in solution. While several such standardized solutions are available, I generally prefer to use HTML_Table<\/a>, a great PEAR package which makes tabular data presentation a breeze. In this tutorial I’ll walk you through several of HTML_Table’s key features, additionally showing you how to integrate CSS and jQuery to create an eye-appealing and interactive tabular layout in no-time flat.<\/div>\n

Installing HTML_Table<\/h2>\n
HTML_Table is a PEAR<\/a> package, meaning you can use the command-line installer to install and maintain the package:<\/div>\n
<\/p>\n
$ pear install HTML_Table\ndownloading HTML_Table-1.8.3.tgz ...\nStarting to download HTML_Table-1.8.3.tgz (16,994 bytes)\n......done: 16,994 bytes\ninstall ok: channel:\/\/pear.php.net\/HTML_Table-1.8.3<\/pre>\n
<\/code><\/div>\n
Creating a Table<\/h2>\n
HTML_Table is an object-oriented solution, allowing you to create tables in a very well-organized fashion. Given any data array (such as an array of objects or multidimensional array), you’ll iterate over the array contents, moving not only from one row to the next but from one column to the next, outputting each table cell along the way. The following example iterates over a multidimensional array consisting of video game-related data. Because most of this is standard PHP code, I’ve highlighted the lines specific to HTML_Table:<\/div>\n
<\/p>\n
<?php\n\n  require_once \"HTML\/Table.php\";\n\n\n  $games = array(\n   array(\"Call of Duty: Modern Warfare 2\", \"Activision Inc.\", \"$59.99\"),\n   array(\"Super Mario Galaxy 2\", \"Nintendo\", \"$49.99\"),\n   array(\"Grand Theft Auto IV\", \"Rockstar Games\", \"$19.99\"),\n   array(\"NBA 2K11\", \"2K Sports\", \"$39.99\")\n  );\n\n  $table = new HTML_Table();<\/strong>\n\n  for ($rows = 0; $rows < count($games); $rows++)\n  {\n    for($cols = 0; $cols < count($games[0]); $cols++)\n    {\n      $table->setCellContents($rows, $cols, $games[$rows][$cols]);<\/strong>\n    }\n\n  }\n\n  echo $table->toHtml();<\/strong>\n\n?><\/pre>\n
<\/code><\/div>\n
Executing this example creates the table presented in Figure 1.<\/div>\n
\"\"
Figure 1.<\/strong><\/a> Creating a Table Using HTML_Table<\/div>\n
Adding Table Headers<\/h2>\n
While the table presented in Figure 1 is certainly readable, it’s not exactly inspiring. For starters, it’s missing headers which describe the type of information presented in each column. Use the setHeaderContents()<\/code> method to add these headers:<\/div>\n
<\/p>\n
...\n$table = new HTML_Table();\n\n$table->setHeaderContents(0, 0, 'Title');\n$table->setHeaderContents(0, 1, 'Publisher');\n$table->setHeaderContents(0, 2, 'Price');\n...<\/pre>\n
<\/code><\/div>\n
Adding the headers to the previous example produces the table presented in Figure 2.<\/div>\n
\"\"
Figure 2.<\/strong><\/a> Adding Headers to the Table<\/div>\n
Alternating Row Coloring<\/h2>\n
The table presented in Figure 2 is certainly an improvement, but the presentation could be improved even further. For starters, the rows run together a little too closely. Let’s make each row stand out on its own by alternating the row coloring using the altRowAttributes()<\/code> method:<\/div>\n
<\/p>\n
...\n$table->altRowAttributes(1, null, array('bgcolor' => '#CCCCCC'));\n\necho $table->toHtml();<\/pre>\n
<\/code><\/div>\n
Revising the original example using the above code produces the table found in Figure 3.<\/div>\n
\"\"
Figure 3.<\/strong><\/a> Alternating Row Coloring<\/div>\n
Using CSS<\/h2>\n
There remain several more steps we can take to make the table even more eye-appealing, not to mention more maintainable. For starters, embedding style-specific code into the table isn’t particularly practical, particularly because it could be moved into a CSS stylesheet. In fact, by taking advantage of CSS this table can be dramatically improved, resulting in the variation presented in Figure 4.<\/div>\n
\"\"
Figure 4.<\/strong><\/a> CSS Really Can Create Beautiful Tables<\/div>\n
Creating the table presented in Figure 4 is accomplished in two easy steps. Start by passing a DIV ID into the HTML_Table<\/code> constructor:<\/div>\n
<\/p>\n
$table = new HTML_Table(array(\"id\" => \"games\"));<\/pre>\n
<\/code><\/div>\n
Next, add the following CSS to your page. It will modify the table in a variety of ways, changing how the overall table, headers, and rows are presented:<\/div>\n
<\/p>\n
#games {\n  width: 600px;\n  border-collapse: collapse;\n  font-family: Helvetica, Arial, sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  border: 1px solid black;\n}\n\n#games th {\n  padding: 5px;\n  font-size: 1.2em;\n  text-align: left;\n  border-bottom: 1px solid black;\n  background-color: #F2C545;\n}\n\n#games td {\n  padding: 5px;\n}<\/pre>\n
<\/code><\/div>\n<\/div>\n
<\/p>\n
\n
1<\/div>\n
| <\/div>\n
2<\/a> <\/div>\n
Next Page \u00bb<\/a><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
HTML_Table is a great PEAR package that makes tabular data presentation a breeze. Learn how to integrate CSS and jQuery with HTML_Table to create an<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1244","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/comments?post=1244"}],"version-history":[{"count":1,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1244\/revisions"}],"predecessor-version":[{"id":2140,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1244\/revisions\/2140"}],"wp:attachment":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/media?parent=1244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/categories?post=1244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/tags?post=1244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}