With HTML 4, you can vertically align an element in a cell in a
table using the valign parameter, e.g.:
<td valign="top"> to vertically align text or
an image to the top of the cell. However with
HTML5, use of the valign parameter for vertically aligning
elements of a table has been deprecated. E.g., if you check your HTML
code for adherence to the HTML 5 standard with the
Nu Html Checker provided by the
World
Wide Web Consortium, you will see an error similar to the following
one displayed if you are using valign in the HTML code for a table.
The valign attribute on the
td
element is obsolete.
Use CSS instead.
From line 73, column 5; to line 74, column 17
able>↩<tr><td valign="top">↩<img
So how can you achieve the same effect, but make your HTML code HTML 5 compliant using Cascading Style Sheets, instead? If you wanted to specify vertical alignment in just one cell, you could use the following CSS code for that cell:
<td style="vertical-align: top;">
Or I could include the following style section in the HEAD
section of the HTML code for the webpage, if I wanted all cells in any table
on the page to have elements within the cell aligned to the top of the
cell:
<style type="text/css">
th, td { vertical-align: top; }
</style>If you didn't want to use that alignment for every td or
th in every table in a page, you could create a CSS class name,
e.g., topAligned, as shown below:
<style type="text/css">
.topAligned { vertical-align: top; }
</style>You could then apply that class to any td in a
table where you wanted elements within the cell to be aligned to the top
of the cell. I.e.:
<td class="topAligned">Some text</td>
Or the following CSS for an image in a cell:
<td class="topAligned"><img src="someimage.png" alt="Some image"></td>
If you want text centered horizontally within a cell, you can use
td { text-align: center; vertical-align: top; }.