How to center align text in table cells in HTML?-HTML Tutorial-php.cn

How to center align text in table cells in HTML?

PHPz

Release： 2023-09-10 10:09:06

forward

2768 people have browsed it

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 an inline internal stylesheet to align text in table cells.

The text-align property of CSS sets the alignment of the content in

and .

By default, the content of

is center-aligned, and the content of is left-aligned. We can change the alignment by overriding this property with other properties.

We can also change the alignment value to left and right.

grammar

The following is the syntax for center-aligning text in the

tag of a table.

<th style="text-align: center">Table header...</th>

Copy after login

The following is the syntax for center-aligning text in the tag.

<td style="text-align: center">Table header...</td>

Copy after login

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>

Copy after login

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>

Copy after login

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!