CSS align - Aligning Text in an HTML Table
Description
One of the key differences between using straight html
and html with css is the alignment of text within an html document.
Here is an old example:
<table bgcolor="gray" cellpadding="5" cellspacing="5" width="100%" height="100px">
<tr>
<td width="50px" valign="top" align="middle">Text in a table cell</td>
<td>Text in a another table cell</td>
</tr>
</table>
Now with CSS:
<style>
table { background-color: gray; width: 100%; height: 100px; }
#col1 { width: 50px; vertical-align:text-top; text-align: center; }
</style>
<table cellspacing="5">
<tr>
<td id="col1">Text in a table cell</td>
<td>Text in a another table cell</td>
</tr>
</table>
| Text in a table cell |
Text in another table cell |
Things to note:
- cellspacing has not real css equivalent!
- Most formatting commands have been completely removed from the css html
- align is roughly equivalent to text-align
- valign is roughly equivalent to vertical-align. Although need to be careful here