Jump to content

Table Model In Div's


Hemlock
 Share

Recommended Posts

Hello there folks,Currently I am trying to create a simple table design so I can put collums next to one another in the simplest way, but I am not sure how to approach this matter.What it would look like simplified is as the followingtable.jpgI know how to do them in tables, but I am not sure what CSScode to write for it in order to have it look like that.Currently my CSS and HTML looks like this

.table {	position: relative;	top: 0px;	left: 0px;	width: 1000px;}.row1 {	position: relative;	top; 0px;	left: 0px;	width: 250px;}.row2 {	position: relative;	top; 0px;	left: 250px;	width: 250px;}.row3 {	position: relative;	top; 0px;	left: 500px;	width: 250px;}

<div class="table">table of content <br />		<div class="row1">		 Header <br />		 Filling1 <br />		 Filling2<br />			<div class="row2">				 Header <br />		 Filling1 <br />		 Filling2<br />		   <div class="row3">		 Header <br />		 Filling1 <br />		 Filling2<br />		   </div>		   </div>		  </div>	</div>

Regards

Link to comment
Share on other sites

If the data to be stored is tabular, use a table. If not, you'll need to float some of the elements. This should do it, and you can adjust things as you need to make gaps or whatever. But again, if this is tabular data, use a table, just make sure you use all available descriptive and semantic elements, and move or hide them as you see fit. They should all be there.

<html><head><style type="text/css">.table {	position: relative;	top: 0px;	left: 0px;	width: auto;}.row1 {background: red;	position: relative;	top; 0px;	left: 0px;	width: 100px;float:left;}.row2 {background: blue;	position: relative;	top; 0px;	width: 100px;float:left;}.row3 {float:left;background: green;	position: relative;	top; 0px;	left: 0px;	width: 100px;}</style></head><body><div class="table">table of content <br /></div>		<div class="row1">		 Header <br />		 Filling1 <br />		 Filling2<br /></div>			<div class="row2">				 Header <br />		 Filling1 <br />		 Filling2<br /></div>		   <div class="row3">		 Header <br />		 Filling1 <br />		 Filling2<br />		   </div>  </body></html>

Link to comment
Share on other sites

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
 Share

×
×
  • Create New...