开发者

PHP: html table layout with data coming from query

I'm trying to fix the layout of the data coming from the database in this way:

The query is returning names of games and the points awarded for each game.

The layout I need is like that:

in one row the name of the game and in a row below its points, two columns with this and then carriage break until all results are displayed.

Please see this image, it'll show some light:

开发者_运维百科

http://217.116.9.130/wordpress/HTMLtableFROMquery.gif

What I have done by far is the following code, but I cannot display the layout needed.

![<?php
 echo "<table border=1><tr>";

        $count=0;
            $sql2 = "select * from games";
                $res2= $db_class->select($sql2);   
                   if (mysql_num_rows($res2)>0) {
                   while($row2 = $db_class->get_row($res2)){

                      $gname = $row2['gamename'];
                      $gpoints = $row2['gamepoints'];

                       $count++;   

                       echo"<td>".$gname."</td>";
                       if($count % 2 != 0)
                       {
                        echo "</tr><tr>";
                         echo"<td>".$gpoints."</td>";
                       }
               } 
          } 

echo "</tr></table>";  
?>


What about some divs?

<?php
 echo "<table border=1><tr>";

        $count=0;
            $sql2 = "select * from games";
                $res2= $db_class->select($sql2);   
                   if (mysql_num_rows($res2)>0) {
                   while($row2 = $db_class->get_row($res2)){

                      $gname = $row2['gamename'];
                      $gpoints = $row2['gamepoints'];

                       $count++;   

                       echo"<td>
                        <div class=\"gname\">".$gname."</div>
                        <div class=\"gpoints\">".$gpoints."</div>
                        </td>";
                       if($count % 2 != 0)
                       {
                        echo "</tr><tr>";
                       }
               } 
          } 

echo "</tr></table>";  
?>


You may want to create a table for each set of name-score, and then style it after your needs. You can use the border property in CSS to style your table, and also table:nth-child(2n){ clear: left; to have only two tables on each row. I believe this method is more flexible, as CSS gives endless possibilities for styling an element.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