Need help? Check out our Support site, then


WordPress.com Forums » Support

Table Alignment

  1. zagowiki
    Member

    I have been attempting to use tables to organize my page's layout, specifically in relation to images combined with text. I understand that it may be an outdated method of organizing your page layout, but it works for me and will serve the purpose i need it to. Except, wordpress.com seems to have a funny way of interpreting and displaying TABLE html code. When i try to use the rowspan tag within a <td> tag, it works in as much that the cell now spans 2 rows, but the problem is its aligned ABOVE the 2 rows its supposed to span. I've tried a million code work-arounds and its just not aligning the way i want it to.

    A lil research points to the issue actually being the CSS code within the Theme templates, but its affected by soooooooo many Theme's in this way that it's gotta be more than just a case by case issue. Trying out different themes, the only one that displayed the table aligned the way I meant it to was the Soundcloud one, which is $75.

    Is WordPress.com just not a fan of tables, or what can i do?

    The blog I need help with is robertotoscano.wordpress.com.

  2. justpi
    Member

    In many of the newer themes, tables aren't 'neutral', because their styling is designed for specific purposes (mainly rows of data). If you have the Custom Design upgrade, you can modify the default styling once for all. Without the upgrade, you can modify it on a case-by-case basis only, using coding in the so-called Text editor. But I can't tell you how to do this if I can't see the content. If you wish, you can temporarily switch your blog to the middle privacy option and link to an example you'd like to improve.

  3. zagowiki
    Member

    Hey, ive changed the privacy options so it should be viewable. here's the link to the current problem page http://robertotoscano.wordpress.com/books/

    I'd paste the code, but it's long due to the content, and i'm confident in its structure and cleanliness. But, as you can see, my alignment is off, and in chrome the picture dont show up at 300px like ive set for them too.

  4. justpi
    Member

    When I said I'd have to see the content, I meant the code as well, of course. But you don't need to paste it: I can see the code if the blog isn't private (and I copied your code, so you can turn the blog back to private, if you wish).

    Some remarks:

    1) The 'standard' way of defining the image dimensions has no effect inside a table cell: you need different coding (if you retain the table inside the table idea, which I probably wouldn't).

    2) To correct the vertical alignment of the images you'd need to turn the opening td tags from this:

    <td rowspan="2">
<td>

    to this:

    <td style="vertical-align:top;" rowspan="2">
<td style="vertical-align:top;">

    3) All of these must be removed:

    <span style="font-family:Century Gothic;">
</span>

    More on this after you tell me if you actually wanted the text in century gothic or not (the first text block has multiple span tags, so they seem like an accident that was produced by copypasting from Word rather than intentional coding).

    4) The whole thing is probably more complicated than it needs to be. I can suggest alternatives, but first two issues:
    • Two of the images are less than 300px high, so if you set them to display at 300 the quality will be poor.
    • It seems you want all the relevant text next to the image. But some of the texts are too long, plus the theme has flexible width, so the texts will be or can become longer than the images.
    Because of these, the arrangement I would do would be: image (a lot shorter than 300px), "metadata_content_table" next to it, regular text below image and table.
    If you insist on your original idea, I need to know what should happen to the overlong texts: continue in a straight column when past the bottom of the image, or fill the space below it?

  5. zagowiki
    Member

    Hey, thanks for the response! The style code actually did it, my alignment problem was fixed.

    Quick clarifications:

    Yeah, the span tags were just c&p vomit, unnecessary and removed.

    The table within a table was another copy and paste maneuver that i cleaned up and kept because it worked for the moment. I might bring it into the bigger table with some excessive rowspan use.

    The images are just placeholders for now, i'll have better quality images to use once the real content is placed.

    I want the images to be on the left, with the table data and descriptions running along the right side. I seem to have accomplished that with your code.

    Whether overflow text continues as a column or fills the space under the picture, i haven't really decided yet. don't particularly care at the moment.

    One more question.. How do i define image dimensions within a table?

    I appreciate the help immensely, i was tearing my hair out with that table alignment.

  6. justpi
    Member

    You're welcome.

    First of all, drag the bottom right corner of the browser window to make your page narrower and see what happens. If you prefer a fixed arrangement, you need to select a fixed-width theme.

    What should be done with the images depends on whether the theme width is fixed or flexible, and whether you'll follow my advice and get rid of all the unnecessary coding. All you need for each group is a regularly inserted left aligned image (makes the rest of the content wrap around), the data table,* regular text below the table, and a bit of coding to clear the wrap-around effect before the next group.
    * You'll need to add the style attribute in the opening table tag and specify an appropriate width, otherwise the table won't wrap around (because the default table width in most themes is 100%).

  7. zagowiki
    Member

    The left-aligned default doesn't work very well. When trying to have multiple groups of left aligned pix with text on the right, it gets, buggy. I prefered more control over the structure than leaving it up to the whims of the WordPress code base, hence the tabling scheme lol

    I'm going to keep the table width flexible with the overflow text just extending down in a column. Since I'll be maintaining the table for organization, at least at the moment, how do i tweak the image dimensions? Right now only firefox recognizes the code, chrome draws it up as tiny thumbnails.

  8. justpi
    Member

    There's nothing buggy about left aligned images, and there are no "whims of the WordPress code base" in this respect: class alignleft means float left, usually with correct default margins as well, and works exactly as it should. You just have to clear the floats where appropriate (as I already said), to prevent unwanted wrap around. Try this model in a test page please:

    <img style="width:30%;" class="alignleft" alt="IMAGE_DESCRIPTION_HERE" src="IMAGE_URL_HERE" />
