Solved

html side by side tables

Posted on 2004-10-25
373 Views
Last Modified: 2010-04-09
I need to have two tables  on same level with approx 10 spaces between them...  each table will contain 2 rows 2 columns
0
Question by:gingergin
    14 Comments
     
    LVL 12

    Accepted Solution

    by:
    <table width="100%"  border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td width="50%"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table></td>
        <td width="50%"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table></td>
      </tr>
    </table>
    0
     

    Author Comment

    by:gingergin
    Thank you very much for your help..    I appreciate it.   I am learning tables and this is a big help.
    0
     
    LVL 12

    Expert Comment

    by:minichicken
    No Prob....
    Was that what you looking for??
    0
     
    LVL 2

    Expert Comment

    by:Adesso21
    What minichicken gave you will work but...

    Nested tables as we call them is not the best way of learing tables.. Than means a table that contains a table. This should be avoided as best possible and only be used as a last resort..

    What would be a better solution :

    <table width="45%" border="1" cellpadding="2" cellspacing="2" align="left">
    <tr>
          <td>1</td>
          <td>2</td>
    </tr>
    <tr>
          <td>5</td>
          <td>6</td>
    </tr>
    </table>
    <table width="45%" border="1" cellpadding="2" cellspacing="2" align="right">
    <tr>
          <td>3</td>
          <td>4</td>
    </tr>
    <tr>
          <td>7</td>
          <td>8</td>
    </tr>
    </table>

    If you want to make the tables more exact then you might want to look at CSS and wrapping them in DIV tags or something..
    but to answer your question the above code should do the trick..

    Good Luck
    Adesso21
    0
     
    LVL 31

    Assisted Solution

    by:seanpowell
    I agree - I would not use nested tables.

    Also, align="right" and align="left" have been deprecated from the specification, CSS is really the most standards compliant method for handling the float, and you only specify it in one table:

    <table style="width:300px;">
      <tr>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </table>

    <table style="width:300px; margin-left:10px; float:right;">
      <tr>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </table>

    THanks,
    Sean
    0
     
    LVL 10

    Expert Comment

    by:Havin_it
    Though if the window is narrowed to less than 600px, the tables will stack vertically. If important to avoid that, use percentage widths.
    0
     
    LVL 31

    Expert Comment

    by:seanpowell
    That was just an example - it really has nothing to do with the solution :-)
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    >>>I am learning tables.

    If you are using these tables manage layout then you have made your first HUGE mistake.  That is not what they are for.  If you are using them for data presentation, there should never be a need to nest them, and nesting is the worst possible direction to start out in.

    If you are just learning tables.  I suggest you spend some time learning CSS for layout, so you don't end up producing web page that look like some of the monstrosities that are a legacy of the 20th century absence of good CSS support.

    Cd&
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    Cd&

    For the amount of times you tell people this, may I suggest storing a canned response in, say, a text document?  Copy & paste will save you some time.

    :)
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    Each user is an individual.  Finding the right words for each of them, lets me connect with them and REALLY help often enough, that the extra effort is worth it.  Besides I need the typing practice. :^)

    Cd&
    0
     
    LVL 10

    Expert Comment

    by:Havin_it
    Hear hear. Nothing wrong with trying to be an arbiter of good practice, especially with the young and impressionable (no offense intended to gingergin).

    Though, just for the sake of being pedantic, gingergin hasn't specified what will be in his tables so let's not jump to the conclusion that it's just a layout mash.

    PS, Cd&: I know this flies in the face of the teachings of Sir Tim, but nesting can be indispensable in dynamic data presentation (such as the intranet accounting app I'm currently bodging...). sometimes rows need to sub-divide, and I would, for example, need to replicate a recordset infinite times if I didn't use nesting.
    0
     
    LVL 53

    Assisted Solution

    by:COBOLdinosaur
    That is what fieldsets are for.  However if you are working with accounting data, it is probably the kind of tabular data that tables are designed for. Most of what I work with is financial and statistical Intranet apps.  That uses a lot of datagrids; also large numbers of fieldsets, and when nesting is necessary the fieldsets are a better choice because they are easier to maintain and far more dynamic than cells in a complex table structure.

    A small bit of fieldset usage here:

    http://cd-articles.fateback.com/Formsin4.html

    Cd&
    0
     
    LVL 31

    Expert Comment

    by:seanpowell
    This was posted as a member comment. I'm posting it here gingergin so others can read it.

    two side by side tables....     each table will contain two rows and two columns.    One table will sit to the left of the center and one table will sit to the right of the table.  I need approx one inch of space between the two tables.   Each table will contain two photographs and data pertaining to the person.     Using nesting I cannot get the tables to appear totally separated and untouching on the page.   This was my goal and I regret I was not clear enough on my original request.  Thank you for the additional help.


    gingerin - please post the code that you have now, then we can stop guessing and give you some specific options.

    Thanks,
    Sean
    0
     

    Expert Comment

    by:dileedil
    This is the simple way

    <table width="100%"  border="0" cellspacing="10" cellpadding="0">
           
             <tr>
                        <td width="50%" >
                                    <table width="100%"  border="0" cellspacing="3" cellpadding="0">
                                                     <tr>
                                                                   <td>
                                                                             Left - Top
                                                                   </td>
                                                      </tr>
                                                      <tr>
                                                                   <td>
                                                                              Left - Bottom
                                                                   </td>
                                                      </tr>
                                     <table>
                         </td>
                         <td width="50%" >
                                    <table width="100%"  border="0" cellspacing="3" cellpadding="0">
                                                     <tr>
                                                                   <td>
                                                                              Right - Top
                                                                   </td>
                                                      </tr>
                                                      <tr>
                                                                   <td>
                                                                              Right - Bottom
                                                                   </td>
                                                      </tr>
                                     <table>
                         </td>
             <tr>

    </table>
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    The Complete Ruby on Rails Developer Course

    Ruby on Rails is one of the most popular web development frameworks, and a useful tool used by both startups and more established companies to build strong graphic user interfaces, and responsive websites and apps.

    Suggested Solutions

    Introduction One of the frequent application design questions goes something like this: "How can I confirm when a client registers on my web site?" The registration might be for general use of a self-administered site like a forum, or for attend…
    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    884 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now