CoderTools Web site

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>
HTML & CSS Editor with FTP / FTPS
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 no real css equivalent!
  • Most formatting commands have been completely removed from html
  • align is roughly equivalent to text-align
  • valign is roughly equivalent to vertical-align. Although need to be careful here

TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

10/23/2014 10:40:01 PM
Terms Of Use | Privacy Statement | Copyright 2006-2010 © Independence Software LLP