<table style="width:65%;" id="metadata_content_table">
ETC_ETC_ETC
</table>
DETAILED_DESCRIPTION_HERE
<br style="clear:both;" />

    Using this five times instead of your mega-table results in fifty HTML tags less.

  9. zagowiki
    Member

    In theory that BR tag should do the trick.. except WordPress likes to remove those :/ so without that to organize the text and images together in any sort of consistent way, I'm left with tables. Or i suppose i could include an abundance of CSS code or something to clean it all up.. not really up for that tho lol i like my tables.

    Sorry if i missed this, but..

    1) The 'standard' way of defining the image dimensions has no effect inside a table cell: you need different coding (if you retain the table inside the table idea, which I probably wouldn't).

    What is the different coding i need?

  10. justpi
    Member

    Yes, that is a WP whim: the br tag is removed - but only if you switch to VIsual.

    No, that doesn't mean you're left with tables. What WP removes when you switch to Visual is no-content tags, so any solution with tags that enclose something will stay put. For one solution out of several, replace the br tag with this:
    <div style="clear:both;display:none;">.</div>

    No, you didn't miss the other thing: I'm not telling you because I'm trying to talk you away from totally unnecessary coding!

  11. zagowiki
    Member

    I've created a test page to see if we can't work out the kinks, because you're right.. It'd be nice to be able to do this with the minimum amount of code necessary.

    http://robertotoscano.wordpress.com/left-align-test/

    Here's the code..

    <img class="alignleft size-full wp-image-27" alt="toscano_global_large" src="http://robertotoscano.files.wordpress.com/2013/02/toscano_global_large1-e1361203007103.jpeg" width="200" height="300" />
    <table id="metadata_content_table">
    <tbody>
    <tr>
    <td>Title</td>
    <td>Between Terrorism And Global Governance</td>
    </tr>
    <tr>
    <td>Author</td>
    <td>Roberto Toscano</td>
    </tr>
    <tr>
    <td>Publisher</td>
    <td>Har-Anand Publications Pvt. Ltd., 2009</td>
    </tr>
    <tr>
    <td>ISBN</td>
    <td>8124114854, 9788124114858</td>
    </tr>
    <tr>
    <td>Length</td>
    <td>112 pages</td>
    </tr>
    </tbody>
    </table>
    The first chapters of this book revisit, through essays devoted to thinkers in the field of political philosophy (from Machiavelli to Huntington), the tension between ethics and politics, trying to suggest that ethics is intrinsically tied to politics, and that moral awareness and realism are not in contradiction insofar as we move beyond individual ethics and address the issue of responsibility toward society and especially the rights and interests of others. The second main focus of this book is terrorism, the vile and despicable form of conflict that targets innocent civilians.
    Both for terrorism and for other transnational threats and crises, from the present downturn to global warming, though still primarily responsible, cannot conceivably be adequate to the task. This is why ethics and realist politics point in the same direction: that of the need to recognize duties toward those who are not our fellow citiziens as well as limitation to a sovereignty that, while legitimate, cannot be used against both legal and moral norms (from the preface of the book).
    <div style="clear: both; display: none;">.</div>
    <img class="size-full wp-image-13 alignleft" alt="toscano_jahanbegloo_sm" src="http://robertotoscano.files.wordpress.com/2013/02/toscano_jahanbegloo_sm-e1361202880329.jpg" width="197" height="300" />
    <table id="metadata_content_table">
    <tbody>
    <tr>
    <td>Title</td>
    <td>Beyond Violence: Principles for an Open Century</td>
    </tr>
    <tr>
    <td>Authors</td>
    <td>Roberto Toscano, Ramin Jahanbegloo</td>
    </tr>
    <tr>
    <td>Publisher</td>
    <td>Har-Anand Publications Pvt. Limited, 2009</td>
    </tr>
    <tr>
    <td>ISBN</td>
    <td>8124114293, 9788124114292</td>
    </tr>
    <tr>
    <td>Length</td>
    <td>128 pages</td>
    </tr>
    </tbody>
    </table>
    Il libro e' volto a dimostrare come le culture non sono un elemento del tutto indipendente, ma sono il frutto di un costante dialogo e scambio. E' solo attraverso il riconoscimento di questa verita' e abbandonando i miti brutali dell'essenzialismo che sara' possibile superare i conflitti. Il saggio non e' un manifesto per il pacifismo ideologico, piuttosto costituisce - con espliciti riferimenti a Ghandi - un appello alla non violenza intesa come un modo pratico e aperto di confrontarsi con le differenze ed i contrasti. Il libro sostiene l'esigenza di un realismo elevato, un realismo etico che rifugga la saggezza convenzionale di molti pseudo-realisti, la cui presunta obiettivita' e' solo una copertura per la loro passivita' o per la loro perversa predilezione per il conflitto.
    <div style="clear: both; display: none;">.</div>

    As it stands, the DIV tag did nothing discernable.

  12. justpi
    Member

    Sorry, the previous suggestion wasn't well thought of. You need this instead:
    <div style="clear:both;visibility:hidden;">.</div>

    As for your test page, you missed the crucial parts of my model:
    img style="width:30%;"
    table style="width:65%;"

  13. zagowiki
    Member

    I've included the style width tags, and updated the DIV tag you suggested.

    The result, the width tags seem to be doing what they're meant to. The DIV tag still appears to be ineffective tho. Beyond the first grouping of image/table/text, the formatting doesn't seem to hold.

  14. zagowiki
    Member

    Nevermind, cleaned it up a bit and now the DIV tag is working.

    THANK YOU! You've been great stranger, really appreciate it.

  15. justpi
    Member

    You're welcome!

    Naturally you can change the 30%-65% to whatever proportions will give you the best overall balance. You just have to keep the sum to around 95% (because of the default margins of the left aligned images).
    Also note that, in contrast to your original idea, I make all the images same width (since they show up as a column, same width gives a more uniform look than same height).

    Guess it's time for the unanswered question now, as you might need it in a different situation.
    a) To make images show up in the desired size when inside a table cell, you need to define the width of the cell, by adding the style attribute to the opening td tag. If the width of the theme is fixed, you'd define the width in pixels. In flexible-width themes you need percentages. In a fixed-width theme, you could also do it by using col tags in the table coding.
    b) I understand you manually changed the w and h numbers in the image codes to 200 and 300. Tables apart, there are two problems with this. First, if the theme has flexible width the images shouldn't have a fixed size. Second (assuming you did want fixed-size images), setting 200 and 300 would work if the originals had a 2/3 aspect ratio. But your originals had varying aspect ratios; if the original has a different aspect ratio than the one you try to specify, only the width number is taken into account (the height number is ignored in favor of retaining the original aspect ratio). If you really want to force the same dimensions to all the images (that is, distort them) you need to delete the 'regular' w and h indications and define the dimensions via the style attribute.

    By the way, I don't see why you make the displayed versions of the images link to the originals.

  16. zagowiki
    Member

    Can you give me a code example of the TD style tag for image width? I'm still extremely new to CSS, not confident on how to format the coding. and as you can probably tell, my HTML knowledge comes from a random high school class i took years ago lol

    And the linked images i think is just a WP default when inserting media into the post. Wasn't worried about it at the moment enough to change it.

  17. justpi
    Member

    a) It's not literally for image width, it's for constraining cells to a specific width. And it's just like the other uses of the style attribute that I showed you; for example:
    <td style="width:20%;">
    As always with the style attribute, it can include multiple properties and values, for instance:
    <td style="width:20%;text-align:center;padding-right:12px;">
    This article of mine might be useful to you (along with my articles on formatting text etc):
    http://wpbtips.wordpress.com/2012/02/05/introduction-to-html-for-wordpress-com-users/

    b) See here:
    http://wpbtips.wordpress.com/2009/04/26/images-the-three-link-options/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags