How to center the contents of an HTML table?

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?

9 Answers

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>Text</td> <td>Text</td> </tr> </table> <table border="1"> <tr> <td>Text</td> <td>Text</td> </tr> </table>

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

The CSS to center text in your td elements is

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

HTML in line styling example:

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

CSS file example:

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

Try to put this in your CSS file.

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

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

Selector > child:

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

<table border="1" width='500px'> <tr> <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> <td>Text</td> <td>Text</td> <td>Text</td> <td>Text</td> </tr> </table>

If you are using Bootstrap, you can use inbuilt class

<table> 

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.

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

more on valign