Solved

How to create two tables side by side

Posted on 2009-05-15
10
1,728 Views
Last Modified: 2012-05-07
Hi Experts,
                   I am trying to display two tables on my jsp pages. Tables will show the data from backend tables. I want these tables to be aligned side by side with a small space between them.
 
                  One way I know of is two put both the tables inside another table. But I have heard that tables designs are no more a good choice, CSS is what ruling this entity.

                 I have attached expected table structure.
Tab.PNG
0
Comment
Question by:aman0711
[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
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 3

Assisted Solution

by:Zoooink
Zoooink earned 100 total points
ID: 24396118
div tags would be a better choice
0
 
LVL 10

Author Comment

by:aman0711
ID: 24396136
so put two tables inside one div? how do I specify position and gap in between
0
 
LVL 3

Assisted Solution

by:Zoooink
Zoooink earned 100 total points
ID: 24396179
0
Independent Software Vendors: 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!

 
LVL 12

Assisted Solution

by:alien109
alien109 earned 150 total points
ID: 24396522
You can float the tables, and achieve this. Look at the example code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<title></title>
 
<style type="text/css">
table {
	border-collapse:collapse;
	float:left;
	margin-right:10px;
}
 
td {
	border:1px solid #000;
	padding:4px;
}
</style>
 
</head>
 
<body>
 
<table>
	<tbody>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
			<td>2</td>
			<td>2</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>3</td>
			<td>3</td>
			<td>3</td>
		</tr>
	</tbody>
</table>
 
<table>
	<tbody>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
			<td>2</td>
			<td>2</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>3</td>
			<td>3</td>
			<td>3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
			<td>2</td>
			<td>2</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>3</td>
			<td>3</td>
			<td>3</td>
		</tr>
 
	</tbody>
</table>
<div style="clear:both;" />
 
</body>
</html>

Open in new window

0
 
LVL 2

Accepted Solution

by:
joesoef earned 250 total points
ID: 24397198
Hi,

You need to consider two things: browser compatibility and is the cells would be 'liquid' instead of fixed.

If you need most browser is compatible and your table is liquid then I suggest that you use table tags (<TABLE>, <TR>, and <TD>) combined with CSS classes. It is known that IE6 does not render correctly tableless html pages. And if you can not define height and width of the cells (that means you want to create 'liquid' tables), then you have to create javascript if you want to employ tableless html. Because it is hard to create the side by side columns to have the same height dynamically. This for your reference: http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

If you can make the cells' height and weight fixed, maybe you could pay a visit to Adobe Dreamweaver articles: http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1_11.html.

In my opinion, I think you'd better use the old school way: Table with TR and TD tags. Maybe you just only need to create one table. The small space between can be created by a hidden TD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#main {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#main #hide {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#main #show {
	border: 1px solid #FF0000;
}
-->
</style>
</head>
 
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0" id="main">
  <tr>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td rowspan="5" id="hide">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
  </tr>
  <tr>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>    
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
  </tr>
  <tr>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>    
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
    <td id="show">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 10

Author Comment

by:aman0711
ID: 24397240
@ alien109,
                   thanks for the code. it looks good :)
                   I am very new to this, What exactly you meant by float?
 
@ joesoef,
                  Thanks for a descriptive answer. I didnt get the term liquid?
 
                  Please bear with my knowledge guys.
 
 
0
 
LVL 12

Assisted Solution

by:alien109
alien109 earned 150 total points
ID: 24397305
float in simple way means that there is no forced line break at the end of the element. Block level tags will always display on a separate line. But you can tell the element to allow other elements to "float" to the left or right by using CSS.

So by setting the float attribute you allow the second table to site next to the first, rather than below.

The spacing between the tables can be altered by adjusting the right margin.
0
 
LVL 10

Author Comment

by:aman0711
ID: 24397320
O ok. Got it :)
Thanks :)
0
 
LVL 2

Assisted Solution

by:joesoef
joesoef earned 250 total points
ID: 24397449
Liquid means that the tables (or the cells, actually) can be short or tall, narrow or wide, adapting the length of content inside them. The table will be expanded or contracted instead of stay fixed.

I took another look at your samples, it seems you can make fixed width cells. Length of your data is predictable enough. All can be displayed in one line with maximum of 3-4 chars, right?

Btw, I suggest you read Adobe Dreamweaver articles. Those are a good start to understand both table based and tableless html. Only if your deadline is still manageable :-)
0
 
LVL 10

Author Comment

by:aman0711
ID: 24397489
Hey joesoef,
                     Deadline can be managed, weekend is heading our way :-)
                     you already described another important thing, i.e. my tables can go fixed.
                     I have display another table right below this one. so the column seperators and all should match exactly.
 
0

Featured Post

Independent Software Vendors: 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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

691 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