Need help? Check out our Support site, then


WordPress.com Forums » Support

Formatting content in tables

  1. valmcarthur
    Member

    I want to insert thumbnails of recipes with their respective links in a table 3 columns across by unlimited rows. I will need to learn some HTML code but can't find any tutorials to help in the WordPress site. Can someone point me in the right direction please?

    The blog I need help with is hearty-food.co.uk.

  2. timethief
    Member

    If you use a PC then the easiest way to create HTML tables with multiple columns and rows is to use the built-in table maker in Windows Live Writer to create your page and publish it to your blog. Some themes are HTML5 and CSS3 and the old HTML tables codes have been deprecated. You need inline CSS instead, that is, properties and values in the style attribute. If you do not or cannot use WLW then as you have provided your specifications for the HTML table required and you can get coding help here on the forum. I expect justpi or thesacredpath will assist you when they log-in.

  3. valmcarthur
    Member

    Thanks. I'm using a mac so I guess I'll have to get some coding help... Val

  4. valmcarthur
    Member

    Also, how can I hide the tags that appear at the bottom of my posts. I read in the forum that you make them sticky notes but I've tried this and it doesn't change anything. Thanks.

  5. timethief
    Member

    See here please > MistyLook CSS hide tags

    Unfortunately, with Mistylook, all the stuff below the post (cat, tag and leave a comment link) is all under one selector in the CSS, so it is all or nothing. Everything below the bottom of the post content would go away.
    ... Not possible with Mistylook. In some themes you can hide the tags via the CSS upgrade since they are under a unique selector, but not in Mistylook.
    http://en.forums.wordpress.com/topic/make-post-tags-invisible?replies=13#post-468317
    http://en.forums.wordpress.com/topic/make-post-tags-invisible?replies=13#post-470333

  6. 1tess
    Moderator

    A basic table code:

    <table>
<tr>
<td style="vertical-align:top;padding-right:10px;">
LINK_1
</td>
<td style="vertical-align:top;padding-left:10px;padding-right:10px;">
LINK_2
</td>
<td style="vertical-align:top;padding-left:10px;">
LINK_3
</td>
</tr>
<tr>
<td style="vertical-align:top;padding-right:10px;">
PICTURE_1
</td>
<td style="vertical-align:top;padding-left:10px;padding-right:10px;">
PICTURE_2
</td>
<td style="vertical-align:top;padding-left:10px;">
PICTURE_3
</td>
</tr>
</table>

    Rows go across. This table has two rows. One row for your links, the other for your images.

    If you study the code, the tr tag designates Table Rows.

    You always need and opening and closing tags. <tag> code between </tag>
    (note the "/" in the second of the pair.)

    Each row has 3 cells designated by the td tags inside of the table rows.

    You can adjust the padding between cells by changing the numbe I've suggested. The padding provides space between cells.

    You can adjust the vertical align to top, middle, or bottom.

    I suggest that you make your thumbnail pictures 146 px wide so they will fit 3 across in your table.

  7. 1tess
    Moderator

    On a second look at Mistylook it seems to add a sort of border around images, so you may need to eliminate that.

    You can try to edit each thumb in advanced settings of the image insert box by useing border 0.

    I have business to attend, so I don't know if that will be sufficient. Post again if that doesn't work.

  8. valmcarthur
    Member

    Hi,

    I'm obviously doing something majorly wrong as I've amended the HTML and put in the 1st link with image into the table template code I was sent but and all the code is now showing in the Visual mode too. I haven't updated it as don't want to overwrite this page but the code I've done is below. I could maybe create a dummy Recipes page and upload it but not link to it so only you or I can see it??

    Thanks for any help you can give.
    Val

    <table>
    <tr>
    <td style="vertical-align:top;padding-right:10px;">
    <span style="color: #85323c;"></span>
    href="http://hearty-food.co.uk/recipes/thai-chicken-and-rice-salad/">Thai chicken with mango,
    </td>
    <td style="vertical-align:top;padding-left:10px;padding-right:10px;">
    LINK_2
    </td>
    <td style="vertical-align:top;padding-left:10px;">
    LINK_3
    </td>
    </tr>
    <tr>
    <td style="vertical-align:top;padding-right:10px;">

    <img class="alignnone size-full wp-image-466" title="thai chicken mango rice salad_recipes" src="http://valmcarthur.files.wordpress.com/2012/06/thai-chicken-mango-rice-salad_recipes.jpg" alt="thai chicken mango rice salad_recipes" width="146" height="194" />
    </td>
    <td style="vertical-align:top;padding-left:10px;padding-right:10px;">
    PICTURE_2
    </td>
    <td style="vertical-align:top;padding-left:10px;">
    PICTURE_3
    </td>
    </tr>
    </table></span>

  9. 1tess
    Moderator

    This code is a problem:

    <td style="vertical-align:top;padding-right:10px;">
<span style="color:#85323c;"></span>
href="http://hearty-food.co.uk/recipes/thai-chicken-and-rice-salad/">Thai chicken with mango,
</td>

    You don't want the span style there. It needs to be included in the td style instead.
    And the text link is incorrect. It needs < a (without space) and < / a > tags before and after the link text.

    Like so:

    <table>
<tr>
<td style="vertical-align:top;padding-right:10px;color:#85323c;">
<a href="http://hearty-food.co.uk/recipes/thai-chicken-and-rice-salad/" title="thai chicken and rice salad recipe" target="_blank">Thai chicken with mango</a>
</td>
<td style="vertical-align:top;padding-left:10px;padding-right:10px;">
LINK_2
</td>
<td style="vertical-align:top;padding-left:10px;">
LINK_3
</td>
</tr>
<tr>
<td style="vertical-align:top;padding-right:10px;">

<img class="alignnone size-full wp-image-466" title="thai chicken mango rice salad_recipes" src="http://valmcarthur.files.wordpress.com/2012/06/thai-chicken-mango-rice-salad_recipes.jpg" alt="thai chicken mango rice salad_recipes" width="146" height="194" />
</td>
<td style="vertical-align:top;padding-left:10px;padding-right:10px;">
PICTURE_2
</td>
<td style="vertical-align:top;padding-left:10px;">
PICTURE_3
</td>
</tr>
</table>

  10. 1tess
    Moderator

    a tag then text link and to close /a tag is what I mean …

  11. valmcarthur
    Member

    Hi there. Many thanks for your help with the code but when I paste this into the HTML it also shows up in the visual mode too. I have deleted all previous code and pasted in the code you suggested so not sure what I'm doing wrong. Is it worth me doing a tutorial in code as I'll admit I'm a bit clueless!! Thanks, Val

  12. 1tess
    Moderator

    Hi Val,

    Here is a link to a screenshot taken from my test blog set to wear Mistylook:
    http://1tess.files.wordpress.com/2012/06/table-mistylook.jpg

    The code I posted above (after "like so") is what is appearing in the screenshot.
    this thread.
    http://en.forums.wordpress.com/topic/formatting-content-in-tables?replies=11#post-908510
    Do you see something similar?

    I am a volunteer, a fellow blogger, so I cannot see a post you have not published. Have you published your trials? I see that your recipes page has not changed.
    http://hearty-food.co.uk/recipes/

    As for learning html table code, this is useful:
    http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables
    or this:
    (scroll down to the end of this post)
    http://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags