Advice on how to set column widths in php

[Robbie8]

Postby Robbie8 » Mon Sep 03, 2012 7:44 pm
Hi,
I am using a php view to show a table of all the entrants in my projects with their number, name, rounds and points.

I have two projects Project One and Two which have their results displayed in tables. The width of the columns for the values in these projects are dependent on the size of the name of the person, or club or points, making the table views slightly offset. The data records are read from a mysql database tables

i.e if the name is Fred Bloggs then the name column is only 11 characters wide, whereas if the name is Frederick Wilkinson then the column is 20 characters wide.
If Fred Bloggs is in project one and Frederick Wilkinson is in Project two, then when they are viewed on the web page then the Table for Project one is not as wide as for project two, making them look offset and not professional.

I would like to be able to define the width of each field, so as an example let's say the name field to be 25 characters and be padded with blanks if the name is shorter. Yes I understand that if the name was 26 characters it would be truncated and accept that, but as my individuals are fixed, I can live with that.

The php code is displayed below, but I don't know how to amend it to fix the column widths and would really appreciate some advice.

--

<?php
defined('_JEXEC') or die('Restricted access'); ?>

<div id="Plans">

<h1><?php echo $this->title; ?></h1>

<table class="raceResults" cellspacing="0" cellpadding="0" summary="">
<thead>
<tr>
<th><?php echo JText::_('COM_Plans_POSITION_SHORT' ); ?></th>

<?php if ($this->params->get('shownumber')): ?>
<th><?php echo JText::_('COM_Plans_NUMBER_SHORT' ); ?></th>
<?php endif; ?>

<th><?php echo JText::_('COM_Plans_Individual' ); ?></th>

<?php if ($this->params->get('showteams')): ?>
<th><?php echo JText::_('COM_Plans_Team' ); ?></th>
<?php endif; ?>

<?php foreach ($this->rounds as $r): ?>
<th colspan="<?php echo count($r->subrounds); ?>" class="hasTip" title="<?php echo $r->round_name; ?>"><?php echo substr($r->short_name, 0, 6); ?></th>
<?php endforeach; ?>

<th><?php echo JText::_('COM_Plans_Points' ); ?></th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
foreach( $this->rows AS $ranking )
{
$link_ind = JRoute::_( PlansHelperRoute::getIndividualRoute($ranking->slug, $this->project->slug) );
$link_team = JRoute::_( PlansHelperRoute::getTeamRoute($ranking->teamslug, $this->project->slug) );
?>
<tr class="<?php echo ($i ? 'd1' : 'd0'); ?>">
<td><?php echo $ranking->rank; ?></td>

<?php if ($this->params->get('shownumber')): ?>
<td><?php echo $ranking->number; ?></td>
<?php endif; ?>

<td>
<a href="<?php echo $link_ind; ?>"
title="<?php echo JText::_('COM_Plans_Details' ); ?>">
<?php echo $ranking->first_name . ' ' . $ranking->last_name; ?>
</a>
</td>
<?php if ($this->params->get('showteams')): ?>
<td>
<?php if ($ranking->team_id): ?>
<a href="<?php echo $link_team; ?>"
title="<?php echo JText::_('COM_Plans_Details' ); ?>">
<?php echo $ranking->team_name; ?></a>
<?php endif; ?>
</td>
<?php endif; ?>

<?php $i = 1;?>
<?php foreach ($this->rounds as $round): ?>
<?php foreach ($round->subrounds as $subround): ?>
<td><?php echo isset($ranking->results[$subround->subround_id]) ? $ranking->results[$subround->subround_id] : '-'; ?></td>
<?php endforeach; ?>
<?php endforeach; ?>

<td><?php echo $ranking->points; ?></td>

</tr>
<?php
$i = 1 - $i;
}
?>
</tbody>
</table>
<p class="copyright">
<?php echo HTMLplans::footer( ); ?>
</p>
</div>

 

[gabbagabbahey]

Something along the lines of the following should work:

<?php
function getColWidth($colName)
{
/* add code to get the correct column width for the given column name and store
 it in a variable named colWidth */
echo "width:" . $colWidth
} 
?>

<table>
  <tr class="<?php echo ($i ? 'd1' : 'd0'); ?>">
    <td style="<?php echo htmlspecialchars(getColWidth("rank")); ?>">
      <?php echo $ranking->rank; ?>
    </td>
    <?php if ($this->params->get('shownumber')): ?>
      <td style="<?php echo htmlspecialchars(getColWidth("number")); ?>">
        <?php echo $ranking->number; ?>
      </td>
    <?php endif; ?>
  </tr>
</table>

 

[Robbie8]

Hi,
Thankyou for your advice. I added the code as I think you advised but it is giving me the following error - Perhaps you could have a look at the code that I added and advise me where I have made the error.

--
Error Message :
Fatal error: Cannot redeclare getcolwidth() (previously declared in /mylocation/public_html/myfile/tmpl/default.php:50) in /mylocation/public_html/myfile/tmpl/default.php on line 50
--

The Full code I have now coded is below, with the addition as I thought you had advised.

----------

defined('_JEXEC') or die('Restricted access'); ?>

<div id="Plans">

<h1><?php echo $this->title; ?></h1>

