Solved

How to create two tables side by side

Posted on 2009-05-15
10
1,691 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 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
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 37
Change of column alignment in div 2 18
ASP server side get value 15 24
Html Table looping 4 13
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

831 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