Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    34
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Centre tables side by side on paget

    I have some horrible old code which I am re-working, but it seems to be almost there. This is just a small Uni project, so nothing too important. What I want is for the two tables, author tags and article tags to be in the centre of the page, side by side.

    At the moment it looks like this when one is aligned left and the other right. But, how do I get both into the middle, one next to the other. Two SS's below show what I have and what I want.

    What I has:



    What I want:



    This is what I have coded, please excuse the messiness of it, I am re-working old code :

    In CSS:

    Code:
    table.main {
     	    border-top : 2px solid black ;
                border-left : 2px solid black;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    background: #CCCCCC;
    width: 778px;
    }
    
    table.main2 {
    border-top : 2px solid black ;
    border-left : 2px solid black;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    background: #CCCCCC;
    width: 394px;
    }
    In HTML:

    Code:
    <table class="main" table align="center">
    <tr>
    <td>
    
    <h2>Test Input</h2>
    
    This would be an article written by an author right here. The stuff below will be some kind of tag like thing.
    </table>
    
    
    <table class="main2" table width="33%" align="left">
    <tr>
    <td>
    <h2>Article Tags</h2>
    
    <p>In order to assign tags, you must be registered and logged in. Logs of who submitted the tag are kept to minimise abuse.</p>
    <form action="insert_tag.php" method="post">
    <table width="300">
    <tr>
    <td>Tag #1:</td>
    <td><input type="text" name="tag1"/> </td>
    </tr>
    <tr>
    <td>Tag #2:</td>
    <td><input type="text" name="tag2" /></td>
    </tr>
    <tr>
    <td>Tag #3:</td>
    <td><input type="text" name="tag3"/></td>
    </tr>
    <tr>
    <td>Tag #4:</td>
    <td><input type="text" name="tag4"/><br/>
    </td>
    </tr>
    <tr>
    <td>Tag #5:</td>
    <td><input type="text" name="tag5" /></td>
    </tr>
    
    <tr>
    <td colspan="2"><?PHP
    require_once('recaptchalib.php');
    $publickey = "xxx"; // you got this from the signup page
    echo recaptcha_get_html($publickey);
    ?>
    </td>
    </tr>
    </br>
    <tr>
    <td><input type="Submit" name="Submit" value="Submit" /></td>
    </tr>
    </form>
    </table>
    </table>
    
    <table class="main2" align="right" table width="33%">
    <tr>
    <td>
    <h2>Author Tags</h2>
    
    <p>In order to assign an author tags, you must be registered and logged in. Logs of who submitted the tag are kept to minimise abuse.</p>
    <form action="insert_tag.php" method="post">
    <table width="300">
    <tr>
    <td>Tag #1:</td>
    <td><input type="text" name="tag1"/> </td>
    </tr>
    <tr>
    <td>Tag #2:</td>
    <td><input type="text" name="tag2" /></td>
    </tr>
    <tr>
    <td>Tag #3:</td>
    <td><input type="text" name="tag3"/></td>
    </tr>
    <tr>
    <td>Tag #4:</td>
    <td><input type="text" name="tag4"/><br/>
    </td>
    </tr>
    <tr>
    <td>Tag #5:</td>
    <td><input type="text" name="tag5" /></td>
    </tr>
    
    <tr>
    <td colspan="2"><?PHP
    require_once('recaptchalib.php');
    $publickey = "xxx"; // you got this from the signup page
    echo recaptcha_get_html($publickey);
    ?>
    </td>
    </tr>
    </br>
    <tr>
    <td><input type="Submit" name="Submit" value="Submit" /></td>
    </tr>
    </form>
    </table>
    
    </td>
    </tr>
    </table>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Please post a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    34
    Thanks
    12
    Thanked 0 Times in 0 Posts
    [link removed]
    Last edited by VIPStephan; 04-28-2014 at 12:10 PM. Reason: removed link upon request by OP

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'd recommend you to modify a CSS based layout given at http://www.bonrouge.com/2c-hf-fixed.php for your needs, as using tables for layout is very bad!

    Also, take a look at http://www.alistapart.com/articles/p...cessibleforms/, to see how to make an accessible form without using any tables.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •