WordPress.org

1. slui
   Member
   Posted 2 years ago #
   

   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

2. TobiasBg
   Member
   Plugin Author
   Posted 2 years ago #
   

   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

3. iaroca
   Member
   Posted 2 years ago #
   

   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

4. slui
   Member
   Posted 2 years ago #
   

   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.

5. TobiasBg
   Member
   Plugin Author
   Posted 2 years ago #
   

   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

6. iaroca
   Member
   Posted 2 years ago #
   

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

7. iaroca
   Member
   Posted 2 years ago #
   

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

8. TobiasBg
   Member
   Plugin Author
   Posted 2 years ago #
   

   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

9. iaroca
   Member
   Posted 1 year ago #
   

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

10. slui
    Member
    Posted 1 year ago #
    

    Each table should have its own DIV tag. Example:

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

11. TobiasBg
    Member
    Plugin Author
    Posted 1 year ago #
    

    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

Topic Closed

This topic has been closed to new replies.