Computer >> Computer tutorials >  >> Programming >> HTML

How to center align text in table cells in HTML?


To center align text in table cells, use the CSS property text-align. The <table> tag align attribute was used before, but HTML5 deprecated the attribute. Do not use it. So, use CSS to align text in table cells. The text-align will be used for the <td> tag.

We’re using the style attribute for adding CSS. The style attribute specifies an inline style for an element. The attribute is used with the HTML <td> tag, with the CSS property text-align. HTML5 do not support the align tag,

Just keep in mind, the usage of style attribute overrides any style set globally. It will override any style set in the HTML <style> tag or external style sheet.

For text-align, set the table cell as left, right or center align

How to center align text in table cells in HTML?

Example

You can try to run the following code to center align text in table cells in HTML

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, td, th {
            border: 1px solid black;
            width: 300px;
         }
      </style>
   </head>
   <body>
      <h1>Our Technologies</h1>
      <table>
         <tr>
            <th>IDE</th>
            <th>Database</th>
         </tr>
         <tr>
            <td style="text-align:center">NetBeans</td>
            <td style="text-align:center">MySQL</td>
         </tr>
      </table>
   </body>
</html>

Output

How to center align text in table cells in HTML?