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!
Create an RSS Reader in Node
Best Visual Studio Code Extensions for 2022
How to build a Discord bot using TypeScript
Getting Started with Deno
How to deploy a Node app using Docker
Using Puppeteer and Jest for End-to-End Testing
How to Scrape the Web using Node.js and Puppeteer
Creating a Twitter bot with Node.js
Using Push.js to Display Web Browser Notifications
Building a Real-Time Note-Taking App with Vue and Firebase
Getting Started with React
Setting Up Stylus CSS Preprocessor
