Member Avatar for Member #1106881

I have a table that extracts data from a mysql database, I want the table to be centerd on the screen. I have used text-align: center; but obviously it only centers the text inside the div.

here is my css

.tableOuter
{
    text-align: center;
}

.tableInner
{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

and the table inside tableOuter that I want centerd

<div class = "tableOuter">
<body>
<h1 style="text-align:center" > View customer table</h1>
<div class = "tableInner">
<?php
$result = mysql_query("SELECT * FROM customer");
echo "<br>";
echo "<table border='1'>
<tr>
<th>Customer ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Address</th>
</tr>";

while($row = mysql_fetch_array($result))
{
    echo "<tr>";
    echo "<td>" . $row['cust_number'] . "</td>";
    echo "<td>" . $row['first_name'] . "</td>";
    echo "<td>" . $row['last_name'] . "</td>";
    echo "<td>" . $row['phone'] . "</td>";
    echo "<td>" . $row['address'] . "</td>";
    echo "</tr>";
}
echo "</table>";
?>
</div>
<br>
<a href="logout.php"><input type = "button" class = "buttonView" id = "buttonLogout" value = "Logout"></a>
<a href ="selectoption.php"><input type = "submit" class = "buttonView"  id = "buttonReturn" value = "Return" ></a>
</div>

Cheers!

Edited by pritaeas because: Moved to HTML/CSS
  • 2 Contributors
  • 2 Replies
  • 7K Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Member #1106881
joyc123 commented: y +0
thelove commented: tested +0

Dani AI

Generated

text-align affects inline content, not the table element itself. The simplest robust way to horizontally center a table today is to let the container do the layout and center its child with Flexbox. This keeps your PHP unchanged and avoids extra wrappers.

.tableOuter {
  display: flex;
  justify-content: center; /* centers the table horizontally */
  width: 100%;
}

.tableOuter table {
  margin: 0;               /* ensure no conflicting margins */
  border-collapse: collapse;
}

A few additional notes that will save time later:

  • Do not put a <body> tag inside a <div>; that is invalid HTML and can cause unpredictable rendering. Keep <body> as the root content container.
  • Avoid wrapping <input> inside <a>; that is invalid interactive-content nesting. Use a styled <a> or a <button> instead (see MDN on the a element and button).
  • If you ever set the table to width: 100%, it will already span the viewport and will not appear "centered"; remove that width or use a max-width.
  • For accessibility, use <thead>/<tbody> and scope="col" on header cells so screen readers announce headers correctly (MDN: Table basics).
  • Unrelated to CSS, but important: the mysql_* API shown is removed in PHP 7+. Migrate to mysqli or PDO (PHP manual).

Reference: MDN on Flexbox and CSS-Tricks on centering.

Recommended Answers

All 2 Replies

Member Avatar for Alberto Bucur

Here is a simple:

<style>
    .tableOuter
    {
        text-align: center;
    }

    .tableInner
    {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        background: blue;
    }

    #mytable
    {
        margin-left: auto;
        margin-right: auto;
        background-color: yellow;
    }
  </style>
  <body>
      <div class="tableOuter">
        <div class="tableInner">
            <table id="mytable">
            <tr>
                <th>Customer ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone</th>
                <th>Address</th>
            </tr>
            <tr>
                <td>xxx</td>
                <td>xxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
            </tr>
            </table>
        </div>
      </div>
  </body>
Member Avatar for Member #1106881

Thankyou!

commented: i +0
commented: tested +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.