1. Technology

How to Center Text in a Table Cell

By

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

Centering text inside a table is best done with CSS, just like you would center text in another element on your web page.

The first thing you should create is 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.

Difficulty: Easy
Time Required: 2 minutes

Here's How:

  1. First you need to decide what you want 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
    • A specific cell or cells within the table
  2. How to Center Every Cell in the Table

    Add the following lines to your style sheet:

    td,th {
      text-align: center;
    }
  3. How to Center Every Header Cell in the Table

    Add the following lines to your style sheet:

    th {
      text-align: center;
    }
  4. How to Center Every Cell in your Table Head, Table Body, or Table Foot

    In order to center these cells, you need to add table tags that are not always used: <thead>, <tbody>, and <tfoot>. Surround your table cells with these tags to identify the table head, body, and foot. Then 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 centered.

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

    Add the following attribute to the table cells you want 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.

Tips:

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

Related Video
How to Align Text in a CSS document

©2014 About.com. All rights reserved.