Need help? Check out our Support site, then


Creating Tables in WP?

  1. Hello

    I created some tables and put a linked image in each element of the table.
    So, I got this:

    Everything in this theme and tables look just perfect to me except for the grouping of row elements. I mean whenever you try to click on an element, it seems like you are clicking on the whole row.
    I figured it might be the <tbody> so I tried to delete it from the HTML editor in the WP, but it keeps coming again after saving my post!

    Would you please advise me how to delete <tbody> ? or how to make selection of an element without selecting the whole row (un-group row elements)?

    Anyway, I'm listing my HTML code for these tables in this post:
    http://osamasalti.wordpress.com/2010/05/20/home/

    ----------THE CODE:------------------

    '<h4>My Cartoons:</h4>
    <table>
    <tbody>
    <tr>
    <td>
    
    [caption id="attachment_818" align="alignnone" width="150" caption="Cartoons 2003-2007"]<img class="size-thumbnail wp-image-818" title="Cartoons 2003-2007" src="http://osamasalti.files.wordpress.com/2010/05/2003_2.jpg?w=150" alt="" width="150" height="125" />[/caption]</td>
    <td>
    
    [caption id="attachment_814" align="alignnone" width="150" caption="Cartoons 2008"]<img class="size-thumbnail wp-image-814" title="Cartoons 2008" src="http://osamasalti.files.wordpress.com/2010/05/2008_1.jpg?w=150" alt="" width="150" height="115" />[/caption]</td>
    </tr>
    <tr>
    <td>
    
    [caption id="attachment_791" align="alignnone" width="150" caption="Cartoons 2009"]<img class="size-thumbnail wp-image-791 " title="Cartoons 2009" src="http://osamasalti.files.wordpress.com/2010/05/2009_1.jpg?w=150" alt="" width="150" height="124" />[/caption]</td>
    <td>
    
    [caption id="attachment_787" align="alignnone" width="150" caption="Cartoons 2010"]<img class="size-thumbnail wp-image-787" title="Cartoons 2010" src="http://osamasalti.files.wordpress.com/2010/05/media1_v.jpg?w=150" alt="" width="150" height="95" />[/caption]</td>
    </tr>
    </tbody>
    </table>
    <h4>My Photographs:</h4>
    <table border="0">
    <tbody>
    <tr>
    <td>
    
    [caption id="attachment_820" align="alignnone" width="150" caption="Damascus 2008"]<img class="size-thumbnail wp-image-820" title="Damascus 2008" src="http://osamasalti.files.wordpress.com/2010/05/damascus-osama-salti-8.jpg?w=150" alt="" width="150" height="100" />[/caption]</td>
    <td>
    
    [caption id="attachment_821" align="alignnone" width="150" caption="Damascus 2009"]<img class="size-thumbnail wp-image-821" title="Damascus 2009" src="http://osamasalti.files.wordpress.com/2010/05/damascus-osama-salti-13.jpg?w=150" alt="" width="150" height="100" />[/caption]</td>
    </tr>
    <tr>
    <td>
    
    [caption id="attachment_826" align="alignnone" width="150" caption="UAE 2008"]<img class="size-thumbnail wp-image-826" title="UAE 2008" src="http://osamasalti.files.wordpress.com/2010/05/uae-osama-salti-9.jpg?w=150" alt="" width="150" height="100" />[/caption]</td>
    <td>
    
    [caption id="attachment_825" align="alignnone" width="150" caption="Mix"]<img class="size-thumbnail wp-image-825" title="Mix" src="http://osamasalti.files.wordpress.com/2010/05/mix-osama-salti-31.jpg?w=150" alt="" width="150" height="100" />[/caption]</td>
    </tr>
    <tr>
    <td>
    
    [caption id="attachment_822" align="alignnone" width="100" caption="The Good Friday Part 1"]<img class="size-thumbnail wp-image-822" title="The Good Friday Part 1" src="http://osamasalti.files.wordpress.com/2010/05/osama-salti-2009-18.jpg?w=100" alt="" width="100" height="150" />[/caption]</td>
    <td>
    
    [caption id="attachment_823" align="alignnone" width="100" caption="The Good Friday Part 2"]<img class="size-thumbnail wp-image-823" title="The Good Friday Part 2" src="http://osamasalti.files.wordpress.com/2010/05/osama-salti-gf-2-5.jpg?w=100" alt="" width="100" height="150" />[/caption]</td>
    </tr>
    <tr>
    <td>
    
    [caption id="attachment_824" align="alignnone" width="150" caption="The Good Friday Part 3"]<img class="size-thumbnail wp-image-824" title="The Good Friday Part 3" src="http://osamasalti.files.wordpress.com/2010/05/img_1095.jpg?w=150" alt="" width="150" height="100" />[/caption]</td>
    </tr>
    </tbody>
    </table>
    <h4>My Paintings:</h4>
    <table>
    <tbody>
    <tr>
    <td>
    
    [caption id="attachment_819" align="alignnone" width="107" caption="My Paintings"]<img class="size-thumbnail wp-image-819" title="My Paintings" src="http://osamasalti.files.wordpress.com/2010/05/painting-osama-salti-5.jpg?w=107" alt="" width="107" height="150" />[/caption]</td>
    </tr>
    </tbody>
    </table>
    <h4>My Print Work:</h4>
    <table>
    <tbody>
    <tr>
    <td>
    
    [caption id="attachment_827" align="alignnone" width="97" caption="Print Work 2009"]<img class="size-thumbnail wp-image-827 " title="My Print Work 2009" src="http://osamasalti.files.wordpress.com/2010/05/poster-syria2009-home.jpg?w=97" alt="" width="97" height="150" />[/caption]</td>
    <td>
    
    [caption id="attachment_845" align="alignnone" width="60" caption="Print Work 2010"]<img class="size-thumbnail wp-image-845 " title="My Print Work 2010" src="http://osamasalti.files.wordpress.com/2010/05/contes1.jpg?w=60" alt="" width="60" height="150" />[/caption]</td>
    </tr>
    </tbody>
    </table>'

    --------END OF CODE--------------

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

  2. Probably you need a CSS edit.

    You need to change the class

    <br /> table tr:hover td { whatever property }<br />

    to

    <br /> table tr td:hover {whatever property }<br />

    It works over here. and now pointing on one cell only highlights that cell only and not the whole row.

  3. Thanks Phoxis!

    I got the idea which seems easy. But I cant edit any CSS since I'm using a wordpress.com blog. If I'm wrong please notify me how to edit the CSS class?

    Can this be done through HTML commands?

    Peace

  4. panaghiotisadam
    Member

    @ssaamm: You can edit your CSS if you buy the CSS upgrade. But this is a mistake in the theme - what you should do is report it to staff so they fix it:
    http://en.support.wordpress.com/contact/

    (By the way, after phoxis's reply I guess you realize that there's nothing wrong with your table code.)

  5. Thanks Panaghiotisadam

    I reported a bug in theme: Motion.
    I'm waiting for the WP team to fix that.

    It was my first time using HTML. I guess I did well :)

    Thanks again.
    Peace

  6. i dont think it is a bug, probably the theme developer wanted to make the whole row to be highlighted.

Topic Closed

This topic has been closed to new replies.

About this Topic