Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to center align text in table cells in HTML?
We use the CSS property text-align to center align text in table cells. The text-align property controls the horizontal alignment of content within <th> and <td> elements.
By default, table header cells (<th>) are center-aligned, while table data cells (<td>) are left-aligned. We can override this default behavior using CSS to achieve the desired alignment. The property accepts values like center, left, right, and justify.
Syntax
Following is the syntax to center align text in <th> elements −
<th style="text-align: center">Table header...</th>
Following is the syntax to center align text in <td> elements −
<td style="text-align: center">Table data...</td>
For styling multiple cells, use internal or external CSS −
th, td { text-align: center; }
Using Inline CSS for Center Alignment
The most direct approach is to use the style attribute on individual table cells. This method provides precise control over specific cells but can become repetitive for larger tables.
Example
Following example demonstrates center alignment using inline CSS −
<!DOCTYPE html>
<html>
<head>
<title>Center Align Table Cells</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<table style="width: 50%;">
<caption style="text-align: center; font-weight: bold; margin-bottom: 10px;">Employees</caption>
<tr>
<th style="text-align: center; padding: 8px;">Employee Name</th>
<th style="text-align: center; padding: 8px;">Employee ID</th>
</tr>
<tr>
<td style="text-align: center; padding: 8px;">Yadav</td>
<td style="text-align: center; padding: 8px;">022</td>
</tr>
<tr>
<td style="text-align: center; padding: 8px;">Abdul</td>
<td style="text-align: center; padding: 8px;">025</td>
</tr>
<tr>
<td style="text-align: center; padding: 8px;">Jason</td>
<td style="text-align: center; padding: 8px;">208</td>
</tr>
</table>
</body>
</html>
The output displays a table with all text content centered within each cell −
Employees
?????????????????????????????????????
? Employee Name ? Employee ID ?
?????????????????????????????????????
? Yadav ? 022 ?
? Abdul ? 025 ?
? Jason ? 208 ?
?????????????????????????????????????
Using Internal CSS for Center Alignment
Internal CSS is more efficient when you want to apply the same alignment to multiple cells. This approach reduces code repetition and makes maintenance easier.
Example
Following example uses internal CSS to center-align all table cells −
<!DOCTYPE html>
<html>
<head>
<title>Center Align with Internal CSS</title>
<style>
table, td, th {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
text-align: center;
padding: 10px;
width: 150px;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Book Authors</h2>
<table>
<tr>
<th>The Alchemist</th>
<th>Rich Dad Poor Dad</th>
</tr>
<tr>
<td>Paulo Coelho</td>
<td>Robert Kiyosaki</td>
</tr>
</table>
</body>
</html>
The output shows a neatly formatted table with centered text and consistent styling −
Book Authors ????????????????????????????????????? ? The Alchemist ?Rich Dad Poor Dad? (gray background) ????????????????????????????????????? ? Paulo Coelho ? Robert Kiyosaki ? ?????????????????????????????????????
Selective Cell Alignment
You can apply different alignments to specific cells or columns. This approach is useful when you want headers centered but data cells aligned differently.
Example
Following example shows mixed alignment − headers centered and data cells with different alignments −
<!DOCTYPE html>
<html>
<head>
<title>Selective Cell Alignment</title>
<style>
table, th, td {
border: 1px solid #ccc;
border-collapse: collapse;
}
th {
text-align: center;
background-color: #4CAF50;
color: white;
padding: 10px;
}
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
td { padding: 8px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<table style="width: 60%;">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td class="left">Laptop</td>
<td class="center">5</td>
<td class="right">$999.99</td>
</tr>
<tr>
<td class="left">Mouse</td>
<td class="center">20</td>
<td class="right">$25.50</td>
</tr>
</table>
</body>
</html>
The output shows headers centered with green background, product names left-aligned, quantities centered, and prices right-aligned −
???????????????????????????????? ? Product ? Quantity ? Price ? (green background, white text) ???????????????????????????????? ?Laptop ? 5 ? $999.99? ?Mouse ? 20 ? $25.50? ????????????????????????????????
Comparison of Text Alignment Methods
Following table compares different approaches to center-align table cells −
| Method | Use Case | Advantages | Disadvantages |
|---|---|---|---|
| Inline CSS | Specific cells only | Precise control, overrides other styles | Repetitive, hard to maintain |
| Internal CSS | All cells in document | Clean HTML, easy to modify | Not reusable across pages |
| External CSS | Multiple pages | Reusable, maintainable | Additional HTTP request |
| CSS Classes | Selective styling | Flexible, semantic | Requires planning |
Conclusion
The text-align: center property is the standard way to center-align text in table cells. Use inline styles for specific cells, internal CSS for document-wide styling, or CSS classes for flexible, selective alignment. Choose the method that best fits your project's structure and maintenance requirements.
131K+ Views
