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:
Item 1 | Item 2 | Item 3 |
Example if the database field has only 2 items (using the same script)
Item 1 | Item 2 |
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 🙂
Related Posts
January 18, 2014
Must Read UI / UX Related News 2014
Must Read UI / UX Related News 2014 - A collection of interesting UI and UX design news, updates, trends, etc.
May 25, 2011
Away3D – Transparent Planes
September 7, 2013
3DS Max Adventures! Volkswagen Jetta WIP
Work in progress Volkswagen Jetta car 3D model
June 13, 2011
The Unofficial LEGO Minifigure Catalog
The LEGO Minifigure Catalog promotion video that I was making is up and running! The purpose of the video is to show how extensive the book actually is with over 3600 minifigure photographs with professional quality, interconnected metadata and theme taxonomy.