How To Center The Text In The HTML Table Row - W3docs

Trang chủ » Html Td Align Vertical Center » How To Center The Text In The HTML Table Row - W3docs

Có thể bạn quan tâm

If you need to align the text of a <td> element to the center of each table row (<tr>), you’re in the right place.

Earlier, it was possible to do this using the align attribute, however, it is deprecated in HTML5. Instead of using that attribute, use the CSS text-align property, or specify it through the inline style attributes.

In this snippet, we’ll show and explain examples with the text-align property and style attribute.

Create HTML

  • Use a <table> element.
  • Add two <tr> elements and use two <td> elements inside each of them.
<table> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> </table>

Add CSS

  • Set the border for the <table> and <td> elements.
  • Add the height and width properties for the <td> tag.
  • Set the text-align property to "center", and the vertical-align to "middle" for the <td> tag.
table, table td { border: 1px solid #cccccc; } td { height: 80px; width: 160px; text-align: center; vertical-align: middle; }

Now, you can see the full example.

Example of centering the text in table row using the CSS text-align property:

<!DOCTYPE html> <html> <head> <style> table, table td { border: 1px solid #cccccc; } td { height: 80px; width: 160px; text-align: center; vertical-align: middle; } </style> </head> <body> <table> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> </table> </body> </html> Try it Yourself »

Result

Text Text
Text Text

In our next example, we specify the text-align and vertical-align properties through the style inline attribute.

Example of centering the text in table row using the style attributes:

<!DOCTYPE html> <html> <head> <style> td { height: 80px; width: 160px; } </style> </head> <body> <table border="1"> <tr> <td style="text-align: center; vertical-align: middle;">Text</td> <td style="text-align: center; vertical-align: middle;">Text</td> </tr> <tr> <td style="text-align: center; vertical-align: middle;">Text</td> <td style="text-align: center; vertical-align: middle;">Text</td> </tr> </table> </body> </html> Try it Yourself » The style attribute overrides the styles set globally. It will override any style set in the <style> tag or external style sheet.

In our last example, we use the <thead> and <tbody> elements. Here, you can see that our <th> elements are aligned to the right, while the <td> elements are at the center.

Example of centering only <td> elements:

<!DOCTYPE html> <html> <head> <style> table, table th, td { border: 1px solid #cccccc; border-collapse: collapse; } th, td { height: 80px; width: 160px; padding: 5px 10px; vertical-align: middle; } th { text-align: right; } td { text-align: center; } </style> </head> <body> <table> <thead> <tr> <th>Heading</th> <th>Heading</th> </tr> </thead> <tbody> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> </tbody> </table> </body> </html> Try it Yourself »

Từ khóa » Html Td Align Vertical Center