Month: July 2011

HTML: Fixed Column Width Regardless of Content

I was doing some scripting in PHP to create tables with data drawn from a database. Drawing multiple fields using the same script caused the table layout to shift. This can be fixed using the tag within the table. I thought it was kind of interesting, so I thought sharing it using an example.

An example of a 3 column table setup would be something like this:

<table width="400" border="1">
   <?php $table_count = 0; ?>
      <?php if(count($this->items) > 0):   //if there's content
         foreach($this->items as $content):   //loop through all content
            if( $table_count == 0 ): ?>
               <tr>
      <?php endif; ?>
         <td width="33%">   //to create 3 columns
            //insert content here
         </td>
            <?php if( $table_count == 2 ): ?>   //3 columns, so table_count = 3 - 1 = 2
               </tr>
            <?php $table_count = 0; ?>   //column length reached, reset count
               <?php else: ?>
                  <?php $table_count++; ?>
            <?php endif; ?>
</table>

I was using the same script to parse multiple database fields onto 1 page. E.g. an employees page of a company. The page would display all the employees categorized in different positions within the company, so the number of people per position varies.

The script shown above would be used for all the categories to create a 3 column table.
Creating the table works fine, if we parse content of 3 or more items from the database to PHP. But a problem occurs with the layout if there are less items than the number of columns within a category.

Example with enough items:

Example if the database field has only 2 items (using the same script)

Or look at the visual example

To fix this, simply add a table-layout CSS style and <col>

><table width="70%" style="table-layout:fixed">
                     <col width="33%">
                     <col width="33%">
                     <col width="33%">

Have fun :)

by Elwin Lee