Html table

I want to have two table in the center of the page as shown below.

my issue is how do I place tables in such location ? Can you please post a sample HTML code.

It’s quite easy to do, but depends a bit on the nature of the page. Is it fixed width?

One option is to float the tables, or perhaps try display: inline-block. (Not sure how that affects tables, but may test it later.)

It would be helpful if you first posted the code you have so far.

no… floating a table is not solution… …I have Left menu , header and footer and content page…table will in the content page.

display: inline-block also not a solution … because this can not put tables in the central location.

my requirement is two tables will be at the center next to each other with a gap in between as shown in the attached image in the first post.

It goes without saying that you should wrap those tables in a container that is placed where you want. Then float or display: inline-block the tables within that container. :slight_smile:

I can come up with this …using float…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS table TESTS</title>

</head>

<body>
<center>
<h2>This is a table float test</h2>
</center>

<table style="float: left;" border=2>
<tr><td> table 1</td></tr>
</table>
<table style="float: right;" border=2>
<tr><td> table 2</td></tr>
</table>


</body>
</html> 



But this is not the desired output …I want these two tables to be near centered and a gap between them…

Please don’t bump threads as that is against the rules.

Are you looking for something like this (much as Ralph suggested).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS table TESTS</title>
<style type="text/css">
.outer {
	text-align:center;
	width:100%;
}
.table-wrap,.table-wrap table {
	display:inline-block;
	border:1px solid red;
	vertical-align:top;
 *display:inline;/* ie6 and 7 hack */
	zoom:1.0;	/* ie6 and 7 hack */
}
.table-wrap table {
	margin:40px;
	border:1px solid #000;
	display:inline-table;
}
</style>
</head>

<body>
<div class="outer">
		<div class="table-wrap">
				<table>
						<tr>
								<td> table 1</td>
						</tr>
				</table>
				<table>
						<tr>
								<td> table 2</td>
						</tr>
				</table>
		</div>
</div>
</body>
</html>

>>>Are you looking for something like this (much as Ralph suggested).

No.

I want two HTML tables side by side, centered on the page.(little gap in between)

Then you must mean Yes, as that’s what Paul’s code does. :slight_smile:

As Ralph said my code is doing what you asked for in your drawing so you will have to explain a little more as to where you see it differing from what you want? You can adjust the margins to suit to get the tables closer if you want but the code I gave produces two tables centred in the middle of the screen as requested.

why your tables are so small ? also there is no tr , td borders coming … I just want 3 tables centered and side by side

This what I want …

Is it possible ?

?? because there’s nothing in them!

also there is no tr , td borders coming

Just add them ( td,th{border:1px solid red})


 ...... I just want 3 tables centered and side by side 

So now its three tables!

I’m afraid you’re are going to have to work a bit harder than this :slight_smile:

My code still accommodates all the above.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS table TESTS</title>
<style type="text/css">
.outer {
	text-align:center;
	width:100%;
}
.table-wrap, .table-wrap table {
	display:inline-block;
	vertical-align:top;
 *display:inline;/* ie6 and 7 hack */
	zoom:1.0;	/* ie6 and 7 hack */
}
.table-wrap table {
	margin:40px;
	border:1px solid #000;
	display:inline-table;
}
.table-wrap table td{border:1px solid red}
</style>
</head>

<body>
<div class="outer">
		<div class="table-wrap">
				<table>
						<tr>
								<td> table 1</td>
								<td> table 1</td>
								<td> table 1</td>
						</tr>
						<tr>
								<td> table 1</td>
								<td> table 1</td>
								<td> table 1</td>
						</tr>
				</table>
				<table>
						<tr>
								<td> table 2</td>
								<td> table 2</td>
								<td> table 2</td>
						</tr>
						<tr>
								<td> table 2</td>
								<td> table 2</td>
								<td> table 2</td>
						</tr>
				</table>
				<table>
						<tr>
								<td> table 3</td>
								<td> table 3</td>
								<td> table 3</td>
						</tr>
						<tr>
								<td> table 3</td>
								<td> table 3</td>
								<td> table 3</td>
						</tr>
				</table>
		</div>
</div>
</body>
</html>

Please, test the above and experiment and see if you can work out how this works before asking more questions. If you are still stuck then you may ask further questions but we do like to see you trying for yourself first.

If you dont need the red outline, you can get rid of the div.outer in the HTML, and use this CSS


.table-wrap {
	width:100%;
	text-align: center;
	background: #ccc
}
.table-wrap table {
	border:1px solid #000;
 	display:inline-table;
	vertical-align:top;
 	*display:inline;/* ie6 and 7 hack */
     zoom:1.0;	/* ie6 and 7 hack */
}
.table-wrap table +table{margin-left: 40px} /*optional spacing method*/
.table-wrap table td{border:1px solid red}

BTW if you are trying to center the tables FLUIDLY and VERTICALLY on the page… well that’s another kettle of kippers.

Your code looks ok now. I could not understand these things in your code. …can you please explain what are these things (in the screenshot)?

As the code comments indicate (in green) they are hacks to make the code work in outdated browsers (IE6 and 7). They don’t really matter these days, but Paul put it there in case you cared.

The zoom property is basically meaningless, but has been found to help those dud browsers render the page as desired, and the * in this context is invalid CSS but is still recognized by those browsers. So other browsers will ignore it, but those versions of IE will recognize the rule, which is the point of the hack.

Ralph explained the details above well but I will further clarify the method as well.

IE7 and under do not understand display:inline-block when used on block elements. However they do understand inline-block on inline elements so the secret is to turn the element into an inline element and then apply inline-block. As the rules are mutually exclusive in the same rule you can’t actually do that by any normal means. In fact it turns out that IE7 probably doesn’t understand inline-block at all but is reverting to an IE5 behaviour where inline elements behaved like inline-block elements by default and the trigger for this is “haslayout”.

Any inline element in haslayout mode behaves as inline-block. Read my [URL=“http://reference.sitepoint.com/css/display”]comments #5 in the Sitepoint Reference. The haslayout trigger must be one that causes haslayout to be true for inline elements so height or width is no good and you need to use zoom or rather perversely inline-block as both are triggers for haslayout for inline elements and block elements.

Zoom is proprietary IE code (although webkit supports it as well) and will indeed zoom the layout in IE (if you said zoom:2.0. the layout would be double the size). However if you say zoom:1.0 then that means no change at all and applies haslayout without any after effects and is the best trigger to use although it is invalid.

The “*” before the display:inline rule is a hack to filter out all browsers except ie7 and under as they stupidly still parse the rule. It is another invalid hack but useful in this circumstance to avoid an extra rule block but I would not use it anywhere else as its an ugly hack. It would be better to use a valid hack such as * html for ie6 and *+html for ie7 which will validate but are more verbose and must be coded separately.

why you have used display:inline-block; ?

we already have display:inline-table …why both display:inline-block; and display:inline-table are required ?

The inline-block isn’t really needed and I just left it there to cater for browsers that don’t understand inline-table. See Rays shortened code in post #12 for an example.