Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

i need to display two html tables vertically next to each other 1

Status
Not open for further replies.
amir4oracle

amir4oracle

Programmer
Nov 3, 2004
46
CA
i need to display two html tables vertically like this:

---------------
| table 1 |
---------------
---------------
| table 2 |
---------------

but in the browser they are showing horizontally like this:

-------------- --------------
| table 1 | | table 2 |
-------------- --------------

i have tried everything giving <br /> etc. What can I do to dispaly them vertically not horizontally next to each other?

Thanks in advance.
Best regards,
Amir Khan


 
Sort by date Sort by votes
This works for me in IE & FF:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
	<head>
		<title>Topped Tables</title>
		<style type="text/css">
			table {
				clear: left;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>one</td>
				<td>two</td>
			</tr>
			<tr>
				<td>one</td>
				<td>two</td>
			</tr>
			<tr>
				<td>one</td>
				<td>two</td>
			</tr>
		</table>
		<table>
			<tr>
				<td>one</td>
				<td>two</td>
			</tr>
			<tr>
				<td>one</td>
				<td>two</td>
			</tr>
			<tr>
				<td>one</td>
				<td>two</td>
			</tr>
		</table>
	</body>
</html>

X
 
Upvote 0 Downvote
By default, two tables will always be rendered one below the other. So, what's happening with your code is caused by some arbitrary code that you put in, most likely [tt]align="left/right", which floats the table. Clearing them, as seen in the example above, is not necessary if they are regular unstyled tables.
 
Upvote 0 Downvote
The easiest thing to do would be to nest your two tables within another table.

Code: 
<table>
   <tr>
      <td>
         <table>
            ...
         </table>
      </td>
      <td>
         <table>
            ...
         </table>
      <td>
   </tr>
</table>
 
Upvote 0 Downvote
Is everyone's solution (Cory, you're cordially excluded from this rant) these days overengineering? The only thing one needs to know is that the tables are a subset of a block-level element and that they stack up one beneath the other by default. No clearing, no stuffing in more tables, just one table and then another. What happened to people just writing simple unstyled semantic html and later styling it to their heart's content (in this case they would see how tables work) -- did I just dream that?

But, if it is overengineering you're after, here's my solution. Create a frameset with two frames, one on top of each other. Create a table that will be like a body in each frame. Put a div inside a table. Put your table inside that div. Give the table align="left" because it looks nice there. Style everything, making sure you include all kinds of arbitrary css that is applied by default to tables. Create an onmouseover event that fires an ajax script which fetches date and time from the server and compare that date-time with the local time of the browser. If the time is the same, have half of the css change (without any visual change) and if it is not, leave the css alone.

How's that?

 
Upvote 0 Downvote
Vragabond said:
But, if it is overengineering you're after, here's my solution. Create a frameset with two frames, one on top of each other. Create a table that will be like a body in each frame. Put a div inside a table. Put your table inside that div. Give the table align="left" because it looks nice there. Style everything, making sure you include all kinds of arbitrary css that is applied by default to tables. Create an onmouseover event that fires an ajax script which fetches date and time from the server and compare that date-time with the local time of the browser. If the time is the same, have half of the css change (without any visual change) and if it is not, leave the css alone.

How's that?
Click to expand...

You want to show us an example of that? [noevil]

Wullie

Fresh Look - Quality Coldfusion 7/Windows Hosting
YetiHost - Coming Soon

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
 
Upvote 0 Downvote
I am going to join in this topic, simply because its something that i have had to overcome myself over the last few months. When mi first started web design around 45 years ago I used tables. It was the way I was shown to do everything and if I asked how to use more than one table next to each other the simple answer was to nest tables (this is simply using one table with two columns for example and then placing tables inside the first tables columns). Now lets get something straight… as mentioned above this is the new cancer, there is no other way to put it to be honest. Nobody should be using tables for layout just like nobody should be using frames.

There is one solution to this issues and your going to have to like it. DIV’s and CSS… if you don’t know what I am on about then you need to go and do some reading. Tables were ever only meant for use with tubular data, a results set for example from a database. Don’t get me wrong tables are very useful and they can also be used to help layout a form and possible a few other things.

If you think about this specific issue with XHTML in mind then you could quite easily use two div’s and have a table inside each div and then just use css to position them where and how you want them to be displayed.

You will find that there are a lot of advantages to use XHTML from this point on… search engine optimisation and accessibility being the main reasons everyone should be switching from use tables.

Forgive me as I have just gone on a rant (well tried to make it more educational than a rant) and I may have over stepped the mark as the original question could well have been regarding a XHTML page already using DIV’s with tables for some basic info. However I do think that this is an easily solved problem not using frames, nested tables or any other cunning styling.


