Quote:
Originally Posted by holdit
...How do I center the table and it's contents?
|
Try using the following styles in your css stylesheet:
Code:
div.tab {
display: block;
width: 60%; /* here use the width you want */
height: auto; /* Important: don't forget this property */
margin-left: 20%;
}
table {
width: 100%;
text-align: center;
border: 5px solid black;
}
td {
margin: 0;
padding: 0;
text-indent: 0;
text-align: center;
}
And in your .html sheet write:
Code:
<div class="tab">
<table>
<thead>
<tr>
<th>Lorem ipsum dolor sit amet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nulla ac tellus nunc</td>
</tr>
<tr>
<td>Phasellus imperdiet leo metus</td>
</tr>
<tr>
<td>Donec metus ligula</td>
</tr>
<tr>
<td>Etiam lobortis, massa ac aliquam auctor</td>
</tr>
</tbody>
</table>
</div>
This is a workaround for ADE and readers based on ADE, otherwise is not neccesary to include the table inside a "div" block. As you can see, the trick is not to center the table but the "div block"

Once centered the "div block", we can fill it with the table.
To center the "div block" we need to fix a width for it (what you want) and after that to set a margin-left according to the width. This left margin must be equal to:
(100% - block width %) / 2
In the above example we have:
(100% - 60%) / 2 = 20%
Regards
Rubén