Need help? Check out our Support site, then


WordPress.com Forums » Support

Table style not working

  1. andrewjhayward
    Member

    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!

    <table style="padding-left:5%;width:90%;">
    <tbody>
    <tr>
    <td style="text-align:left;">TEST</td>
    <td style="text-align:left;">TEST</td>
    </tr>
    </tbody>
    </table>

    Thanks :)

    The blog I need help with is andrew-hayward.com.

  2. panaghiotisadam
    Member

    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.

  3. andrewjhayward
    Member

    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?

  4. panaghiotisadam
    Member

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

  5. andrewjhayward
    Member

    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?

  6. panaghiotisadam
    Member

    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:
    <td style="width:50%;vertical-align:top;text-align:justify;padding-right:24px;">
    And the opening td tag for the image should be:
    <td style="width:50%;vertical-align:top;">
    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:
    <img style="width:100%;" class="alignnone wp-image-389" title="Compressor Design" src="http://andrewjhayward.files.wordpress.com/2012/01/1-copy21.jpg" alt="Compressor Design" />

  7. andrewjhayward
    Member

    :) 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!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags