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
Managing PHP Dependencies with Composer
Create an RSS Reader in Node
Getting Started with Electron
How to deploy a .NET app using Docker
How to build a Discord bot using TypeScript
How to deploy a PHP app using Docker
Build a Real-Time Chat App with Node, Express, and Socket.io
Getting User Location using JavaScript's Geolocation API
Learn how to build a Slack Bot using Node.js
Setting Up Stylus CSS Preprocessor
How To Create a Modal Popup Box with CSS and JavaScript