Table formatting Frustrations

[suziwilson 0]

I am at the end of my rope. I have been trying to create a simple (I think) table. I want two tables side by side on my home page each with a list of topics below. So I created a table 2 columns wide, 1 row deep, then within each row is another table; 1 column by 5 rows. Each of the 5 rows contains a 150 x 150 pic + title + lead in sentence + link to a page. Every time I render it on the browser it looks totally differently than it does when I'm editing it. I suspect I'm missing something very simple. #1 all my lead in sentences are centered even when I say they should be left aligned. #2 I cannot get borders to show up no matter what I do. They disappear in the browser. #3 My second column is squashed to the left even though each column is 50% and the table is 100%. Here is an excerpt from my HTML: <p> </p> <table width="800" border="1" cellpadding="1" cellspacing="1" align="center"> <tbody> <tr> <td> <table width="50%" border="1" cellpadding="1" cellspacing="1" align="center"> <caption> <p style="text-align: left; ">DAILY INSPIRATION</p> </caption> <tbody> <tr> <td height="150" bgcolor="#66cccc"> <h2><span style="color: rgb(51, 102, 255); "><span style="font-size: smaller; "><span style="font-family: Tahoma; "><span style="font-size: large; ">Nurture your Friendships</span></span></span></span></h2> <p>There is some sad news for friendships in this era.</p> <p>> VIEW IN INSPIRATIONS</p> <p>GET MENTAL</p> </td> </tr> <tr> <td height="150"> <h2><span style="font-size: large; "><span style="color: rgb(51, 51, 153); "><span style="font-family: Tahoma; ">Understanding Depression</span></span></span></h2> <p>Everyone is depressed from time to time. Help is available.</p> <p>> VIEW IN MIND</p> </td> </tr> <tr>

[kastelic 6]

Nested tables haven't been used for layout in quite a long time, and I'm not sure how Wordpress handles it. If you could post the entirety of your table code, I'm sure we could help you fix it up, and a link to your site or a screen shot of how your seeing would be awesome too.

[suziwilson 0]

