Building a “curved” table with php, mysql and html

Posted by: David

http://www.sitepoint.com/graphics/table3.gif

Why build a "curved" table

Many web designers like to build these "curved" tables in order to make their websites more aesthetically appealing.  The tables aren't really curved obviously, but you can alter their contents to make them appear that way.

How to build a "curved" table

It is really simple.  Your easiest solution if you are just going to make one out of HTML is to go to THIS LINK and follow that guide.  If you are familiar with some web design and just haven't done this before I will save you some time and break it down in slow mode right now.

1. Open up an image editing software.
2. Create a 40x40 file (if you want a table with a 20px turn).
3. Make sure the background is transparent.
4. In the center of the file create a circle with the color of your table and extend it to the edge of your file working area.
5. Crop the file into 4 separate files.  You will want each corner of the circle saved into its own file.
6. Save the corners of the circle, and then open up your HTML editor
7. The first <td> tag in the first row of your table will need to have the top left circle image in it with the <img> tag.  Since you are using a 20x20 image, set the <td width=20 height=20>.
8. The next <td> tag in your first row of the table should be empty and only include a colspan option equalling the amount of columns you have in your table without the two edges.  (N-2 = Number of columns - 2 curved columns).
9. The last <td> tag in your first row of the table should have the top right circle image in it with the <img> tag.Since you are using a 20x20 image, set the <td width=20 height=20>.
10. For all of the rows that will contain your information start with a <td> tag with a width of 20 and the bgcolor to match that of your curved column image.  Also end the row with the exact same tag with the width of 20.
11. Repeat steps 7-9 but with the respective images for the bottom.
12. Publish it and make sure you tagged your table correctly.

How do I build a "curved" table with a loop using php and mysql?

Ok, now you have to pay attention.  This is not quite nearly as easy.

Start by doing the usual and creating your database connection, and running your query and saving it to a variable, I use $r (standing for results).

Start by building the first row of your table.

echo '<table><tr bgcolor="#B6E6E7"><td width="20" height="20"><img src="topleft.png" /></td><td colspan="2"></td><img src="topright.png" /></td></tr>';

Now that you have the first row of your table you can begin your loop with your query.  I have my loop set up to check if the row is odd or even in number that way to create a table with different alternating colors for each row.

$i = 1;
while ($row = mysqli_fetch_array($r)) {  // LOOP THROUGH QUERY RESULTS
if ( $i&1 ) {// its an odd result
echo '<tr bgcolor="#B6E6E7"><td width="20"></td><td>'.$row[0].'</td><td>'.$row[1].'</td><td width="20"></td></tr>';
} else {  //it's an even results
echo '<tr><td width="20" bgcolor="#B6E6E7"></td><td>'.$row[0].'</td><td>'.$row[1].'</td><td bgcolor="#B6E6E7" width="20"></td></tr>';

}
$i ++;
} // END  LOOP

Now if you noticed, the even rows had the <tr> tag with a bgcolor instead of the <td> tag.  This is because I want those entire rows to match the color of the table corners.  The odd rows only had the first and last <td> tags with the bgcolor selected so that it would appear our table was outlined.

The final thing you have to do is finish off your table by essentially doing the same thing you did in the table's first row.

echo '<tr bgcolor="#B6E6E7"><td width="20" height="20"><img src="bottomleft.png" /></td><td colspan="2"></td><img src="bottomright.png" /></td></tr></table>';

I hope at this point you can tell what is going on.  The table is done.  You can release your query results.

Now you can see something similar to

http://www.sitepoint.com/graphics/table3.gif

But with your data in it and the rows are alternating colors. Simple, yet appealing.