- How to center align text in table cells in HTML?
- Syntax
- Example 1
- Example 2
- CSS Table Alignment
- Example
- Vertical Alignment
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- How to Center the Text in the HTML Table Row
- Create HTML
- Add CSS
- Example of centering the text in table row using the CSS text-align property:
- Result
- Example of centering the text in table row using the style attributes:
- Example of centering only elements:
How to center align text in table cells in HTML?
We use the CSS property text-align, to center align text in table cells. We use inline, internal style sheet for text alignment in table cells.
We can also change the align-value to left and right.
Syntax
Following is the syntax to center align text in tag of the table.
Example 1
Given below is the example to center align text in table cells in HTML.
DOCTYPE html> html> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> style> table,tr,th,td < border:1px solid black; >style> head> body> table style="width: 50%"> caption style="text-align: center; ">Employeescaption> tr> th style="text-align: center">EmployeeNameth> th style="text-align: center">EmployeeIdth> tr> tr> td style="text-align: center">Yadavtd> td style="text-align: center">022td> tr> tr> td style="text-align: center">Abdultd> td style="text-align: center">025td> tr> tr> td style="text-align: center">Jasontd> td style="text-align: center">208td> tr> table> body> html>
Following is the output for the above example program.
Example 2
Let us see another example for this −
DOCTYPE html> html> head> style> table, td, th < border: 1px solid black; width: 300px; >style> head> body> h1>Authorsh1> table> tr> th>Alchemistth> th>Rich Dad Poor Dadth> tr> tr> td style="text-align:center">Paulo Coelhotd> td style="text-align:center">Robert Kiyosakitd> tr> table> body> html>
CSS Table Alignment
To left-align the content, force the alignment of elements to be left-aligned, with the text-align: left property:
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Example
Vertical Alignment
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Example
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
How to Center the Text in the HTML Table Row
Earlier, it was possible to do this using the align attribute, however, it is deprecated in HTML5. Instead of using that attribute, use the CSS text-align property, or specify it through the inline style attributes.
In this snippet, we’ll show and explain examples with the text-align property and style attribute.
Create HTML
table> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> table>
Add CSS
table, table td < border: 1px solid #cccccc; > td < height: 80px; width: 160px; text-align: center; vertical-align: middle; >
Now, you can see the full example.
Example of centering the text in table row using the CSS text-align property:
html> html> head> style> table, table td < border: 1px solid #cccccc; > td < height: 80px; width: 160px; text-align: center; vertical-align: middle; > style> head> body> table> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> table> body> html>
Result
In our next example, we specify the text-align and vertical-align properties through the style inline attribute.
Example of centering the text in table row using the style attributes:
html> html> head> style> td < height: 80px; width: 160px; > style> head> body> table border="1"> tr> td style="text-align: center; vertical-align: middle;">Text td> td style="text-align: center; vertical-align: middle;">Text td> tr> tr> td style="text-align: center; vertical-align: middle;">Text td> td style="text-align: center; vertical-align: middle;">Text td> tr> table> body> html>
The style attribute overrides the styles set globally. It will override any style set in the tag or external style sheet.
Example of centering only elements:
html> html> head> style> table, table th, td < border: 1px solid #cccccc; border-collapse: collapse; > th, td < height: 80px; width: 160px; padding: 5px 10px; vertical-align: middle; > th < text-align: right; > td < text-align: center; > style> head> body> table> thead> tr> th>Heading th> th>Heading th> tr> thead> tbody> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> tbody> table> body> html>