Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to center the contents of an HTML table?
In HTML the <table> tag displays the contents as a table. By default, the alignment of the contents within the HTML tables is toward the left side. In this tutorial, we will understand how to center the contents of the HTML table.
Use Of The <center> tag
As the name suggests, the <center> tag helps align the texts within any container. To center align the texts, we need to use the texts within the <center> and the <center/> tags.
However, this is not a recommended process. We should use this process only when we only have to design using HTML tags. The inconvenience associated with the tag is that you have to enclose every text within the tags manually.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table,td,th{
border:1px solid;
padding:3vw;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<th><center>Name</center></th>
<th><center>Id</center></th>
<th><center>Designation</center></th>
</tr>
<tr>
<td><center>Tom Holland</center></td>
<td><center>12124325</center></td>
<td><center>Software Engineer</center></td>
</tr>
<tr>
<td><center>Pascal</center></td>
<td><center>12124329</center></td>
<td><center>Designer</center></td>
</tr>
</table>
</center>
</body>
</html>
Use The align Property Within The td Tag
We can use the align property within the td tag to achieve similar results. How ever this method is again not recommended because we have to manually use this code within each tag.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td,th{
border:1px solid;
padding:3vw;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<th align="center">Name</th>
<th align="center">Qualification</th>
<th align="center">Designation</th>
</tr>
<tr>
<td align="center">Hellen Smith</td>
<td align="center">MBA</td>
<td align="center">Marketing officer</td>
</tr>
<tr>
<td align="center">John Summerfield</td>
<td align="center">CSE</td>
<td align="center">Software Engineer</td>
</tr>
</table>
</center>
</body>
</html>
Use CSS text-align Property
A better method to center align the texts within the table is using CSS's text-align property. You can use this property either for the <table>,<tr>, or the <td> tags. The tags stand for the table, table row, and table data.
Although CSS won't complain if you use multiple text-align properties, using any one among the following will serve our requirements.
tr{ text-align: center; }
td{ text-align: center; }
table{ text-align: center; }
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td,th{
border:1px solid;
padding:3vw;
}
table{
text-align: center;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<th>Name</th>
<th>city</th>
<th>Country</th>
</tr>
<tr>
<td>Steve Smith</td>
<td>Sydny</td>
<td>Australia</td>
</tr>
<tr>
<td>Virat Kohli</td>
<td>Mumbai</td>
<td>India</td>
</tr>
</table>
</center>
</body>
</html>
Conclusion
In this article, we have understood how to center align the texts within the tables. Using the <center> tag is a traditional method. It was used while the internet relied on web 1.0. Nowadays, we use the CSS properties like text-align to center-align the texts.
1K+ Views
