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, learn this technique in just a few minutes. It's easy - even if you've never tried to before.

Getting Started

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.

How to Center Every Cell in the Table

Add the following lines to your style sheet:

td,th {
text-align: center;
} 

How to Center Every Header Cell in the Table

Add the following lines to your style sheet:

th {
text-align: center;
} 

Centering Every Cell in the Table Head, Body or Foot

In order to center these cells, you need to add table tags that are not always used, such as

, and

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.

How to Center a Specific Cell or Cells in a Table

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:

Then add the following to your style sheet:

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

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

Wrapping Up

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.