How to Center TD Elements in HTML Tables

Dec 01, 2025 · Programming · 10 views · 7.8

Keywords: HTML | CSS | table alignment

Abstract: This article provides a comprehensive guide on centering td elements in HTML tables, emphasizing the correct use of the CSS text-align property and explaining why the align attribute is ineffective. Code examples and comparative analysis are included to help developers avoid common pitfalls.

Introduction

Centering content within table cells, particularly td elements, is a frequent task in web development. However, a common mistake is using the align property in CSS, which does not work as expected.

Understanding the Difference Between text-align and align

The align attribute was used in HTML4 for element alignment, but in CSS, the standard property for horizontal text alignment is text-align. For td elements, applying text-align: center; in CSS correctly centers the content.

Code Examples

Here’s an example of the correct CSS:

.cTable td {
  text-align: center;
}

And the corresponding HTML table:

<table border='1' class="cTable">
  <tbody>
    <tr><th>Claim ID</th><th>Status</th></tr>
    <tr><td>22</td><td>333</td></tr>
    <tr><td>22</td><td>333</td></tr>
  </tbody>
</table>

Using Inline Styles and External CSS

As a supplement, inline styles can also be used: &lt;td style="text-align: center;"&gt;...&lt;/td&gt;. However, external CSS is recommended for maintainability.

Conclusion

To center td elements, always use text-align: center; in CSS, and avoid the deprecated align attribute. This ensures compatibility and adherence to modern web standards.

Copyright Notice: All rights in this article are reserved by the operators of DevGex. Reasonable sharing and citation are welcome; any reproduction, excerpting, or re-publication without prior permission is prohibited.