Jump to content

Tabular data without using tables


Recommended Posts

Hi 

 

I'm trying to use the below code to get my product specifications into two tabular columns but when I past the code into the HTML field on the product description page and hit save some of the code are removed.

Are there any other way of doing this without using tables? 

<html>					
<head>					
<style type="text/css">					
.content{					
        width:600px;					
        border:solid 1px #000;					
        float:left;					
}					
.left{					
        float:left;					
        width:48%;					
}					
.right{					
        float:right;					
        width:48%;					
}					
</style>					
</head>					
<body>					
<div class="content">					
<div class="left">	Manufacturer:	</div>	<div class="right">	Samsung	</div>
<div class="left">	Product Description Name:	</div>	<div class="right">	Description Text goes Here	</div>
<div class="left">	Product Description Name:	</div>	<div class="right">	Description Text goes Here	</div>
<div class="left">	Product Description Name:	</div>	<div class="right">	Description Text goes Here	</div>
<div class="left">	Product Description Name:	</div>	<div class="right">	Description Text goes Here	</div>
</div>					
					
</body>					
</html>					

Link to comment
Share on other sites

<div class="content">					
<div class="left">	Manufacturer:	</div>	<div class="right">	Samsung	</div>
<div class="left">	Product Description Name:	</div>	<div class="right">	Description Text goes Here	</div>
<div class="left">	Product Description Name:	</div>	<div class="right">	Description Text goes Here	</div>
<div class="left">	Product Description Name:	</div>	<div class="right">	Description Text goes Here	</div>
<div class="left">	Product Description Name:	</div>	<div class="right">	Description Text goes Here	</div>
</div>	

You should paste only this in the description, and put the styling in some css file.

Link to comment
Share on other sites

When I add the below code to the global.css file I can see the top two rows of the columns but the rest of the data is overlapped by the "OTHER PRODUCTS IN THE SAME CATEGORY:" Heading. How can I fix this :angry:

 .content{
        width:600px;
        border:solid 1px #000;
        float:left;
}
.left{
        float:left;
        width:48%;
}
.right{
        float:right;
        width:48%;
}

post-1255897-0-45213600-1498054030_thumb.png

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...