Problems formatting tables – help!
Hello all. I use wordpress for my badminton club website. Here is a link to it:
As you can see, I have tried to insert player profiles in a table. However, the formatting is unstable i.e. the line spacing will not remain in place.
I created the table in word and then copied it across.
Now I do not know how to use the code well. However, I would like to improve the look of this page. Is there a way of inserting tables that I do not know of? Or does anyone have a suggestion of a different way of showing this information?
Many thanks for any help you can give (and remember you are talking to a simpleton in terms of techie ability :S
The blog I need help with is broomgrove.wordpress.com.
Do you mean the table on this page?
If so, what exactly would you like to change?
By the way, are you aware of the fact that the theme you’re using has flexible width? Visit a page such as this and see what happens when you drag the browser window to make it narrower:
The page I was trying to change was:
Can you see that after the first entry, the next entry does not stay on the line below. I have tried to press enter, and even tried to learn the code to ensure the next entry was on the line below, but to no avail! Have you any advice on how I can improve this.
On the point of flexible width, I had not noticed that. Perhaps I should change it as it causes problems when making the window smaller. Could you suggest any other themes that are similar (I want to keep a static page in the corner.
Thanks for your help,
Before we get to your actual questions, there are a couple of other things that can or must be changed.
1) The images link to the full-size originals when clicked. Is that intentional or not? Personally I don’t see why they should, especially when the originals vary greatly in size. (More on images after you reply to this question.)
2) The whole table is some huge piece of coding, so it would be good to make it lighter.
a) Specifying the width for each and every cell is quite redundant. You can turn all of these:
<td valign="top" width="301">
and all of these:
<td valign="top" width="324">
and add this between the opening table tag and the opening tbody tag:
<col width="301" /><col width="324" />
I wonder why you made the two columns unequal, by the way. If you’d rather have two equal columns (as I think you should), then add this instead:
<col span="2" width="50%" />
b) Each image code includes this:
<img style="display:block;float:none;margin-left:auto;margin-right:auto;" title=ETC ETC ETC
That’s four different commands just to center the image. Turn all of these to this:
<img class="aligncenter" title=ETC ETC ETC
1) I have removed the links fir the images. Thelinks didn’t really serve any purpose. I think I will remove the links from all of the images in the site.
2a) The width of the columns are now the same. I had not even realised they were different! I have added: <col span=”2″ width=”50%” /> at the top as you suggested.
2b) I have centred the image using the code you suggested.
Many thanks for advice. If you are able to further advise/answer any of my above questions, I’d be very grateful.
Now, re your original question:
If you work in the Text editor, not the Visual, you don’t have to add code for line or paragraph breaks: this code is inserted automatically when you press enter once or twice, respectively, but the editor hides it from view to avoid unnecessary clutter.
Here’s the beginning of the content of the first cell:
<img class="aligncenter" title="Gerry Firkins" alt="Gerry Firkins" src="http://broomgrove.files.wordpress.com/2008/10/official-gerry-pic.jpg" width="148" height="200" /><strong>Name </strong>Gerry Firkins<strong>Club Membership duration:</strong>Since 1986<strong>Club Position:</strong>Secretary</p>
You just need to press enter twice before each one of these:
Same thing for all the cells, of course.
If that’s what you tried and it doesn’t work, then you’re having a browser issue. What browser and version are you using?
Re “problems when making the window smaller” and “static page in the corner”:
a) The problem isn’t confined to making the window smaller (one wouldn’t normally do this, would they?). I asked you to try this because it demonstrates that the theme has a flexible width; that is, it demonstrates that visitors with different screen resolutions will see a different relationship between text and images. To limit this, you need some coding…
b) To avoid this, you need a fixed-width theme. Unfortunately, displaying the content of the About page in the sidebar is a feature unique to Andreas04. The only theme on which you could approximate this is Vigilance. It has two right sidebars, and a wide sidebar area above these two. You could add a Text widget in that area and paste the content of the About page in the widget. But Vigilance is a “retired” theme: whether it is available to you or not (in Appearance > Themes) depends on when you created the blog.
Regarding the spacing, I had a play with the page. It seems if I double spaces under the ‘name’ line (the first one) the spacing issue was resolved. Not sure why this worked, but it did, so I am happy!
I think that I would like to have a ‘fixed width’ page. I see most of them are like this. Ideally I am hoping to find one that has the ability to have drop dwon menus too. Lots to choose from I see.
Thanks for your time and expertise.
“Not sure why this worked”
Because that’s the way you add regular paragraph breaks in the Text editor.
But the ‘name’ lines aren’t correctly formatted yet, so they aren’t flush with the rest. So, to perfect things, enter double spaces before and after each image code, i.e. make all cells like this:
<td valign="top"> <img class="ETC ETC" /> <strong>Name</strong> ETC ETC ETC ETC
By the way, on many lines you’re missing a (horizontal) space between the colon and the plain text that follows.
“hoping to find one that has the ability to have drop dwon menus too”
This is possible in all the themes that have a top menu. Some do it automatically if you have published child pages; in the rest you have to do it manually – see this post of mine:
A word of caution: The table you created uses outdated coding. It works because Andreas04 is an old theme, but if you switch to one of the newer themes some of the coding won’t work, and the styling will be different, so you may need to make changes again.
I’m also having trouble with tables. I haven’t posted anything on my blog because I haven’t got the tables right.
There are other blogs where I can copy and paste tables straight from Word but when I do that on WordPress it doesn’t work.
How can I insert a properly formatted table?
The formatting also changes on paragraph line spacing for some reason.
You need to hand code them, or modify the coding that another tool gives you.
a) WP uses up-to-date coding while most table tutorials or generators use outdated coding. For example, in your latest post you’ve used the width, border, cellspacing, cellpadding and valign attributes: these are all deprecated – they don’t work on newer themes.
b) In most of the newer themes tables have a default styling, primarily designed for rows and columns of data (which is what tables really are for). So you need to know what the CSS of the theme specifies, and know how to override it if and when necessary. For example, the default on Twenty Eleven is:
table: 100% width, bottom border only;
each cell: padding 6px 10px 6px 0 (top, right, bottom, left), top border only.
If you have the Custom Design upgrade, you can change the default once for all, otherwise you have to do it for each and every separate table (using the style attribute with appropriate properties and values).
Now, on your latest post I’m seeing you tried to create a crossword puzzle. It would probably be easier for you to create it as an image instead of a table.
“The formatting also changes on paragraph line spacing”
The topic ‘Problems formatting tables – help!’ is closed to new replies.