Home > Article > Web Front-end > How to center align text in table cells in HTML?
How to center align text in table cells in HTML?
- PHPzforward
- 2023-09-10 10:09:062721browse
We use the CSS property text-align to center align text in table cells. We use an inline internal stylesheet to align text in table cells.
The text-align property of CSS sets the alignment of the content in
By default, the content of
We can also change the alignment value to left and right.
grammar
The following is the syntax for center-aligning text in the
<th style="text-align: center">Table header...</th>
The following is the syntax for center-aligning text in the
<td style="text-align: center">Table header...</td>
Example 1
Below is an example of center aligning text in a table cell 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; ">Employees</caption>
<tr>
<th style="text-align: center">EmployeeName</th>
<th style="text-align: center">EmployeeId</th>
</tr>
<tr>
<td style="text-align: center">Yadav</td>
<td style="text-align: center">022</td>
</tr>
<tr>
<td style="text-align: center">Abdul</td>
<td style="text-align: center">025</td>
</tr>
<tr>
<td style="text-align: center">Jason</td>
<td style="text-align: center">208</td>
</tr>
</table>
</body>
</html>
The following is the output of the above example program.
Example 2
Let’s look at another example to illustrate this -
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
width: 300px;
}
</style>
</head>
<body>
<h1>Authors</h1>
<table>
<tr>
<th>Alchemist</th>
<th>Rich Dad Poor Dad</th>
</tr>
<tr>
<td style="text-align:center">Paulo Coelho</td>
<td style="text-align:center">Robert Kiyosaki</td>
</tr>
</table>
</body>
</html>
The above is the detailed content of How to center align text in table cells in HTML?. For more information, please follow other related articles on the PHP Chinese website!