Search for:

htmltablebvalign

HTML Table Valign​ attribute

The valign attribute in HTML is used to specify the vertical alignment of content within a table cell (<td>) or table header cell (<th>). It is used to control the positioning of content vertically within a table row.

The valign attribute can have the following values:

  • top: Aligns the content to the top of the cell.
  • middle: Vertically centers the content within the cell.
  • bottom: Aligns the content to the bottom of the cell.
  • baseline: Aligns the content to the baseline of the cell. The baseline is the imaginary line on which text sits.
  • absmiddle: Centers the content vertically relative to the middle of the cell. This value is similar to middle but aligns the content based on the font metrics.

Here’s an example of how to use the valign attribute in a table cell:

<table>
  <tr>
    <td valign="top">Content aligned to the top</td>
    <td valign="middle">Content vertically centered</td>
    <td valign="bottom">Content aligned to the bottom</td>
  </tr>
</table>

In this example, each <td> element has a valign attribute that specifies the vertical alignment of the content within the cell.

It’s important to note that the valign attribute is deprecated in HTML5, and its usage is discouraged. Instead, it is recommended to use CSS properties, such as vertical-align, to control the vertical alignment of table cells.

Using CSS, you can achieve the same vertical alignment effect as the valign attribute. Here’s an example:

<style>
  td {
    vertical-align: top; /* or middle, bottom, baseline, etc. */
  }
</style>

<table>
  <tr>
    <td>Content aligned to the top</td>
    <td>Content vertically centered</td>
    <td>Content aligned to the bottom</td>
  </tr>
</table>

In this example, the vertical-align CSS property is applied to the <td> elements to control the vertical alignment of the content.

It’s recommended to use CSS for styling and layout purposes as it provides more flexibility and separation of concerns compared to inline attributes like valign.

In summary, the valign attribute in HTML is used to specify the vertical alignment of content within table cells. However, it is deprecated in HTML5, and it’s recommended to use CSS properties like vertical-align for controlling vertical alignment in modern web development.