WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hey everyone,
When I inserted a table into one of my pages there's a gray row that keeps coming up. http://recruitingspotlight.wordpress.com/calendar/. I was just wondering what I can do to fix it.
Thanks,
Josh
The blog I need help with is recruitingspotlight.wordpress.com.
See here for starters:
http://wpbtips.wordpress.com/2011/02/13/overriding-default-table-colors/
But you need to change lots of other things as well, because the table coding you've used is deprecated and much of it doesn't work. (Did you use a table generator?)
The following have no effect:
border="1"
cellpadding="0"
valign="top"
width="WHATEVER"
They need to be added as style properties and values to each opening td tag. For example:
<td style="border:1px solid #e0e0e0;vertical-align:top;width:301px;">
But if you want top vertical alignment, you don't need to use that property and value at all, since that's the default. And the widths you've tried to specify are wrong, since the total is wider than the width of your main column (560px). Also, the default width for the whole table in Nuntius is 100%, so if you don't want that you'll need to specify the right width in the opening table tag or set it to auto:
<table style="width:NNNpx;">
or
<table style="width:auto;">
Finally, to center the content of a cell you don't enclose it in p tags, you add the right property and value to the td tag style:
<td style="text-align:center;ETC ETC ETC>
I copied and pasted a table made in Microsoft Word, is there a better way to do it?
Copypasting from Word into the Visual editor is a guaranteed way to mess your blog up, because it introduces lots of junk code. The right way to make tables is to create the code yourself manually (after you get accustomed to the basics of table coding, and after you learn some inline CSS as shown above), and paste the result in the HTML editor.
If you're not experienced, then before anything else go to Settings > Writing, tick the option "WordPress should correct invalidly nested XHTML automatically" and click Save Changes.
@panaghiotisadam
I'm glad I looked in here for this. Thank you for providing a solution.
I was about to ask this on your blog but your comment is disabled. Again, thank you!
Hi. If it's alright, I'm going to ask a question here since my concern also involves the use of table under the Nuntius theme.
Before I explain further, I want to clarify that the previous comment I made solved my table width problem and that this one is unrelated. I was working on a different post that also uses table, I can't seem to align it in the center using the table tag. I suspect that it has something to do with the theme I'm using (Nuntius). I was able to override the auto alignment when I input the center alignment code using the div tag.
This is the post in question: http://ajfudgeology.wordpress.com/2007/09/18/whattaday/
The table that gave me trouble is found on the bottom (the one that says "Author's note")
I know that it's been "fixed" now by the div tag, but I want to learn why the table_align_center isn't working so I could work around it in future posts that might include tables. I also want to know if the div tag is a suitable solution to this problem, or does it only make the coding redundant?
I hope I explained clearly.
PS (not related) - It was an old post that I imported into WordPress, so please, no judgment :) I cleaned it up as it was cluttered with unnecessary codes. And by reading panaghiotisadam's blog, I was able to turn that post to what it is now. So I give a shoutout to him.
a) Table align="center" is like the other pieces of code I mentioned in my first reply: deprecated.
b) Enclosing a table in a div to center it is ok, but you could have done something simpler: since you set the table width to 90%, you could simply add a 5% left margin:
<table style="ETC ETC ETC;width:90%;margin-left:5%;">
c) But you could have done something a lot simpler. A table is for content arranged in rows and columns: for a single column of text you simply don't need a table at all - yo only need a div.
RE:
b) I used div because I thought that it is a safer approach than declaring a table margin. I did this so that in case that I change my theme in the future (which I will), the layout won't be messed up by the default settings that themes implement.
(Not to say that I am not satisfied with Nuntius, but I'm just being realistic).
c) Same reason as above. I am under the impression that a table with a fixed width will stay the way it is, while using div for a column of text will be adjusted accordingly to the new theme's size properties once I decided to switch. My priority was the magazine-style layout, which I will be implement in other posts, so my initial concern is finding the best practice that can spare me of the time that I will otherwise be having should a new theme mess up the layout. With that said, I will be very pleased if you could advice me. :)
• What you're saying would be correct if you had used an absolute width (pixels). But you've used a relative width (percentage): n% width means n% of the post column width, so an n% wide table or div or object with an (100-n)/2 % left margin will remain centered no matter what the theme.
• If your concern is what happens when you change theme, then don't use tables unless it's absolutely necessary, because the defaults for tables vary from theme to theme (while divs are neutral): some of the coding that produced the intended result in one theme may be redundant if you switch to a theme with simpler table defaults, or insufficient if you switch to a theme with more quirks. Simple example: table cells in Nuntius have equal left and right padding but in Twenty Eleven they have no left padding at all.
• As I already pointed out, for a single column of content you don't need a table: using a table in this case is just unnecessary coding with no advantage whatsoever. Try the following please - it's the same result with less than half the HTML tags you've used (no table, plus one instead of two divs for the two-color strip):
joshpaunil
ajfudgeology<div class="aligncenter" style="font-family:courier;font-size:85%;line-height:1.1em;border:1.2px solid #000000;background-color:#ccc;width:86%;padding:2px 10px;">
<p style="text-decoration:underline;font-weight:bold;">HEADING</p>
PARAGRAPH ONE
<div class="aligncenter" style="width:85%;height:0;border-top:3px solid #000;border-bottom:2px solid #ff0;"></div>
<em>PARAGRAPH TWO</em>
</div>• You don't even need a table for the "magazine-style layout" you want. See here, under "Two columns":
http://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/
• Happy new year!
Hi there.
Thank you for giving clarity regarding the table vs div. I always learn something new from you. I am going to take your advice. Right now, I am removing the redundant codes and will use the ones you suggested. Thank you again. Happy new year! :)
You're welcome!
This topic has been closed to new replies.
