WordPress.com Forums » Topic: Table style not working

andrewjhayward on "Table style not working"

andrewjhayward — Mon, 23 Jan 2012 19:38:00 +0000

:) Thats great, thank you for all your help, I'm getting used to this editing now. It doesn't help that the WYSIWYG editor inserts deprecated code, confusing!

panaghiotisadam on "Table style not working"

panaghiotisadam — Mon, 23 Jan 2012 18:37:02 +0000

It's not you, it's the theme: it aligns the baseline of images. So you need to specify the vertical alignment you prefer. In addition:
• Several attributes, among them width="whatever", are deprecated.
• You'd better add some extra right padding to the text.
• As I already mentioned, you don't need to specify the text alignment if you want it left. But in this case justified would probably look better.
In all, the opening td tag for the text should be:

And the opening td tag for the image should be:

You also need to add a space after each period in your text.
And I'm not sure the miserable Explorer will display the image correctly when it's set to 300px wide but the table constrains it to a smaller width (I'm a Mac user so I can't check it). It's safer to turn the image code to this:

andrewjhayward on "Table style not working"

andrewjhayward — Mon, 23 Jan 2012 16:16:36 +0000

I think I've managed to figure it out. Instead of using px or % margins, I've just set the table widths and margins to auto, which spaces it in the center of the window no matter what size :)

I've been trying to get my homepage (www.andrew-hayward.com) to work with a table, but for some reason the picture ends up looking like it's a row above the text. I'm using this code:

<table>
<tr>
<td style="text-align: left;" width="50%">Welcome to my Engineering portfolio website.Details of my achievements and personal interests can be found in the "About Me" section.Examples of both my design and analytical work can be found in the "Projects" section.If you have any questions or comments please contact me.</td>
<td><img class="alignright wp-image-389" title="Compressor Design" src="http://andrewjhayward.files.wordpress.com/2012/01/1-copy21.jpg?w=300" alt="Compressor Design" width="300" height="242" /></td>
</tr>
</table>

Any ideas where I'm going wrong?

panaghiotisadam on "Table style not working"

panaghiotisadam — Mon, 23 Jan 2012 14:49:09 +0000

You're welcome. Sorry, I have no experience with mobile devices, so I cannot answer your new question. Another volunteer will.

andrewjhayward on "Table style not working"

andrewjhayward — Mon, 23 Jan 2012 14:11:55 +0000

Thank you for the help, that has worked nicely. In general, which is the best way to specify margins to maintain compatibility across to phones etc? Is coding with %'s better than in px?

panaghiotisadam on "Table style not working"

panaghiotisadam — Mon, 23 Jan 2012 01:14:34 +0000

Padding is space inside a frame: you need margin-left, not padding-left. (You're getting the impression that the top indents while the bottom doesn't because the default in 2011 is a bottom border for the table but a top border for each cell.)

And text-align:left is superfluous, as it's the default.

andrewjhayward on "Table style not working"

andrewjhayward — Mon, 23 Jan 2012 00:10:36 +0000

http://andrew-hayward.com/about-me-2/

I've been trying to use this code to indent the table, but whilst the top bar of the table indents the bottom doesn't. Its like the indent doesn't work on the last bit of the table. Can anyone see what is wrong because it has been driving me mad!

Thanks :)