How to Center the Text in the HTML Table Row

If you need to align the text of a <td> element to the center of each table row (<tr>), you’re in the right place.

Earlier, it was possible to do this using the align attribute, however, it is deprecated in HTML5. Instead of using that attribute, use the CSS text-align property, or specify it through the inline style attributes.

In this snippet, we’ll show and explain examples with the text-align property and style attribute.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use a <table> element.
  • Add two <tr> elements and use two <td> elements inside each of them.
<table>
  <tr>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

Add CSS

table,
table td {
  border: 1px solid #cccccc;
}

td {
  height: 80px;
  width: 160px;
  text-align: center;
  vertical-align: middle;
}

Now, you can see the full example.

Example of centering the text in table row using the CSS text-align property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      table td {
        border: 1px solid #cccccc;
      }
      td {
        height: 80px;
        width: 160px;
        text-align: center;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </table>
  </body>
</html>

Result

Text Text
Text Text

In our next example, we specify the text-align and vertical-align properties through the style inline attribute.

Example of centering the text in table row using the style attributes:

<!DOCTYPE html>
<html>
  <head>
    <style>
      td {
        height: 80px;
        width: 160px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
      </tr>
      <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
      </tr>
    </table>
  </body>
</html>
The style attribute overrides the styles set globally. It will override any style set in the <style> tag or external style sheet.

In our last example, we use the <thead> and <tbody> elements. Here, you can see that our <th> elements are aligned to the right, while the <td> elements are at the center.

Example of centering only <td> elements:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      table th,
      td {
        border: 1px solid #cccccc;
        border-collapse: collapse;
      }
      th,
      td {
        height: 80px;
        width: 160px;
        padding: 5px 10px;
        vertical-align: middle;
      }
      th {
        text-align: right;
      }
      td {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Text</td>
          <td>Text</td>
        </tr>
        <tr>
          <td>Text</td>
          <td>Text</td>
        </tr>
        <tr>
          <td>Text</td>
          <td>Text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>