Help with a Tableless Table

slmcdee · #1 03-08-2007, 12:14 PM

Here is my dilemma, I'm trying to creates a Tableless Table.... but I can not manage to get all the cells(<p>) to be the same height, without hard coding it. I would like for them to be the same height of the largest cell(class="td c05"). The largest cell expands the height of containing div (id="tr"). I tried several methods, but to no avail. Hoping I could get a little assistance. Thanks in advance.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
	#faketable { font-family:Tahoma, Arial; font-size:0.7em; padding:5px; background-color:#FFF; width:auto; margin-bottom:25px;}
	#table { width:auto;}
	#th { color:#fff; font-weight:bold;}
	p {}
	html>body p { margin:0px;}
	
	#table .td, #th .td1 { float: left; padding:0px; margin:0px; border:1px solid #BEBEBE;}
	#table .td { padding:0; display:block; height:auto;}
	#tr { min-height:30px; height:auto !important; height:30px; width:auto; border:0px solid #C00;}
	/*#table .td p { margin:0 auto; vertical-align:middle; height:80%; border:0px solid #C00;}
	#heighttest { border:1px solid #0F0; margin:0; height:50px;}*/
	#th .td1 { height:40px; vertical-align:bottom; background-color:#7291B6; text-align:center;}
	#table input { border:1px solid #C0C0C0; font:normal 9px Verdana, Arial, Helvetica; margin:0px;}

	.c01 { width:22px; text-align:center;} /* Alerts */
	.c02 { width:22px; text-align:center;} /* Select */
	.c03 { width:30px; text-align:center;} /* Line */
	.c04 { width:50px; text-align:center;} /* Store Part No. */
	.c05 { width:40px; text-align:center;} /* Qty */
	.c06 { width:170px;} /* Description */
	.c07 { width:30px;} /* UOM */
	.c08 { width:30px; text-align:center;} /* Ship */
	.c09 { width:30px; text-align:center;} /* Due */
	.c10 { width:40px; text-align:center;} /* Warehouse */
	.c11 { width:70px;} /* List Price */
	.c12 { width:70px;} /* Your Price */
	.c13 { width:70px;} /* Std Price */
	.c14 { width:70px;} /* Std Column*/
	.c15 { width:70px;} /* Custom Price */
	.c16 { width:70px;}	/* Custom Column */
	.c17 { width:70px;} /* Extended Price */
	.c18 { width:22px; text-align:center;}	/* Delete */
</style>

</head>

<body>
<div id="faketable">
	<div id="table">
		<div id="th">
			<div class="td1 c01">A</div>
			<div class="td1 c02">S</div>
			<div class="td1 c03">LINE</div>
			<div class="td1 c04">STORE<br>PART<br>NO.</div>
			<div class="td1 c05">QTY</div>
			<div class="td1 c06">MFG/DESCRIPTION</div>
			<div class="td1 c07">UOM</div>
			<div class="td1 c08">SHIP</div>	
			<div class="td1 c09">DUE</div>
			<div class="td1 c10">WARE<br>HOUSE</div>
			<div class="td1 c11">LIST<br>PRICE</div>
			<div class="td1 c12">YOUR<br>PRICE</div>
			<div class="td1 c13">STD<br>PRICE</div>
			<div class="td1 c14">STD<br>COLUMN</div>
			<div class="td1 c15">CUSTOM<br>PRICE</div>
			<div class="td1 c16">CUSTOM<br>COLUMN</div>						
			<div class="td1 c17">EXTENDED<br>PRICE</div>
			<div class="td1 c18">&nbsp;</div>
			<div style="clear: both;"></div>
		</div>
		<div id="tr">
			<p class="td c01"><img src="alerts_alert.gif"></p>
			<p class="td c02"><input name="select"  type="checkbox"></p>
			<p class="td c03">11.</p>
			<p class="td c04">123456</p>
			<p class="td c05"><input name="quantities" maxlength="5" size="4" value="1" onblur="changeQuantity(this)" class="rx_border" type="text"></p>
			<p class="td c06">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In pulvinar malesuada dolor. Maecenas turpis diam, rhoncus a, gravida sit amet, semper ut, massa. Cras vel odio. Donec elementum lectus et.</p>
			<p class="td c07">1<br>EACH</p>
			<p class="td c08">100</p>
			<p class="td c09">12/30</p>
			<p class="td c10">HUN</p>
			<p class="td c11">$1.00</p>
			<p class="td c12">$2.00</p>						
			<p class="td c13">Alark</p>
			<p class="td c14">Column1</p>
			<p class="td c15">$4.00</p>
			<p class="td c16">Coulmn2</p>
			<p class="td c17">$5.00</p>
			<p class="td c18"><img src="worksheet_files/trash_up.gif"></p>
			<p style="clear: both;"></p>
		</div>
	</div>
</div>
</body>
</html>

Yes I know its not compliant, but at this point I could care less.
A:F6

**WebJoel** · #2 03-08-2007, 12:31 PM

Nobody is more 'let's do this non-TABLEs' than I. -Having said that, using a TABLE here is semantically correct, perfectly legitimate and what they were desgined for. -Tablular data.
You are aligning data under a same-type grouping-title (a.k.a. "<TR>") and this is exactly what a text-reader for the visually-disabled needs in order to read the contents of this.
-Why do you wish to go non-tabluar for this may I ask?

slmcdee · #3 03-08-2007, 12:47 PM

The reason why I wanted do it is, basically, I wanted to be able to control any particular item add to the cart at will. I felt like it may be a little easier to do so, if I went Table-free. The aforementioned problem is my last hurdle, and its so stupid, I couldn't let that be the reason why it failed.

Nonetheless, Thanks for the Help.... Tables it is.

felgall · #4 03-08-2007, 01:57 PM

That's the worst case of DIVitis I have ever seen. You should use the appropriate semantic tags for your content first and only add DIVs where you want divisions within your page or where an appropriate semantic tag doesn't exist.

For what you are trying to do the appropriate starting point is:

<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>

slmcdee · #5 03-08-2007, 02:23 PM

Twas merely an experiment.

It not like its impossible to do in divs, it just that when you want to show seperation between the blocks. and those blocks happen to be of different heights... you get something really ugly. Unless you hard code the height, which is a "no no".

http://www.bernzilla.com/item.php?id=134 &
http://www.bernzilla.com/design/tables/table.html

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)