• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 428
  • Last Modified:

html side by side tables

I need to have two tables  on same level with approx 10 spaces between them...  each table will contain 2 rows 2 columns
0
gingergin
Asked:
gingergin
  • 3
  • 3
  • 2
  • +5
3 Solutions
 
minichickenCommented:
<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
 
gingerginAuthor Commented:
Thank you very much for your help..    I appreciate it.   I am learning tables and this is a big help.
0
 
minichickenCommented:
No Prob....
Was that what you looking for??
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Adesso21Commented:
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
 
seanpowellCommented:
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
 
Havin_itCommented:
Though if the window is narrowed to less than 600px, the tables will stack vertically. If important to avoid that, use percentage widths.
0
 
seanpowellCommented:
That was just an example - it really has nothing to do with the solution :-)
0
 
COBOLdinosaurCommented:
>>>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
 
cLFlaVACommented:
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
 
COBOLdinosaurCommented:
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
 
Havin_itCommented:
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
 
COBOLdinosaurCommented:
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
 
seanpowellCommented:
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
 
dileedilCommented:
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
  • 2
  • +5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now