How to Center the Text in an HTML Table Row using CSS

Tables in HTML are a useful way to display tabular data.

By default, the text in a table is left-aligned, however, you might want it to be centered.

In this post, we'll learn how to center text in a table row using CSS.

How to Center Text in a Table Row Using CSS

To illustrate how to center text in a table row using CSS, we'll use the following HTML to define a table:

	<html>
    <head>
        <title>Center Text in a Table Row Using CSS</title>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>Doe</td>
            </tr>
        </table>
    </body>
</html>

That looks like this:

HTML

<html> <head> <title>Center Text in a Table Row Using CSS</title> </head> <body> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table> </body> </html>
```
				
			
```

As you can see, the text in the table is left-aligned.

To center-align the text, we can use the text-align property on the <td> element.

	td {
    text-align: center;
}

Let's see the result:

HTML
CSS

<html> <head> <title>Center Text in a Table Row Using CSS</title> </head> <body> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table> </body> </html>
```
				
			
```
td { text-align: center; }
```
				
			
```

Let's say you only want to center-align the text in the table heading elements.

You can do this by targeting the <th> element instead of the <td> element.

	th {
    text-align: center;
}

This will center the table heading text but leave the table data text left-aligned.

Conclusion

In this post, we learned how to center text in a table row using CSS.

You can use the text-align property on the <td> element to center-align the text in a table row or use it on the <th> element to center-align the text in a table heading.

Thanks for reading!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!