[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

html side by side tables

Posted on 2004-10-25
16
Medium Priority
?
423 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
Comment
Question by:gingergin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +5
16 Comments
 
LVL 12

Accepted Solution

by:
minichicken earned 272 total points
ID: 12408146
<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
ID: 12408158
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
ID: 12408187
No Prob....
Was that what you looking for??
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 2

Expert Comment

by:Adesso21
ID: 12408304
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
seanpowell earned 264 total points
ID: 12409545
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
ID: 12409698
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
ID: 12410168
That was just an example - it really has nothing to do with the solution :-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12410405
>>>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
ID: 12410871
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
ID: 12411564
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
ID: 12413233
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
COBOLdinosaur earned 264 total points
ID: 12413597
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
ID: 12420309
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
ID: 12425225
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

650 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