How to center the contents of an HTML table?

Question

I am using an HTML <table> and I want to align the text of <td> to the center in each cell.

How do I center align the text horizontally and vertically?

Strickler

Answer 1

Here is an example with CSS and inline style attributes:

td 
{
    height: 50px; 
    width: 50px;
}

#cssTable td 
{
    text-align: center; 
    vertical-align: middle;
}

<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>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

http://jsfiddle.net/j2h3xo9k/

EDIT: The valign attribute is deprecated in HTML5 and should not be used.

Fossil

Isn't the vertical-align:middle supposed to be applied to the tr element? – Ardatharde

If you put an img tag in the same td didnt work – Rennold

@Ardatharde TLDR: no. Explanation: td elements (under normal circumstances) have the same height as their parent tr element, so changing the vertical alignment css property of the tr element will do nothing at all. There is no "available" space above or below the td elements. – Wallacewallach

Answer 2

The CSS to center text in your td elements is

td {
  text-align: center;
  vertical-align: middle;
}

Taxable

Answer 3

HTML in line styling example:

<td style='text-align:center; vertical-align:middle'></td> 

CSS file example:

td {
    text-align: center;
    vertical-align: middle;
}

Blepharitis

Answer 4

Try to put this in your CSS file.

td {
  text-align: center;
  vertical-align: middle;
}

Welbie

Answer 5

<td align="center" valign="center">textgoeshere</td>

Is the only correct answer imho, since you're working with tables which is old functionality most common used for e-mail formatting. So your best bet is to not use just style but inline style and known table tags.

Bordure

valign is deprecated in HTML5. Do not use it. For email formatting, a style tag or an inline style attribute would be the best solution. – Hals

Answer 6

Selector > child:

.text-center-row>th,
.text-center-row>td {
  text-align: center;
}

<table border="1" width='500px'>
  <tr class="text-center-row">
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr class="text-center-row">
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

Colner

Answer 7

If you are using Bootstrap, you can use inbuilt class

<table class="text-center align-middle">

Anguine

Answer 8

The following worked for me to vertically align content (multi-line) in a list-table

.. list-table::
   :class: longtable
   :header-rows: 1
   :stub-columns: 1
   :align: left
   :widths: 20, 20, 20, 20, 20

   * - Classification
     - Restricted
     - Company |br| Confidential
     - Internal Use Only
     - Public
   * - Row1 col1
     - Row1 col2
     - Row1 col3 
     - Row1 col4
     - Row1 col5

Using theme overrides .css option I defined:

.stub {
       text-align: left;
       vertical-align: top;
}

In the theme that I use 'python-docs-theme', the cell entry is defined as 'stub' class. Use your browser development menu to inspect what your theme class is for cell content and update that accordingly.

Credits

Answer 9

td 
{
    height: 50px; 
    width: 50px;
}

#cssTable td 
{
    text-align: center; 
    vertical-align: middle;
}

<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>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

Vandalism

Answer 10

<td align="center"valign="center">textgoeshere</td>

more on valign

Stickpin

valign attribute is not supported in HTML5. Use CSS instead. – Ossification

align attribute is not supported in HTML 5. You have to use CSS instead. – Wedekind