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

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

Updated onDec 22, 2022byAlan Morel

#css

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

How to Center Text in a Table Row Using CSS
Conclusion

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

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.

CSS
td {
    text-align: center;
}

Let's see the result:

HTML
CSS

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.

CSS
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!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!