How to Center Text in a Table Cell

If you're a novice Web designer, you might have questions about how to center the text inside of a table cell. With this guide, master this technique in just a few minutes. It's easy - even if you've never tried to before.

Centering text inside of a cell is best done with CSS, just like you would center text in another element on your Web page. Before you begin, however, you need to decide what exactly you want to be centered. With a table, you have several options, including every cell in the table; every header cell in the table every cell in the table head, table body or table foot. You may also center a specific cell or set of cells within the table.

In addition, you should create an internal style sheet in the head of your document or attached to the document as an external style sheet. You will put the styles to center your table cells in that style sheet.

Add the following lines to your style sheet:

td,th {
  text-align: center;
} 

Add the following lines to your style sheet:

th {
  text-align: center;
} 

In order to center these cells, you need to add table tags that are not always used, such as <thead>, <tbody> and <tfoot>. Then, you'll surround your table cells with these tags to identify the table head, body, and foot. After that, you'll add the following to your style sheet:

thead th, thead td {
  text-align: center;
}
tbody th, tbody td {
  text-align: center;
}
tfoot th, tfoot td {
  text-align: center;
}

Remove the styles for the areas you don't want to be centered.

To do this, you need to set a class on the cells you want to be centered.

Add the following attribute to the table cells you want to be centered:

<td class="centered-cell">

Then add the following to your style sheet:

.centered-cell {
  text-align: center;
}

You can add this class to any cell in your table.

Don’t hesitate to use these styles on any of your table cells. You can use them on merged cells or on single cells and the text within will be centered.