SitePoint.com

njrocket · Oct 14, 2006, 20:18

Hi guys, i want to set up vertical tables that are next to each other. I want to be able to do this basically.

I want to be able to have another set of tables that different, underneath theses. So lets say 3 tables on top, and 3 underneath them. How can i code this?

Tyssen · Oct 14, 2006, 20:21

You'll need to float the tables left and give them a width. Work out the widths and margins so that you get the number of tables you want on each line.

njrocket · Oct 14, 2006, 20:39

Quote:

Originally Posted by Tyssen

You'll need to float the tables left and give them a width. Work out the widths and margins so that you get the number of tables you want on each line.

Can somebody give me a sample script, so i can just fool around with the widths and color later on? I need a basic layout first.

Tyssen · Oct 14, 2006, 20:48

Code:

 .verticalTable { float: left; margin-right: 1em; }
 #table1 { width: 100px; }
 #table2 { width: 120px; }
 #table3 { width: 130px; }
 #table4 { width: 105px; }
 
 <table id="table1" class="verticalTable"></table>
 <table id="table2" class="verticalTable"></table>
 <table id="table3" class="verticalTable"></table>
 <table id="table4" class="verticalTable"></table>

Or if you wanted some tables to have the same width, make the IDs classes instead, e.g:

Code:

  .verticalTable { float: left; margin-right: 1em; }
 .table1 { width: 100px; }
  .table2 { width: 120px; }
 
  <table class="verticalTable table1"></table>
  <table class="verticalTable table2"></table>
  <table class="verticalTable table1"></table>
  <table class="verticalTable table2"></table>

njrocket · Oct 15, 2006, 10:18

its not working how i want it to be. The way you have it set up, its table on top of each other. I want 3 seperate vertical tables going across. Than another set of 3 tables underneath them.
Example of how i want it set up.

Paul O'B · Oct 15, 2006, 15:07

Hi,

Tyssens code will do that if you copy it correctly

Heres a more advanced example but you will need to fix the width of the container if you don't want the tables to wrap when the screen is resized.

Code:

 <!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">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
 <style type="text/css">
 * {margin:0;padding:0}
 ul.vertical-table{list-style:none;}
 ul.vertical-table li{clear:both;padding:1em 0;border-bottom:1px solid red}
 .vertical-table table{ 
 	float: left; 
 	margin:0 1em;
 	background:#ffcccc;
 	border:1px solid #000;
 	dislay:inline;/* ie dbl margin bug*/
 }
  .table1 { width: 100px; }
  .table2 { width: 120px; }
  .table3 { width: 130px; }
 	
 	/* clear floats without structural mark-up - do not alter */
 	.clearfix:after {
 	content:"."; 
 	display:block; 
 	height:0; 
 	clear:both; 
 	visibility:hidden;
 }
 .clearfix {
 	display:inline-block;
 }
 
  /* mac hide \*/
 	* html .clearfix {height: 1%;}
 	  .clearfix {display: block;}
  /* End hide */
 
 
 </style>
 </head>
 <body>
 <ul class="vertical-table">
 	<li class="clearfix">
 		<table class="table1">
 			<tr>
 				<td>Table1</td>
 			</tr>
 		</table>
 		<table class="table2">
 			<tr>
 				<td>Table2</td>
 			</tr>
 		</table>
 		<table class="table3">
 			<tr>
 				<td>Table3</td>
 			</tr>
 		</table>
 	</li>
 	<li class="clearfix">
 		<table class="table1">
 			<tr>
 				<td>Table1</td>
 			</tr>
 		</table>
 		<table class="table2">
 			<tr>
 				<td>Table2</td>
 			</tr>
 		</table>
 		<table class="table3">
 			<tr>
 				<td>Table3</td>
 			</tr>
 		</table>
 	</li>
 </ul>
 </body>
 </html>

Hope it helps.

njrocket · Oct 15, 2006, 15:38

alright thanks for the help, im going to try the code and see if it works out for me this time. How am i doing the code wrong from the top. I copied and pasted the first half into css, and the other half into my html coding, and its forming one table. Are you sure that code is fully correct? Any idea what im doing, because id rather have a simple script for it, and then just modify it as i go along. I'l fool around with the widths, but id rather set it up first, thanks

Tyssen · Oct 15, 2006, 15:59

Quote:

Originally Posted by njrocket

Any idea what im doing

Not without you showing us your actual code or a link to the page.

Oct 14, 2006, 20:18	#1
njrocket SitePoint Enthusiast Join Date: Aug 2006 Posts: 74	setting up tables Hi guys, i want to set up vertical tables that are next to each other. I want to be able to do this basically. I want to be able to have another set of tables that different, underneath theses. So lets say 3 tables on top, and 3 underneath them. How can i code this?

Oct 15, 2006, 10:18	#5
njrocket SitePoint Enthusiast Join Date: Aug 2006 Posts: 74	its not working how i want it to be. The way you have it set up, its table on top of each other. I want 3 seperate vertical tables going across. Than another set of 3 tables underneath them. Example of how i want it set up. Last edited by njrocket; Oct 15, 2006 at 12:33.

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Oct 14, 2006, 20:21	#2
Tyssen SitePoint Wizard Join Date: Oct 2005 Location: Brisbane, QLD Posts: 4,024	You'll need to float the tables left and give them a width. Work out the widths and margins so that you get the number of tables you want on each line.

Oct 15, 2006, 15:38	#7
njrocket SitePoint Enthusiast Join Date: Aug 2006 Posts: 74	alright thanks for the help, im going to try the code and see if it works out for me this time. How am i doing the code wrong from the top. I copied and pasted the first half into css, and the other half into my html coding, and its forming one table. Are you sure that code is fully correct? Any idea what im doing, because id rather have a simple script for it, and then just modify it as i go along. I'l fool around with the widths, but id rather set it up first, thanks