How To Center Align Text In Table Cells In HTML? - Tutorialspoint

Trang chủ » Html Col Align Center » How To Center Align Text In Table Cells In HTML? - Tutorialspoint

Có thể bạn quan tâm

How to center align text in table cells in HTML? HTMLWeb DevelopmentFront End Technology

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.

The text-align property of CSS sets the alignment of the content in <th> and <td>.

By default, the content of <th> are center-aligned and the content of <td> are left-aligned. We can override the attribute by other to change the alignment.

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.

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

Following is the syntax to center align text in <td> tag of the table.

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

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; ">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>

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>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>

Lokesh Badavath Lokesh Badavath Updated on: 31-Aug-2023

126K+ Views

Từ khóa » Html Col Align Center