How to Center Text in a Table Cell

Web designer working in her studio.
Nicola Tree/Digital Vision/Getty Images

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.

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

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:

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

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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Center Text in a Table Cell." ThoughtCo, Dec. 12, 2017, thoughtco.com/center-text-in-table-cell-3469873. Kyrnin, Jennifer. (2017, December 12). How to Center Text in a Table Cell. Retrieved from https://www.thoughtco.com/center-text-in-table-cell-3469873 Kyrnin, Jennifer. "How to Center Text in a Table Cell." ThoughtCo. https://www.thoughtco.com/center-text-in-table-cell-3469873 (accessed December 16, 2017).