How to style a table that is part html and part php

Question

I found it hard to phrase this question but I will try my best. I am creating a php and MYSQL leaderboard, it all works but now I want to style it. I don't know very much css and this might be a simple fix. I am trying to style the table so that all the data table elements sit symmetrical like a table should be, and aligned to the center of the headers. I think it is not working because I technically have 2 tables I am trying to style and they are not working in conjunction with each other. Here is the code and forgive my usernames in the table, I get lazy sometimes.

<!DOCTYPE html>
<html>
<head>
<title>Leaderboards</title>
<style type="text/css">
th {
  overflow: auto;
  font-size: 25px;
  border: 1px solid;
  padding: 5px;
  margin: 2px 2px 2px 2px;
}
td {
  font-size: 25px;
  padding-left: 30px;
  padding-top: 3px;
}
</style>
</head>
<body>
<h1>Leaderboard</h1>
<table>
<tr>
    <th>Rank</th>
    <th>User</th>
    <th>Score</th>
</tr>
</table>
<?php
include 'HytecFunctions.php';
$conn=connectDB();

$rank = 1;

  $sql = 'SELECT Name, Score FROM Names ORDER BY Score DESC';
foreach ($conn->query($sql) as $row) {
echo "<table>
        <td>$rank</td>
        <td>$row[Name]</td>
        <td>$row[Score]</td>
        </tr>
        </table>";
$rank++;
}

  $conn->close();
?>
</body>
</html>

The table as it shows in my browser

Because you try to create another table every loop. Try to put them all in a single table. — Logan Wayne, May 03 '16 at 00:14
just take out the `` tags outside the loop, the whole table row `` should be the one inside, @RajdeepPaul no, its not executed in each iteration, this is most likely a wrapped pdo api, `->query()` result can be directly used inside the `foreach`, [here](http://php.net/manual/en/pdo.query.php) — Kevin, May 03 '16 at 00:19
@RodrigoDuterte Oh, nice, thanks for the documentation link. :-) — Rajdeep Paul, May 03 '16 at 00:21

score 3 · Accepted Answer · edited May 23 '17 at 10:29

Because you try to create another table every loop. Try to put them all in a single table.

<table>
    <tr>
        <th>Rank</th>
        <th>User</th>
        <th>Score</th>
    </tr>

    <?php

        include 'HytecFunctions.php';
        $conn=connectDB();

        $rank = 1;

        $sql = 'SELECT Name, Score FROM Names ORDER BY Score DESC';
        foreach ($conn->query($sql) as $row) {
            echo '<tr>
                      <td>'.$rank.'</td>
                      <td>'.$row["Name"].'</td>
                      <td>'.$row["Score"].'</td>
                  </tr>';
            $rank++;
        }

        $conn->close();

    ?>
</table>

Note: Don't mind much the way I input your $row variables. Yours will still work even if you use double tick (") to display rows. I just use a single tick (') to display your data as is to have a much cleaner look on your code. Refer here for the difference.

Perhaps make note of why you added quotes to the keys in `$row`. Just so OP knows. — mferly, May 03 '16 at 00:29
Dang thank you for the fast and quality responses everyone, this worked and my project I have been working on is now complete. Thank you so much!!! — Frank Cerny, May 03 '16 at 00:35

How to style a table that is part html and part php

1 Answers1