<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html> | |
<head> | |
<title>Code Igniter User Guide</title> | |
<style type='text/css' media='all'>@import url('../userguide.css');</style> | |
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' /> | |
<script type="text/javascript" src="../nav/nav.js"></script> | |
<script type="text/javascript" src="../nav/prototype.lite.js"></script> | |
<script type="text/javascript" src="../nav/moo.fx.js"></script> | |
<script type="text/javascript"> | |
window.onload = function() { | |
myHeight = new fx.Height('nav', {duration: 400}); | |
myHeight.hide(); | |
} | |
</script> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<meta http-equiv='expires' content='-1' /> | |
<meta http-equiv= 'pragma' content='no-cache' /> | |
<meta name='robots' content='all' /> | |
<meta name='author' content='Rick Ellis' /> | |
<meta name='description' content='Code Igniter User Guide' /> | |
</head> | |
<body> | |
<!-- START NAVIGATION --> | |
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div> | |
<div id="nav2"><a name="top"></a><a href="javascript:void(0);" onclick="myHeight.toggle();"><img src="../images/nav_toggle.jpg" width="153" height="44" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div> | |
<div id="masthead"> | |
<table cellpadding="0" cellspacing="0" border="0" style="width:100%"> | |
<tr> | |
<td><h1>Code Igniter User Guide Version 1.5.0b3</h1></td> | |
<td id="breadcrumb_right"><a href="../toc.html">Linear Table of Contents</a></td> | |
</tr> | |
</table> | |
</div> | |
<!-- END NAVIGATION --> | |
<!-- START BREADCRUMB --> | |
<table cellpadding="0" cellspacing="0" border="0" style="width:100%"> | |
<tr> | |
<td id="breadcrumb"> | |
<a href="http://www.codeigniter.com/">Code Igniter Home</a> › | |
<a href="../index.html">User Guide Home</a> › | |
HTML Table Class | |
</td> | |
<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="www.codeigniter.com/user_guide/" />Search User Guide <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" /> <input type="submit" class="submit" name="sa" value="Go" /></form></td> | |
</tr> | |
</table> | |
<!-- END BREADCRUMB --> | |
<br clear="all" /> | |
<!-- START CONTENT --> | |
<div id="content"> | |
<h1>HTML Table Class</h1> | |
<p>The Table Class provides functions that enable you to auto-generate HTML tables from arrays or database result sets.</p> | |
<h2>Initializing the Class</h2> | |
<p>Like most other classes in Code Igniter, the Table class is initialized in your controller using the <dfn>$this->load->library</dfn> function:</p> | |
<code>$this->load->library('table');</code> | |
<p>Once loaded, the Table library object will be available using: <dfn>$this->table</dfn></p> | |
<h2>Examples</h2> | |
<p>Here is an example showing how you can create a table from a multi-dimensional array. | |
Note that the first array index will become the table heading (or you can set your own headings using the | |
<dfn>set_heading()</dfn> function described in the function reference below).</p> | |
<code> | |
$this->load->library('table');<br /> | |
<br /> | |
$data = array(<br /> | |
array('Name', 'Color', 'Size'),<br /> | |
array('Fred', 'Blue', 'Small'),<br /> | |
array('Mary', 'Red', 'Large'),<br /> | |
array('John', 'Green', 'Medium') <br /> | |
);<br /> | |
<br /> | |
echo $this->table->generate($data); | |
</code> | |
<p>Here is an example of a table created from a database query result. The table class will automatically generate the | |
headings based on the table names (or you can set your own headings using the <dfn>set_heading()</dfn> function described | |
in the function reference below).</p> | |
<code> | |
$this->load->library('table');<br /> | |
<br /> | |
$query = $this->db->query("SELECT * FROM my_table");<br /> | |
<br /> | |
echo $this->table->generate($query); | |
</code> | |
<p>Here is an example showing how you might create a table using discreet parameters:</p> | |
<code> | |
$this->load->library('table');<br /> | |
<br /> | |
$this->table->set_heading('Name', 'Color', 'Size');<br /> | |
<br /> | |
$this->table->add_row('Fred', 'Blue', 'Small');<br /> | |
$this->table->add_row('Mary', 'Red', 'Large');<br /> | |
$this->table->add_row('John', 'Green', 'Medium');<br /> | |
<br /> | |
echo $this->table->generate(); | |
</code> | |
<p>Here is the same example, except instead of individual parameters, arrays are used: | |
<code> | |
$this->load->library('table');<br /> | |
<br /> | |
$this->table->set_heading(array('Name', 'Color', 'Size'));<br /> | |
<br /> | |
$this->table->add_row(array('Fred', 'Blue', 'Small'));<br /> | |
$this->table->add_row(array('Mary', 'Red', 'Large'));<br /> | |
$this->table->add_row(array('John', 'Green', 'Medium'));<br /> | |
<br /> | |
echo $this->table->generate(); | |
</code> | |
<h2>Changing the Look of Your Table</h2> | |
<p>The Table Class permits you to set a table template with which you can specify the design of your layout. Here is the template | |
prototype:</p> | |
<code> | |
$tmpl = array (<br /> | |
'table_open' => '<table border="0" cellpadding="4" cellspacing="0">',<br /> | |
<br /> | |
'heading_row_start' => '<tr>',<br /> | |
'heading_row_end' => '</tr>',<br /> | |
'heading_cell_start' => '<th>',<br /> | |
'heading_cell_end' => '</th>',<br /> | |
<br /> | |
'row_start' => '<tr>',<br /> | |
'row_end' => '</tr>',<br /> | |
'cell_start' => '<td>',<br /> | |
'cell_end' => '</td>',<br /> | |
<br /> | |
'row_alt_start' => '<tr>',<br /> | |
'row_alt_end' => '</tr>',<br /> | |
'cell_alt_start' => '<td>',<br /> | |
'cell_alt_end' => '</td>',<br /> | |
<br /> | |
'table_close' => '</table>'<br /> | |
);<br /> | |
<br /> | |
$this->table->set_template($tmpl); | |
</code> | |
<p class="important"><strong>Note:</strong> You'll notice there are two sets of "row" blocks in the template. These permit you to create alternating row colors or design elements that alternate with each | |
iteration of the row data.</p> | |
<p>You are NOT required to submit a complete template. If you only need to change parts of the layout you can simply submit those elements. | |
In this example, only the table opening tag is being changed:</p> | |
<code> | |
$tmpl = array ( 'table_open' => '<table border="1" cellpadding="2" cellspacing="1" class="mytable">' );<br /> | |
<br /> | |
$this->table->set_template($tmpl); | |
</code> | |
<br /> | |
<h1>Function Reference</h1> | |
<h2>$this->table->generate()</h2> | |
<p>Returns a string containing the generated table. Accepts an optional parameter which can be an array or a database result object.</p> | |
<h2>$this->table->set_heading()</h2> | |
<p>Permits you to set the table heading. You can submit an array or discreet params:</p> | |
<code>$this->table->set_heading('Name', 'Color', 'Size');</code> | |
<code>$this->table->set_heading(array('Name', 'Color', 'Size'));</code> | |
<h2>$this->table->add_row()</h2> | |
<p>Permits you to add a row to your table. You can submit an array or discreet params:</p> | |
<code>$this->table->add_row('Blue', 'Red', 'Green');</code> | |
<code>$this->table->add_row(array('Blue', 'Red', 'Green'));</code> | |
<h2>$this->table->set_template()</h2> | |
<p>Permits you to set your template. You can submit a full or partial template.</p> | |
<code> | |
$tmpl = array ( 'table_open' => '<table border="1" cellpadding="2" cellspacing="1" class="mytable">' );<br /> | |
<br /> | |
$this->table->set_template($tmpl); | |
</code> | |
</div> | |
<!-- END CONTENT --> | |
<div id="footer"> | |
<p> | |
Previous Topic: <a href="file_uploading.html">File Uploading Class</a> | |
· | |
<a href="#top">Top of Page</a> · | |
<a href="../index.html">User Guide Home</a> · | |
Next Topic: <a href="image_lib.html">Image Manipulation Class</a> | |
<p> | |
<p><a href="http://www.codeigniter.com">Code Igniter</a> · Copyright © 2006 · <a href="http://www.pmachine.com">pMachine, Inc.</a></p> | |
</div> | |
</body> | |
</html> |