Table of Contents
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.
CSStd {
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.
CSSth {
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!
Getting Started with TypeScript
How to Install Node on Windows, macOS and Linux
Getting Started with Solid
Getting Started with Svelte
Getting Started with Express
Create an RSS Reader in Node
Git Tutorial: Learn how to use Version Control
How to Set Up Cron Jobs in Linux
Learn how to use v-model with a custom Vue component
Learn how to build a Slack Bot using Node.js
Getting Started with React
Setting Up Stylus CSS Preprocessor