Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to create two tables side by side

Posted on 2009-05-15
10
Medium Priority
?
1,935 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
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 3

Assisted Solution

by:Zoooink
Zoooink earned 400 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 400 total points
ID: 24396179
0
Technology Partners: 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 600 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 1000 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 600 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 1000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

971 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