简体   繁体   中英

I need to populate an HTML table with PHP and MYSQL

I am making a leaderboards for a rock paper scissors game that I have made. I need to retrieve the data from the SQL table and insert it into my HTML table. I have got the code to retrieve the values from the table but it prints on the top left of the page and not in my CSS-Styled table.

<?php
            $connect = mysql_connect("localhost","username", "passworkd");
            if (!$connect) {
                die(mysql_error());
            }
            mysql_select_db("username");
            $results = mysql_query("SELECT * FROM highscore ORDER BY Score");
            while($row = mysql_fetch_array($results)){
            ?>
                <tr>
                <td><?php echo $row['Name']?></td>
                <td><?php echo $row['Score']?></td>
                <td><?php echo $row['Date']?></td>
                </tr>
                    }
                    ?> 
            <?php


<html>
<head>

<link rel="stylesheet" href ="css/table.css">
<title>Leaderboards - Rock, Paper, Scissors</title>
</head>
<body>
<div class="easyTable" >
                <table >
                    <tr>
                        <td colspan="3"><a style="color: white;"href="TypingTest.html">Typing Test, WPM - Easy<a></td>
                    </tr>
                    <tr id="easyTitle">
                        <td style="color: white;"> <?php echo $row['Name']?> 
                            Name
                        </td>
                        <td  style="color: white;"><?php echo $row['Score']?>
                            Score
                        </td>
                        <td  style="color: white;"><?php echo $row['Date']?>
                            Date
                        </td>
                    </tr>
                    <tr>
                        <td >

                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                    </tr>
                     <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>
                     <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>
                     <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>
                     <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>

                </table>
            </div>

try the following:

<?php
    $connect = mysql_connect("localhost","username", "passworkd");
    if (!$connect) {
        die(mysql_error());
    }
    mysql_select_db("username");
    $results = mysql_query("SELECT * FROM highscore ORDER BY Score");
?>

<html>
<head>

<link rel="stylesheet" href ="css/table.css">
<title>Leaderboards - Rock, Paper, Scissors</title>
</head>
<body>
<div class="easyTable" >
    <table >
        <tr>
            <td colspan="3"><a style="color: white;"href="TypingTest.html">Typing Test, WPM - Easy<a></td>
        </tr>
        <?php while($row = mysql_fetch_array($results)) : ?>
        <tr id="easyTitle">
            <td style="color: white;"> <?php echo $row['Name']?> 
                Name
            </td>
            <td  style="color: white;"><?php echo $row['Score']?>
                Score
            </td>
            <td  style="color: white;"><?php echo $row['Date']?>
                Date
            </td>
        </tr>
        <?php endwhile;?>
    </table>
</div>

This will make sense if you interpret it sequentially. The query gets executed at the top : mysql_query("SELECT * FROM highscore ORDER BY Score"); . Then the HTML start to get printed out. Then it runs into the while loop.

Also, you should consider learning about PDO and mysqli_ and move away from mysql_ commands.

To address your immediate question, you are echoing the table rows before you start the HTML document or the table in which they go. So the PHP prints the table info before anything else. A much bigger problem is that you have a second PHP opening tag filled with non-PHP code. You're also using the MySQL functions instead of MySQLi or PDO, which is a bad practice.

Here's a quick example to give you a better idea of what you should be doing to get the PHP variables in the HTML table.

<?php $connect = mysql_connect("localhost","username", "passworkd");
                if (!$connect) {
                    die(mysql_error());
                }
                mysql_select_db("username");
                $results = mysql_query("SELECT * FROM highscore ORDER BY Score");
?>
<!DOCTYPE html>
<html>
    <head><!--header stuff--></head>
    <body>
        <table>
            <?php while($row = mysql_fetch_array($results)): ?>
                <tr>
                   <td><?php echo $row['Name']; ?></td>
                   <td><?php echo $row['Score']; ?></td>
                   <td><?php echo $row['Date']; ?></td>
               </tr>
            <?php endwhile; ?>
        </table>
    </body>
</html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM