How to center the contents of an HTML table?

HtmlCssHtml Table

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

The CSS to center text in your td elements is

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

Solution 3 - Html

HTML in line styling example:

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

CSS file example:

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

Solution 4 - Html

Try to put this in your CSS file.

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

Solution 5 - Html

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

Is the only correct answer imho, since your 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.

Solution 6 - Html

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>

Solution 7 - Html

If you are using Bootstrap, you can use inbuilt class

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

Solution 8 - Html

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.

Solution 9 - Html

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

more on valign

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRajagopal 웃View Question on Stackoverflow
Solution 1 - HtmlDavid LabergeView Answer on Stackoverflow
Solution 2 - HtmlCarstenView Answer on Stackoverflow
Solution 3 - HtmlHayden ThringView Answer on Stackoverflow
Solution 4 - HtmlBorisView Answer on Stackoverflow
Solution 5 - HtmlRemiView Answer on Stackoverflow
Solution 6 - HtmlFernandoView Answer on Stackoverflow
Solution 7 - HtmlMohitGhodasaraView Answer on Stackoverflow
Solution 8 - HtmlshalzView Answer on Stackoverflow
Solution 9 - HtmlBalaswamy VaddemanView Answer on Stackoverflow