7

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: Moved to HTML/CSS

Votes + Comments
tested
y
2
Contributors
2
Replies
15
Views
3 Years
Discussion Span
Last Post by [NOPE]FOREVER
1

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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.