post

DEMO: Right-justify a column in WP-Table Reloaded

Trying to solve a puzzle: how to right-justify currency data in a table from within the table, without altering the CSS code in the background. I’m using WordPress 3.3 and WP-Table Reloaded at the time of press (January 24, 2012).

Here I tried using <td align=”right”>$100.00</td> within the relevant cells, and was surprised to see that it added an extra column. Obviously, I’d like the “Amount” data under the “Amount” heading!

[table id=1 /]

Do you have any ideas to help me?

Thanks!

 

UPDATE (January 27, 2012:

After receiving instructions from the developer of WP-Table Reloaded, the plug-in I’m using to insert tables into WP posts, I tried out his “recipe” and created this new version of the table above:

[table id=2 /]

It didn’t appear to be working, so I double-checked the copy-paste results of my efforts to make sure I hadn’t lopped of any symbols or characters. Not seeing anything, I made table 3 from scratch (Table 2 was a copy of Table 1).

Here is the result:

[table id=3 /]

About Erin Anne

I use storytelling and "content marketing" to promote my clients' work. I develop and implement communications strategies using all the on- and offline tools and media at our disposal, publish books and ebooks and market them internationally, or even just simply create a new website and teach the client how to run it. If you have something interesting to say, a valuable service to offer, or an important cause to promote, I'd love to work with you, too!

Comments

  1. Erin Anne Beirne says

    I posted this question on the WordPress Support forum, and the software developer of WP-Table Reloaded answered me personally (very cool), with this:

    Hi,

    thanks for your post.

    Unfortunately, I don’t yet have an idea for a quick and easy, ready-to-use solution.

    The main question basically is:
    Do all tables (in WP-Table Reloaded) on that site have three columns, where the third column contains a currency value that shall be right aligned?
    If that’s the case, just a small piece of CSS is necessary.

    If not, we could use a filter hook to add a CSS class to all cells that contain the $ symbol (as that’s going to be a cell with a currency value obviously), and then use that CSS class to align the text to the right.

    Regards,
    Tobias

    Clearly, the second option, a CSS filter hook, will work better for my solution because the tables are different sizes and formats, and not all have currency values in them.

    I have responded with this clarification, and hope Tobias can tell me how to set this up. Stay tuned!

    ea/

Speak Your Mind

*