[SOLVED] HTML element TABLE failing to center in DIV despite CSS settings
by Turbocapitalist from LinuxQuestions.org on (#6M972)
I am unable to place a table in the center of the page, on Firefox and Chromium. The other elements, such as P and IMG, center just fine. But the TABLE element stays stuck over on the left side of the page no matter what I have tried so far. Here is what I have at the moment.
Code:<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css" media="screen">
DIV { text-align: center; background-color: #edd; }
IMG { border: thin solid #080; }
TABLE { border: thin solid #080; }
</style>
</head>
<body>
<div>
<p>A Test</p>
<img src="/graphic/sample.png" width="1000"
height="400" alt="sample graphic" />
<br />
<table>
<caption>alignment test</caption>
<thead>
<tr> <th> </th> <th>One</th> <th>Two</th> </tr>
</thead>
<tbody>
<tr> <th>1</th> <td>aaa</td> <td>bbb</td> </tr>
<tr> <th>2</th> <td>ccc</td> <td>ddd</td> </tr>
</tbody>
</table>
</div>
</body>
</html>I would think that TABLE would behave like P and IMG within DIV in regards to its horizontal position. What have I missed?
Code:<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css" media="screen">
DIV { text-align: center; background-color: #edd; }
IMG { border: thin solid #080; }
TABLE { border: thin solid #080; }
</style>
</head>
<body>
<div>
<p>A Test</p>
<img src="/graphic/sample.png" width="1000"
height="400" alt="sample graphic" />
<br />
<table>
<caption>alignment test</caption>
<thead>
<tr> <th> </th> <th>One</th> <th>Two</th> </tr>
</thead>
<tbody>
<tr> <th>1</th> <td>aaa</td> <td>bbb</td> </tr>
<tr> <th>2</th> <td>ccc</td> <td>ddd</td> </tr>
</tbody>
</table>
</div>
</body>
</html>I would think that TABLE would behave like P and IMG within DIV in regards to its horizontal position. What have I missed?