Valign attribute is obsolete

Udemy - 30 Amazing Days of HTML and CSS Learning
30 Amazing Days of HTML and CSS Learning
Learn HTML & CSS and start creating your own websites within 30 days

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; }

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; }

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; }.


TechRabbit ad 300x250

Justdeals Daily Electronics Deals1x1 px