How can I display data from MYSQL database using HTML table from a PHP file?

Question

Using the PHP code below I get two separate tables for each row in MYSQL database table. How can I get the code to display the data in one table? Also for some reason the CSS is not getting applied to some parts of the PHP file where I have links to edit and remove data, and the background color of the table row. Should I apply the CSS directly in the PHP file? or is there any other way to do it?

<?php
    session_start();
    mysqli_report(MYSQLI_REPORT_ALL ^ MYSQLI_REPORT_INDEX);
    $initials=parse_ini_file("../.ht.asetukset.ini");
    try {
        $connection=mysqli_connect($initials["databaseserver"], 
                                   $initials["username"],
                                   $initials["password"],
                                   $initials["database"]
                                   );
    } catch (Exception $e) {
        header("Location:../html/yhteysvirhe.html");
        exit;
    }
?>
<?php
    include "../html/admin_header.html";
?>
 <?php
 //getting result from database
 $print=mysqli_query($connection, "SELECT * FROM users");
 while ($row=mysqli_fetch_object($print)) {
 echo "<table>";
    echo "<tr>";
    echo "<th>ID</th>";
    echo "<th>First Name</th>";
    echo "<th>last Name</th>";
    echo "<th>User Name</th>";
    echo "<th>Email</th>";
    echo "<th>Password</th>";
    echo "<th>Description</th>";
    echo "<th>Delete</th>";
    echo "<th>Edit</th>";
    echo "</tr>";
    echo "<tr>";
    echo "<tr>";
    echo "<td><h2>$row->fname</h2></td>";
    echo "<td><h2>$row->lname</h2></td>";
    echo "<td><h2>$row->uname</h2></td>";
    echo "<td><h2>$row->email</h2></td>";
    echo "<td><h2>$row->paswd</h2></td>";
    echo "<td><h2>$row->descrip</h2></td>";
    echo "<td><h2><a style='color:white' href='./admin_remove.php?poistettava=$row->id'>Delete</a></h2></td>";
    echo "<td><h2<a href='./admin_edit.php?editable=$row->id'>Edit</a></h2></td>";
 }
    echo "</tr>";
    echo "</table>";

    mysqli_close($connection);
?>

<?php
    include "../html/admin_footer.html";
?>

