#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    43
    Rep Power
    6

    Question How to style HTML table?


    Hi All,

    I'm adding a 1shoppingcart form to a web page, and my client has asked me to split the form so that it's in two columns. First, here's the 1shoppingcart form code:

    Code:
    <form name="form1" method="post" action="https://www.mcssl.com/app/contactsave.asp">
    <input name="merchantid" type="hidden" id="merchantid" value="274046">
    <input name="ARThankyouURL" type="hidden" id="ARThankyouURL" value="www.mcssl.com/app/thankyou.asp?ID=274046"> <input name="copyarresponse" type="hidden" id="copyarresponse" value="1">
    <input name="defaultar" type="hidden" id="defaultar" value="801726">
    <input name="allowmulti" type="hidden" id="allowmulti" value="0"> <input name="visiblefields" type="hidden" id="visiblefields" value="Name,Email1,Company,Workphone,Address1,City,State,Zip,Country">
    <input name="requiredfields" type="hidden" id="requiredfields" value="Name,Email1,Workphone,Address1,City,State,Zip,Country">
    <table>
    <tr>
    <td>Name</td>
    <td><input name="Name" type="text" size="40"></td></tr>
    <tr>
    <td>Email</td>
    <td><input name="Email1" type="text" size="40"></td>
    </tr>
    <tr>
    <td>Company</td>
    <td><input name="Company" type="text" size="40"></td>
    </tr>
    <tr>
    <td>Phone</td>
    <td><input name="Workphone" type="text" size="40"></td>
    </tr>
    <tr>
    <td>Address1</td>
    <td><input name="Address1" type="text" size="40"></td>
    </tr>
    <tr>
    <td>City</td>
    <td><input name="City" type="text" size="40"></td>
    </tr>
    <tr>
    <td>State</td>
    <td><input name="State" type="text" size="40"></td> 
    </tr>
    <tr>
    <td>Zip</td>
    <td><input name="Zip" type="text" size="40"></td>
    </tr>
    <tr>
    <td>Country</td>
    <td><input name="Country" type="text" size="40"></td>
    </tr>
    <tr>
    <td>What notebooks do you currently use?</td>
    <td><input type="hidden" name="current.label" value="What notebooks do you currently use?">
    <input type="hidden" name="current.required" value="">
    <textarea id="current" name="current" rows="4" cols="50">
    </textarea>
    </td>
    </tr>
    <tr>
    <td>What notebook features would you like to have that aren't currently available?</td>
    <td><input type="hidden" name="features.label" value="What notebook features would you like to have that aren't currently available?">
    <input type="hidden" name="features.required" value="">
    <textarea id="features" name="features" rows="4" cols="50">
    </textarea>
    </td>
    </tr>
    <tr align="center">
    <td colspan="2">
    <input type="Submit" name="cmdSubmit" value="Submit">
    </td>
    </tr>
    </table>
    </form>
    He's asked me to place everything from "What notebooks do you currently use?" and down in a column to the right of the previous content.

    Is there a simple way to do this with tables? Or would it be simpler to convert the layout to CSS?

    Thanks in advance for any suggestions, and I'll be happy to provide more info if need be.

    Sam
  2. #2
  3. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    108
    Rep Power
    4
    Split the table in two and put the tables inside another table with two columns of one row each.
    Place the left part in the first column and the right part in the second column.

    Comments on this post

    • Sphere_Nine agrees
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    43
    Rep Power
    6

    Thumbs up


    Originally Posted by richpri
    Split the table in two and put the tables inside another table with two columns of one row each.
    Place the left part in the first column and the right part in the second column.
    That did the trick. Thanks!
  6. #4
  7. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,136
    Rep Power
    1990
    Probably a silly question now, but...

    Why not give the table 4 columns? That would make more sense (and less code) then breaking the table into two and then wrapping both of those in another table. As far as styling goes you can apply CSS classes to the cells, rows and table itself to display it how you want it to.
  8. #5
  9. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Location
    Tustin, ca
    Posts
    39
    Rep Power
    0
    Yes, you have to use nested table format to split within it.

    Best example you can have on w3schools.com
  10. #6
  11. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,908
    Rep Power
    6352
    do not use or link to w3schools. They are not a good resource and their teachings are often wrong.

    Also, since this thread is already answered, I'm closing it.
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.

IMN logo majestic logo threadwatch logo seochat tools logo