How to create two tables side by side

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
LVL 10
aman0711Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
joesoefConnect With a Mentor Commented:
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
 
ZoooinkConnect With a Mentor Commented:
div tags would be a better choice
0
 
aman0711Author Commented:
so put two tables inside one div? how do I specify position and gap in between
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
alien109Connect With a Mentor Commented:
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
 
aman0711Author Commented:
@ 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
 
alien109Connect With a Mentor Commented:
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
 
aman0711Author Commented:
O ok. Got it :)
Thanks :)
0
 
joesoefConnect With a Mentor Commented:
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
 
aman0711Author Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.