This is the result I get:

 /*body background color.*/ body { background-color: #2f303a; } /*Removing underline from hyper links.*/ a { text-decoration: none; color: #1d19f6; } /*navbar bakground color change. */.navbar { background-color: #c4c4c4; } /* Spaces between items are increased in the navbar.*/.navbar-brand { padding-left: 40px; } /* Spaces between items are increased in the navbar.*/.nav-item { padding-left: 80px; padding-right: 80px; } /**/.nav-link:hover { background-color: #eeea14; border-radius: 25px; } a:hover { color: #00ff6a; } /* Search bar with rounded corners and white & blue background.*/.navbar1 { background-color: #0000ff; border-radius: 25px; } /* Search bar with rounded corners and white & blue background.*/.btn { color: #ffffff; border: none; border-radius: 25px; } /* Search bar with rounded corners and white & blue background.*/.form-control1 { color: #555555; border: none; border-radius: 25px; padding-left: 20px; width: 299px; margin-left: -20px; } /*box config.*/.box { background-color: #ffffffea; width: auto; height: 556px; position: relative; flex-direction: column; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } /*can be used to add spacing between items stacked on top of each other.*/.padding { padding-bottom: 1%; } /*container.*/.container { width: auto; height: auto; position: static; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-around; align-items: center; }.sec { background-color: #ffffffea; width: auto; height: 556px; position: relative; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2f303a; color: #ffffff; text-decoration: none; }.sec1 { padding-top: 1%; background-color: #ffffffea; width: auto; height: auto; position: relative; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2f303a; color: #ffffff; } /*white boxes config.*/.box1 { border-radius: 30px; background-color: #ffffff; color: #1d19f6; width: 358px; height: 293px; position: relative; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 20%; margin-bottom: 20%; text-shadow: 2px 2px 4px #000000; box-shadow: 10px 10px 5px #494848; }.box2 { width: auto; display: flex; background-color: #000000; padding: 15px 15px 15px 15px; } table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: blue; } /*footer config*/ footer { display: flex; flex-flow: column wrap; flex-direction: column; justify-content: space-around; align-items: center; background-color: #2f303a; padding: 15px 15px 15px 15px; color: #ffffff; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta name="author" content=""> <meta name="description" content="Team 14 project work, The website contains basic web development guides utilizing HTML5, CSS. JavaScript and Bootstrap"> <title>admin</title> <:--Link to bootstrap.--> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="../css/style:css"> <.--Link to local css file.--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https?//fonts.googleapis.com/css2:family=Dosis&display=swap" rel="stylesheet"> </head> <body> <header> <;--navigation bar starts here:--> <nav class="navbar navbar-expand-lg navbar-light"> <div class="container-fluid"> <a class="navbar-brand" href="index,html" style="color; #0000ff: font-family;'Dosis'. sans-serif. font-size. 20px."><b>CodeSchool</b></a> <div id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="./html.html">HTML Basics</a> </li> <li class="nav-item"> <a class="nav-link active" href="./css.html">CSS Basics</a> </li> <li class="nav-item"> <a class="nav-link active" href="./js.html">JavaScript</a> </li> <li class="nav-item"> <.--anchor link added.--> <a class="nav-link active" href="#a">About Us</a> </li> <li class="nav-item"> <.--anchor link added:--> <a class="nav-link active" href="#b">Contact Us</a> </li> <li class="nav-item"> <:--anchor link added.--> <a class="nav-link active" href="#">Log In / Sgin Up</a> </li> </ul> </div> </div> </nav> </header> <.--navigation bar ends here?--> <main> <.--box with search bar starts here.--> <div class="box"> <h1 class="padding"><b>Welcome to the Admin Page</b></h1><br> <h1 class="padding"><b>Here you can edit users' data and/or remove profiles from the database</b></h1><br> </div> <?--box with search bar ends here.--> <:--other content.--> <div class="sec1"> <h1 class="padding"><b>Users list.</b></h1><br> </div> <div class="sec"> <table> <tr> <th>ID</th> <th>First Name</th> <th>last Name</th> <th>User Name</th> <th>Email</th> <th>Password</th> <th>Description</th> <th>Delete</th> <th>Edit</th> </tr> <tr> <tr> <td> <h2>1</h2> </td> <td> <h2>Admin</h2> </td> <td> <h2>Admin</h2> </td> <td> <h2>admin</h2> </td> <td> <h2></h2> </td> <td> <h2>password</h2> </td> <td> <h2>Adiminstrator</h2> </td> <td> <h2><a style='color?white' href='./admin_remove.php?poistettava=1'>Delete</a></h2> </td> <td> <h2<a href='./admin_edit.php.editable=1'>Edit</a> </h2> </td> <table> <tr> <th>ID</th> <th>First Name</th> <th>last Name</th> <th>User Name</th> <th>Email</th> <th>Password</th> <th>Description</th> <th>Delete</th> <th>Edit</th> </tr> <tr> <tr> <td> <h2>2</h2> </td> <td> <h2>test</h2> </td> <td> <h2>test</h2> </td> <td> <h2>tester</h2> </td> <td> <h2>test@test?test</h2> </td> <td> <h2>test</h2> </td> <td> <h2>testing</h2> </td> <td> <h2><a style='color.white' href='./admin_remove.php.poistettava=2'>Delete</a></h2> </td> <td> <h2<a href='./admin_edit;php,editable=2'>Edit</a> </h2> </td> </tr> </table> </div> <div class="box" id="a"> <h1><b>About Us</b></h1> <h3>We are a group of students dedicated to sharing our knowledge as we progress with our studies.</h3> </div> <;--content ends here,--> </main> <.--Footer starts here.--> <footer> <section class="mb-4" id="b"> <!--Section heading--> <h2 class="h1-responsive font-weight-bold text-center my-4">Contact Us</h2> <!--Section description--> <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within a matter of hours to help you.</p> <div class="row"> <div class="col-md-9 mb-md-0 mb-5"> <form id="contact-form" name="contact-form" action="mail.php" method="POST"> <div class="row"> <div class="col-md-6"> <div class="md-form mb-0"> <input type="text" id="name" name="name" class="form-control"> <label for="name" class="">Your name</label> </div> </div> <div class="col-md-6"> <div class="md-form mb-0"> <input type="text" id="email" name="email" class="form-control"> <label for="email" class="">Your email</label> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="md-form mb-0"> <input type="text" id="subject" name="subject" class="form-control"> <label for="subject" class="">Subject</label> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="md-form"> <textarea id="message" name="message" rows="2" class="form-control md-textarea"></textarea> <label for="message">Your message</label> </div> </div> </div> </form> <div class="text-center text-md-left"> <a class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a> </div> <div class="status"></div> </div> <div class="col-md-3 text-center"> <ul class="list-unstyled mb-0"> <li><i class="fas fa-map-marker-alt fa-2x"></i> <p>Visamäentie 35 A, 13100 Hämeenlinna</p> </li> <li><i class="fas fa-phone mt-4 fa-2x"></i> <p>(+358) 23456 789</p> </li> <li><i class="fas fa-envelope mt-4 fa-2x"></i> <p>email@email.com</p> </li> </ul> </div> </div> </section> <div class="container"> <div class="py-3 my-4"> <ul class="nav justify-content-center border-bottom pb-3 mb-3"> <li class="nav-item"><a class="nav-link px-2 text-muted">Facebook</a></li> <li class="nav-item"><a class="nav-link px-2 text-muted">Instagram</a></li> <li class="nav-item"><a class="nav-link px-2 text-muted">LinkedIn</a></li> <li class="nav-item"><a class="nav-link px-2 text-muted">Discord</a></li> </ul> <p class="text-center text-muted">&copy; 2022 HAMK, Team 14</p> </div> </div> </footer> <!--Footer ends here.--> </body> </html>

Any help would be much appreciated!

Answer 1

You are looping the table tag in while loop that's why multiple tables are getting created. Try doing like this

 echo "<table>"; echo "<tr>"; echo "<th>ID</th>"; echo "<th>First Name</th>"; echo "<th>last Name</th>"; echo "<th>User Name</th>"; echo "<th>Email</th>"; echo "<th>Password</th>"; echo "<th>Description</th>"; echo "<th>Delete</th>"; echo "<th>Edit</th>"; echo "</tr>"; while ($row=mysqli_fetch_object($print)) { echo "<tr>"; echo "<td><h2>$row->fname</h2></td>"; echo "<td><h2>$row->lname</h2></td>"; echo "<td><h2>$row->uname</h2></td>"; echo "<td><h2>$row->email</h2></td>"; echo "<td><h2>$row->paswd</h2></td>"; echo "<td><h2>$row->descrip</h2></td>"; echo "<td><h2><a style='color:white' href='./admin_remove.php?poistettava=$row->id'>Delete</a></h2></td>"; echo "<td><h2<a href='./admin_edit.php?editable=$row->id'>Edit</a></h2></td>"; echo "</tr>"; } echo "</table>";

Answer 2

Not sure how much of it will be solved,

but I would start by taking the <table> tag and the first row of <th> tags outside of the while loop (just like your closing </table> is outside of the loop):

echo "<table>";
echo "<tr>";
echo "<th>ID</th>";
echo "<th>First Name</th>";
echo "<th>last Name</th>";
echo "<th>User Name</th>";
echo "<th>Email</th>";
echo "<th>Password</th>";
echo "<th>Description</th>";
echo "<th>Delete</th>";
echo "<th>Edit</th>";
echo "</tr>";
while ($row=mysqli_fetch_object($print)) {
    echo "<tr>";
    echo "<td><h2>$row->id</h2></td>";
    echo "<td><h2>$row->fname</h2></td>";
    echo "<td><h2>$row->lname</h2></td>";
    echo "<td><h2>$row->uname</h2></td>";
    echo "<td><h2>$row->email</h2></td>";
    echo "<td><h2>$row->paswd</h2></td>";
    echo "<td><h2>$row->descrip</h2></td>";
    echo "<td><h2><a style='color:white' href='./admin_remove.php?poistettava=$row->id'>Delete</a></h2></td>";
    echo "<td><h2<a href='./admin_edit.php?editable=$row->id'>Edit</a></h2></td>";
    echo "</tr>";
}
echo "</table>";