Support » Plugin: WP-Table Reloaded » Putting two tables together side by side

  • Hi

    I would like to know how to put two separate tables side by side on a single page. Will this involve using div tags to do this? Thanks.

    sl

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    you are correct, you will need to use HTML <div> tags as a container for each of the tables/Shortcodes. Then you can use CSS to adjust the positions of the tables.

    Regards,
    Tobias

    So how would I do that because right now it looks like this
    [table id=1 /] [table id=2 /]
    and html:
    “<strong”>[table id=1 /] [table id=2 /]<“/strong>”
    (without the quotes)

    I need the tables to be side by side. instead of like:

    http://carnevalehockeygroup.com/?page_id=47

    What code should i put in?
    Thanks Tobias

    You will need to put the tables within <div> tags and in the CSS position that specific <div>. This is the only way to do it. You’ll have to play around with positioning.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    first, you should remove those <strong> tags around the table Shortcodes. They are not needed and just cause trouble with the HTML code.

    Then, there’s a problem in your theme: The width of the content area is restricted to only 640px. This is not enough space for two tables next to each other.
    This needs to be changed in your theme’s CSS file. This might then however change the layout/styling of other pages as well, so you should be careful with this…

    Regards,
    Tobias

    What if I make the page full page template? that allows for a lot more room

    I made it full page and it still wont allow me to put them side by side

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, the full page width is a good start already, as two pages should now fit onto the page.

    Now, you should wrap the table Shortcodes in two <div> containers, which get CSS applied to them, with the “float” property.

    Regards,
    Tobias

    So it should look like this <div>[table id=1 /] [table id=2 /]<div>
    because that didnt work for me.

    Each table should have its own DIV tag. Example:

    <div id=”table1″>[table id=1 /]</div>
    <div id=”table2″>[table id=2 /]</div>

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    exactly, slui’s code is correct.
    Then add the following code to the “Custom CSS” textarea on the “Plugin Options” screen:

    #table1 {
      width: 49%;
      float: left;
    }
    
    #table2 {
      width: 49%;
      float: right;
    }

    (The width is 49% to leave some room for eventual borders or margins.)

    Regards,
    Tobias

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Putting two tables together side by side’ is closed to new replies.