Vertical alignment of table cell content in Css

If you set your table’s width to a small value, or if you have a
lot of content in one cell and relatively little in an adjacent
one, something else becomes apparent: web browsers vertically
align content in the middle of cells. (Generally, horizontal
alignment is, as with other text, to the left.) See the image
on the right for an example.
Historically, designers have used the valign attribute to
override this vertical-centering behavior—the attribute can
be added to a row or cell start tag, and set to top:
valign="top". Other values are middle (the default) and
bottom, the results of which are shown in the adjacent
screenshot.
The problem with valign is that it’s presentational markup and shouldn’t really be used; in
fact, because it’s a deprecated attribute—which means it can’t be used if you’re creating
valid XHTML Strict documents—you should instead work with the CSS alternative, the
vertical-align property, which provides practically identical results.
As an example of vertical-align in use, say you wanted all cells within a table that had a
class value of priceList to be vertically aligned to the top; you could add the following
rule to your CSS:
table.priceList td {
vertical-align: top;
}
This results in the same effect as valign="top", as discussed earlier. Likewise, you can set
the vertical-align property to middle, bottom, and various other values, as outlined
in Appendix D, “CSS Reference.”That’s pretty much where many web designers leave tables; however, there are other elements
and attributes that should be used when creating tables, which will be covered in
the following sections.
 

Setting dimensions and alignment

As you can see from the examples so far, browsers by default set cell sizes to the smallest
possible values that are large enough to accommodate the contents and any cell padding
settings defined. Although this is suitable for the majority of purposes, designers tend to
want more visual control over layouts.
Long-time designers may be well-versed in the practice of using height and width attributes
to control table and cell dimensions, but beware. The width attribute is fine to use on
table start tags (the possible values of which are a number denoting the width in pixels of
the table, and a percentage, which is a percentage of the parent element’s size). However,
the height attribute is nonstandard and fails in the majority of web browsers (in fact, if
using an XHTML DTD, it fails in every currently shipping mainstream browser), which might
come as something of a shock to those people who enjoy centering content in a browser
window by using a table.
As for setting widths and heights within table cells, that’s something that should be
avoided altogether—height and width attributes within table cells are deprecated. You
might argue that this is irrelevant—after all, all major browsers support these attributes.
Although this is true, deprecated attributes are not guaranteed to be supported in the
future. Also, table cells always expand to accommodate the widest or tallest element in a
row or column. As a result of this, defining heights and widths is often a futile attempt to
control the uncontrollable.