Tools, FAQ, Tutorials:
'valign' - Vertical Alignment in HTML Table
How To Control Vertical Alignment?
✍: FYIcenter.com
By default, text in all table cells are aligned to the top vertically.
If you want to control vertical alignment yourself, you need to use
the "valign" attribute in a "tr" element or a "td" element:
Below is a tutorial example of "valign" attributes:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Verical Alignment</title> </head> <body> <h4>Online Order</h4> <table border="1" width="250"> <tr> <td>Description</td> <td align="right">Qty</td> <td align="right">Price</td> </tr> <tr valign="bottom"> <td>Email account with 100MB storage, Webmail interface, POP3/IMAP access, and anti-spam protection</td> <td align="right">10</td> <td align="right">$9.90</td> </tr> <tr valign="middle"> <td>FYIcenter.com ad space of 90x30 pixel banner</td> <td align="right">1</td> <td align="right">$99.00</td> </tr> <tr> <td>1 year access to the VIP members area with no hidden fees, and 100% money back guarantee</td> <td align="right" valign="top">1</td> <td align="right" valign="top">$199.00</td> </tr> </table> </body> </html>
If you save the above document as vertical_alignment.html, and view it with
Internet Explorer, you will see that the first row is aligned to bottom
and the third row is aligned to top as shown below:
Â
⇒HTML Tables and Table Cells
⇒⇒HTML Tutorials
2017-05-05, 2522👍, 0💬
Popular Posts:
What properties and functions are supported on requests.models.Response objects? "requests" module s...
How to build a test service operation to dump everything from the "context.Request" object in the re...
How to use the "set-body" Policy Statement for an Azure API service operation? The "set-body" Policy...
How To Control Padding Spaces within a Table Cell? Cell padding spaces are spaces between cell inner...
How to add request URL Template Parameters to my Azure API operation 2017 version to make it more us...