<table class="raceResults" cellspacing="0" cellpadding="0" summary="">
<thead>
<tr>
<th><?php echo JText::_('COM_PLANS_POSITION_SHORT' ); ?></th>

<?php if ($this->params->get('shownumber')): ?>
<th><?php echo JText::_('COM_PLANS_NUMBER_SHORT' ); ?></th>
<?php endif; ?>

<th><?php echo JText::_('COM_PLANS_Individual' ); ?></th>

<?php if ($this->params->get('showteams')): ?>
<th><?php echo JText::_('COM_PLANS_Team' ); ?></th>
<?php endif; ?>

<?php foreach ($this->rounds as $r): ?>
<th colspan="<?php echo count($r->subrounds); ?>" class="hasTip" title="<?php echo $r->round_name; ?>"><?php echo substr($r->short_name, 0, 6); ?></th>
<?php endforeach; ?>

<th><?php echo JText::_('COM_PLANS_Points' ); ?></th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
foreach( $this->rows AS $ranking )
{
$link_ind = JRoute::_( PlansHelperRoute::getIndividualRoute($ranking->slug, $this->project->slug) );
$link_team = JRoute::_( PlansHelperRoute::getTeamRoute($ranking->teamslug, $this->project->slug) );
?>
<?php
function getColWidth($colName)
{
/* add code to get the correct column width for the given column name and store
it in a variable named colWidth */
echo "width:" . $colWidth
}
?>
<tr class="<?php echo ($i ? 'd1' : 'd0'); ?>">
<td style="<?php echo htmlspecialchars(getColWidth("rank")); ?>">
<td><?php echo $ranking->rank; ?></td>

<?php if ($this->params->get('shownumber')): ?>
<td style="<?php echo htmlspecialchars(getColWidth("number")); ?>">
<td><?php echo $ranking->number; ?></td>
<?php endif; ?>

<td>
<a href="<?php echo $link_ind; ?>"
title="<?php echo JText::_('COM_PLANS_Details' ); ?>">
<td style="<?php echo htmlspecialchars(getColWidth("first_name")); ?>">
<td style="<?php echo htmlspecialchars(getColWidth("last_name")); ?>">
<?php echo $ranking->first_name . ' ' . $ranking->last_name; ?>
</a>
</td>
<?php if ($this->params->get('showteams')): ?>
<td>
<?php if ($ranking->team_id): ?>
<a href="<?php echo $link_team; ?>"
title="<?php echo JText::_('COM_PLANS_Details' ); ?>">
<?php echo $ranking->team_name; ?></a>
<?php endif; ?>
</td>
<?php endif; ?>

<?php $i = 1;?>
<?php foreach ($this->rounds as $round): ?>
<?php foreach ($round->subrounds as $subround): ?>
<td><?php echo isset($ranking->results[$subround->subround_id]) ? $ranking->results[$subround->subround_id] : '-'; ?></td>
<?php endforeach; ?>
<?php endforeach; ?>

<td><?php echo $ranking->points; ?></td>

</tr>
<?php
$i = 1 - $i;
}
?>
</tbody>
</table>
<p class="copyright">
<?php echo HTMLPlans::footer( ); ?>
</p>
</div>

------
Thanks for your help again

Rob.

 

[gabbagabbahey]

Please use code tags for your code, it makes it easier to read.

Anyways, you should notice that what I gave you was just pseudo-code, you aren't meant to just copy and paste it into your code. In the function getColWidth, I've put comments telling you what to program... you will need to actually program it for the code to work.

I would suggest making the function a member of your "ranking" class (which means putting the code for the function inside your class definition, wherever that may be), so that you can easily process the data in your ranking object in order to determine what each column with should be.

 

[Robbie8]

Hi,
I have sussed the problem by coding the following into my code - this is giving me what I need and I have tested all of the possibilities and it works as I need it to.

<td width="5px"> etc

to each field

 

[gabbagabbahey]

Hi,
I have sussed the problem by coding the following into my code - this is giving me what I need and I have tested all of the possibilities and it works as I need it to.

<td width="5px"> etc

to each field

That will definitely work, but it is pretty static. I thought your aim was to determine the column widths at runtime on your PHP server, based on the length of data you are outputting in each column.

 

[Borek]

I can be missing something, but from what I see this is not a php problem, but html problem. And if such a static solution suits you, it would be probably better to use css to format the table using a single class than to format each field separately.

 

[gabbagabbahey]

I can be missing something, but from what I see this is not a php problem, but html problem. And if such a static solution suits you, it would be probably better to use css to format the table using a single class than to format each field separately.

In addition to this, the width attribute of the <td> tag was deprecated in HTML 4.01, so you should really be using CSS styles instead,which will work in HTML5 as well. Also, its not usually best practise to use pixels to specify widths. I would use either a percentage of the total table width, or an em.

Rather than trying to specify column widths at the table level with a CSS class, I would use <colgroup>, with something like:

<colgroup>
<col style="width:30%">
<col style="width:10%">
<col style="width:20%">
<col style="width:40%">
</colgroup>

for a static solution. For a dynamic solution, you would set the width of each column with a call to a PHP function or methd, or just using a PHP variable.