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
Getting Started with Svelte
Getting Started with Express
Getting Started with Electron
How to deploy a Deno app using Docker
Getting Started with Deno
How to deploy a MySQL Server using Docker
Using Puppeteer and Jest for End-to-End Testing
Learn how to build a Slack Bot using Node.js
Setting Up Stylus CSS Preprocessor
Setting Up a Local Web Server using Node.js