That would be GREAT! I don't have to use nested tables, but I can't figure any other way to format what I want. If you have another idea I am totally open. the URL for the page is http://myessencenw.com/blog/ I want the page to look like http://myessencenw.com/blog/wp-content/uploads/2011/05/Home-Page.jpg But, you can see it does not. <p> </p> <table width="800" border="1" cellpadding="1" cellspacing="1" align="center"> <tbody> <tr> <td> <table width="50%" border="1" cellpadding="1" cellspacing="1" align="center"> <caption> <p style="text-align: left; ">DAILY INSPIRATION</p> </caption> <tbody> <tr> <td height="150" bgcolor="#66cccc"> <h2><span style="color: rgb(51, 102, 255); "><span style="font-size: smaller; "><span style="font-family: Tahoma; "><span style="font-size: large; ">Nurture your Friendships</span></span></span></span></h2> <p>There is some sad news for friendships in this era.</p> <p>> VIEW IN INSPIRATIONS</p> <p>GET MENTAL</p> </td> </tr> <tr> <td height="150"> <h2><span style="font-size: large; "><span style="color: rgb(51, 51, 153); "><span style="font-family: Tahoma; ">Understanding Depression</span></span></span></h2> <p>Everyone is depressed from time to time. Help is available.</p> <p>> VIEW IN MIND</p> </td> </tr> <tr> <td height="150"> <h2><span style="color: rgb(51, 51, 153); "><span style="font-size: smaller; "><span style="font-size: large; ">Making Peace with Imperfection</span></span></span></h2> <p>We all want to feel like we belong...</p> <p>> VIEW IN MIND</p> </td> </tr> <tr> <td height="150"> <h2><span style="font-size: smaller; "><span style="color: rgb(51, 51, 153); "><span style="font-size: large; ">Take a mental vacation</span></span></span></h2> <p>Small stressors can quickly add up to major stress and one big stressful event can send you reeling...</p> <p>> VIEW IN MIND</p> </td> </tr> <tr> <td height="150"> <h2><span style="color: rgb(51, 51, 153); "><span style="font-size: smaller; "><span style="font-size: large; ">Facing Retirement</span></span></span></h2> <p>Facing the fear, anticipation and joy of retirement. Are you ready?</p> <p>> VIEW IN MIND</p> </td> </tr> </tbody> </table> </td> <td> <table width="50%" border="1" cellpadding="1" cellspacing="1" align="center"> <caption> <p style="text-align: left; ">GET IN SHAPE</p> </caption> <tbody> <tr> <td height="150"> <h2><span style="font-size: smaller; "><span style="font-size: large; "><span style="color: rgb(255, 102, 0); ">Yoga for Everyone</span></span></span></h2> <p>Yoga can improve balance, coordination and flexibility</p> <p>> VIEW IN BODY</p> </td> </tr> <tr> <td height="150"> <h2><span style="color: rgb(255, 102, 0); "><span style="font-size: large; ">Men's Workshop</span></span></h2> <p>Exercises just for you.</p> <p>> VIEW IN BODY</p> </td> </tr> <tr> <td height="150"> <h2><span style="font-size: large; "><span style="color: rgb(255, 102, 0); ">Brides to Be</span></span></h2> <p>Getting Ready for your Special Day</p> <p>>VIEW IN BODY</p> </td> </tr> <tr> <td height="150"> <h2><span style="font-size: large; "><span style="color: rgb(255, 102, 0); ">Ditch the Soda for Your Health</span></span></h2> <p> </p> <p>>VIEW IN BODY</p> </td> </tr> <tr> <td height="150"> <h2><span style="font-size: large; "><span style="color: rgb(128, 128, 0); ">Recipe Review</span></span></h2> <p>The best fruit salads</p> <p>> READ THE FULL REVIEW</p> </td> </tr> </tbody> </table> </td> </tr> <tr> <td height="30"> <h3><span style="font-size: small; "><span style="font-family: Tahoma; "><span style="color: rgb(51, 51, 153); ">FIND A MENTAL HEALTH PROFESSIONAL </span></span></span></h3> </td> <td> <h3><span style="font-size: small; "><span style="color: rgb(255, 102, 0); ">FIND A FITNESS PROFESSIONAL</span></span></h3> </td> </tr> </tbody> </table> <p> </p> <p> </p>

[catrina 103]

#1 all my lead in sentences are centered even when I say they should be left aligned.

There is probably a CSS conflict somewhere if the sentences are being centered. Do you want only the sentences left aligned and the title and link centered?

#2 I cannot get borders to show up no matter what I do. They disappear in the browser.

You can use CSS for the borders, too. Where do you want the borders to appear (around the table or around each table cell)?

#3 My second column is squashed to the left even though each column is 50% and the table is 100%.

Each column needs to be 33% instead of 50% in order to be split as evenly as possible.

[Sourena 2]

Using tables for layout is not the best way to set up your page. But if you want to do it that way this plugin might help: WP-Table Reloaded

[suziwilson 0]

Thank you everyone! I really appreciate the help. I think I'm going to try the CSS approach. I would do things correctly. I learned HTML a long time ago and just came back to it not realizing tables were passe. Thanks again. Suzi

[Rob 547]

Suzanne, this may seem like a simple solution to correct the alignment, but Wordpress needs special table formatting to function properly. It doesn't use old HTML coding very well. Each of my tables aligned the content in each cell to the center. I found that by using the Visual Editor on the table and clicking the alignment option I wanted once, I could then use the HTML editor and copy the proper code. Here's an example of a properly formatted table cell in place of the typical < td >...

<td style="text-align: left;" width="50%">

. The important bit is the

style="text-align: left;

which sets the actual alignment of anything within the specific cell. I use this method on all my tables to avoid the same problems you're experiencing. Hope this helps resolve your problem.