Easiest way to align text in a table cell

Question

I know very little html and pretty much no css. I would like to know the easiest way for me to change my left aligned text to center aligned within the cells. Someone on stackoverflow helped me to figure out how to center a table on my wordpress page with the following code:

<div style="text-align: center;">
    <table style="margin: 0px auto;" border="0">
        <table border="0">
            <tbody>
                <tr>
                    <td>ddd</td>
                    <td>ddd</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
</div>

I now need to figure out how to center the text within the cells. I have tried using align="center" beside the td. This showed the text centered in the wordpress admin area, but on the actual webpage, the text was still left aligned. Another guy recommended I put something in my header code and link it to the something. Again, I know very little about this and would appreciate the easiest solution. Thx.

score 2 · Answer 1 · answered Oct 04 '11 at 18:53

2

Add the following CSS (CSS has to be added within <style> tags):

<style>
td {
    vertical-align: middle;
    text-align: center;
}
</style>

Also.. remove one of the <table> tags:

<table style="margin:0px auto;" border="0">
<table border="0">

should be

<table style="margin:0px auto;" border="0">

answered Oct 04 '11 at 18:53

Rob W

341,306
83
791
678

@JackStevens Tip bookmark these sites: https://developer.mozilla.org/en/CSS_Reference https://developer.mozilla.org/en/HTML – Rob W Oct 04 '11 at 19:03

Christian · Accepted Answer · 2011-10-04T18:58:39.023

1

<td style="text-align:center"></td>

If you want every cell centered, the easiest solution for you is to add the above to every cell.

you dont need the div above or the style in the table tag, and only one table tag :)

<table>
 <tr>
    <td style="text-align:center">centered text</td>
 </tr>
</table>

edited Oct 04 '11 at 18:58

answered Oct 04 '11 at 18:53

Christian

3,708
3
39
60

Oh thank you thank you. I knew it was something small that I was missing. (this is not my forte) I was just going to stick with left align; now, my site will look so much better. Many thanks. – Jack Stevens Oct 04 '11 at 18:58
what's the url (web address)? :) – Christian Oct 04 '11 at 19:00
It's an errand running business. I would give it but I want to keep it as secret as possible right now. : 0 – Jack Stevens Oct 04 '11 at 20:13

score 0 · Answer 3 · answered Oct 04 '11 at 19:01

0

Here are two simple ways:

<td align="left">foo</td>
<td style="text-align:left;">foo</td>

EDIT

As others have mentioned, you also need to remove the nested <table> tags.

answered Oct 04 '11 at 19:01

James Johnson

45,496
8
73
110

Thank you as well James. I have so much to learn. You guys who speak this "language" are geniuses in my opinion! – Jack Stevens Oct 04 '11 at 20:11
align="left" is not future proof use style="" – Christian Oct 04 '11 at 20:14
@Christian: I agree, but I thought it might be a bit easier to grasp for a newbee. – James Johnson Oct 04 '11 at 20:18

Easiest way to align text in a table cell

3 Answers3