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.