------------------------
 
Upvote 0 Downvote
Please don't take this amiss, and it's OK to have a go, but the phrase about 'cast out the beam in thine own eye before you deal with the mote in others' springs to mind. You make quite an issue about validation and XHTML, then link to your own site.

I thought I would have a look to see how a site should be done BUT although every page CLAIMS to XHTML valid, in fact 5 of the 7 pages currently produce validation errors, including your CV which shows 19. [smile]

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
Hi and thanks for your comments. First of all I am not making excuses but I have just updated my website with some stuff and have not had time to validate it yet. I would also like to add that the W3C validation and all that is just a guideline and if you think its right then some things that might not validate might actually be ok. Not that I am saying the current errors on my site are.

As most of you will know (professionals) personal things do get second priority than things that you work on at work on a professional basis for clients and so most of my time is spent on those projects rather than my own.

Anyway, I tried to highlight that I was not trying to come across as having a go. I was trying to pass on some thoughts/knowledge and educate (if possible) and also get some people thinking and maybe responding with some of their personal thoughts too.

I have not joined this forum community to post and then get post back directly criticising or pointing out weaknesses like that.

Anyway, thanks for your reply and please check back to my site soon when I will ‘hopefully’ have the time to make sure its all valid code. Oh and my posts have a link to my site in the signature so I did not post a link to my on purpose.


------------------------
 
Upvote 0 Downvote
I hope I am not opening a can of worms but I have to say I find tables to be the most reliable method of laying out a screen. I use CSS for formatting within the cells and tend to use DIVS only at the start of the page for menus etc.
I produce most of my HTML dynamically from within PERL scripts and find tables to be the easiest way to keep track of all the bits and pieces.
Relative positioning in a dynamicly created page has proved to be a real nightmare, unless of course I am missing something. I am not against table less design but prefer to use what I consider to be the most applicable tool for a given job.

Keith
 
Upvote 0 Downvote
It's interesting how many people compare table based layouts to some convoluted css positioned designs, relying heavily on absolute and/or relative positioning. Most of the time people are overengineering things and fail to notice that things can just be let to run their course. Why are two tables next to each other, nested in another table easier to create, easier to keep track or more reliable than two divs floating next to each other? If for one, you should think of the amount of code:
Code: 
<table>
 <tr>
  <td>
   <table>
    <tr>
     <td>One</td>
    </tr>
   </table>
  </td>
  <td>
   <table>
    <tr>
     <td>Two</td>
    </tr>
   </table>
  </td>
 </tr>
</table>
vs.
Code: 
<div style="float: left;">One</div>
<div style="float: left;">Two</div>
If nothing else, how is the first code easier to track?
 
Upvote 0 Downvote
Vragabond
I quite agree that the amount of code is significantly less using CSS but I use functions which create table elements and find these to be simple to code. As most of my pages are created within program loops the writing of the actual HTML code is never done. I simply call the element I require and send the necessary content to the function.
I have experimented with CSS positioning but keep losing the flow of the layout. I know I am doing something wrong but at least with tables I get what I expect.

Out of interest if I put 3 divs across a page, how do I ensure that all the divs keep their position on the one line when a visitor opens up their screen in a smaller window.
Also how would I force a 4th. DIV to start on a new line.



Keith
 
Upvote 0 Downvote
Vragabond said:
If for one, you should think of the amount of code:
Click to expand...

Just to play Devil's advocate, I'd say that is not really a fair comparision. [wink]

If you removed the formatting from what you posted, the difference in code is minimal. Yes it makes it harder to read, but the amount of code just looks so much more because of the formatting you used.

Code: 
<div style="float: left;">One</div>
<div style="float: left;">Two</div>

Code: 
<table><tr><td><table><tr><td>One</td></tr></table></td>
<td><table><tr><td>Two</td></tr></table></td></tr></table>

Hope this helps

Wullie

Fresh Look - Quality Coldfusion 7/Windows Hosting
YetiHost - Coming Soon

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
 
Upvote 0 Downvote
Wullie,

why remove the formatting from one example, but not both?

assuming you have an external stylesheet for Vrag's suggestion:

Code: 
<div>One</div>
<div>Two</div>



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
why remove the formatting from one example, but not both?
Click to expand...

I only removed excess whitespace and that does not change the layout of the output in any way, removing the CSS does.

assuming you have an external stylesheet for Vrag's suggestion:
Click to expand...

You still have the same code whether it is in this file or another.

Hope this helps

Wullie

Fresh Look - Quality Coldfusion 7/Windows Hosting
YetiHost - Coming Soon

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
689
Chris Miller
Chris Miller
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
349
bdwilcox
bdwilcox
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
363
PeDa
PeDa
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
338
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top