HTML <th> align Attribute

The align attribute in the <th> tag is used to specify the horizontal alignment of header cell content. It was commonly used in older HTML versions but is now deprecated in HTML5.

Specifies horizontal alignment (e.g., left, right, center, justify).
Used only with the <th> element.
Controls alignment of header content within the cell.

Syntax

<th align= "left | right | center | justify | char">

Attribute Values

left: Aligns text to the left.
right: Aligns text to the right.
center: Aligns text to the center.
justify: Stretches text so all lines have equal width.
char: Aligns text based on a specific character.

Example: The implementation of the align attribute

html

<!--Driver Code Starts-->
<!DOCTYPE html> 
<html> 

<head> 
    <title> 
    HTML th align Attribute 
</title> 
</head> 

<body> 
    <h1>GeeksforGeeks</h1> 

    <h2>HTML th align Attribute</h2> 

<!--Driver Code Ends-->

    <table width="300" border="1"> 
        <tr> 
            <th align="left">NAME</th> 
            <th align="center">AGE</th> 
            <th align="right">BRANCH</th> 
        </tr> 

        <tr> 
            <td>Ben</td> 
            <td>22</td> 
            <td>CSE</td> 
        </tr> 

        <tr> 
            <td>Ron</td> 
            <td>25</td> 
            <td>EC</td> 
        </tr> 
    </table> 

<!--Driver Code Starts-->
</body> 

</html> 

<!--Driver Code Ends-->

Using CSS Instead of the align Attribute

In modern HTML5, it's recommended to use CSS to manage text alignment in table headers. The text-align property can handle horizontal alignment, while the vertical-align property controls vertical alignment.

Example: Replace the deprecated align attribute with CSS:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
  <title>Modern CSS Alignment Example</title>
  <style>
    /* CSS for table header alignment */
    th.left-align {
      text-align: left;
    }

    th.center-align {
      text-align: center;
    }

    th.right-align {
      text-align: right;
    }
  </style>
</head>
<body>
<!--Driver Code Ends-->

  <table border="1">
    <tr>
      <th class="left-align">Left Aligned Header</th>
      <th class="center-align">Center Aligned Header</th>
      <th class="right-align">Right Aligned Header</th>
    </tr>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
  </table>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

HTML <th> align Attribute

Syntax

Attribute Values

Using CSS Instead of the align Attribute

Explore