• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

How to make this table with divs??

I tried to learn how to use divs to make tables,

I made this example: http://www.grupossc.com/examples/table.html

I would like to know how to do the same with divs

this is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>THIS IS AN EXAMPLE</title>
</head>
<body>
  <table border="0" cellpadding="0" cellspacing="0" width="1010">
	  <tr>
		  <td colspan="3" background="http://www.grupossc.com/imagenes/linea_superior1.jpg" width="1010">
		    <img src="http://www.grupossc.com/imagenes/ctrans.gif" style="display:block;" border="0" height="1" width="1">
		  </td>
	  </tr>
	  <tr>
		  <td background="http://www.grupossc.com/imagenes/cgris7.jpg" width="1">
		    <img src="http://www.grupossc.com/imagenes/ctrans.gif" style="display:block;" border="0" height="1" width="1">
		  </td>
		  <td width="1005">
		    line No. 1. <br>
		    line No. 2. <br>
		    line No. 3. <br>
		  </td>
		  <td background="http://www.grupossc.com/imagenes/tres_4.jpg" width="4">
		    <img src="http://www.grupossc.com/imagenes/ctrans.gif" style="display:block;" border="0" height="1" width="1">
		  </td>
	  </tr>
	  <tr>
		  <td colspan="3" width="1010">
		    <img src="http://www.grupossc.com/imagenes/linea_abajo.jpg" style="display:block;" border="0" height="3" width="1010">
		  </td>
	  </tr>
  </table>
</body>
</html>

Open in new window

0
altariamx2003
Asked:
altariamx2003
  • 2
  • 2
  • 2
2 Solutions
 
Tom BeckCommented:
Like this:
<div style="width:1015px;display:table">  
  <div style="width:1010px;height:1px;background:#fff url(http://www.grupossc.com/imagenes/linea_superior1.jpg) top left repeat"></div>
  <div style="width:1010px;height:100%;display:table">
  	<div style="width:1px;height:100%;float:left;background:#fff url(http://www.grupossc.com/imagenes/cgris7.jpg) top left repeat">
    	<img src="http://www.grupossc.com/imagenes/ctrans.gif" style="display:block;border:0;height:1px;width:1px" alt="" />
    </div>
    <div style="width:1005px;float:left">
    		line No. 1. <br>
		    line No. 2. <br>
		    line No. 3. <br>
    </div>
    <div style="width:4px;height:100%;float:left;background:#fff url(http://www.grupossc.com/imagenes/tres_4.jpg) top left repeat">
    	<img src="http://www.grupossc.com/imagenes/ctrans.gif" style="display:block;border:0;height:1px;width:1px" alt="" />
    </div>    
  </div>
  <div style="width:1010px;height:3px">
    	<img src="http://www.grupossc.com/imagenes/linea_abajo.jpg" style="display:block;border:0;height:3px;width:1010px" alt="" />
  </div>
</div>

Open in new window

0
 
altariamx2003Author Commented:
thx tommy

but if you add for example: line No. 4 <br> to this section
    
<div style="width:1005px;height:58px;float:left">
    		line No. 1. <br>
		    line No. 2. <br>
		    line No. 3. <br>
    </div>

Open in new window


it change the display of the table
0
 
Tom BeckCommented:
Re-paste the code from my post and try again. I edited it to allow for variable height in the middle row.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Scott Fell, EE MVEDeveloperCommented:
First, if you need a table, the best thing is to use a table to show tabular content.  Otherwise, to use div's as columns you just create a class to float left and ad some padding to the right.  Make a row class to a width you want.  Then each column width should total the row.  If you have 3 columns 90px wide and 10px padding = 100px.  This will fit a 300px wide row.

working sample http://jsbin.com/ebonad/1/edit
css
.row{width:300px;}
.col{float:left;padding-right:10px;width:90px;}

Open in new window

html
 <div class="row">
    
    <div class="col">col 1</div>
    <div class="col">col 2</div>
    <div class="col">col 3</div>
    
  </div>
   <div class="row">
    
    <div class="col">col 1</div>
    <div class="col">col 2</div>
    <div class="col">col 3</div>
    
  </div>
   <div class="row">
    
    <div class="col">col 1</div>
    <div class="col">col 2</div>
    <div class="col">col 3</div>
    
  </div>

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
Instead of doing this on your own, I would suggest using one of the many grid frameworks.  The easiest is blueprint  http://www.blueprintcss.org.  At the core is what I just showed you but they have everything figured out, why reinvent.  

For more complex grids  
http://960.gs
http://foundation.zurb.com
http://twitter.github.io/bootstrap/

There are more.. but this is a start.  The last 2 make it easy to create responsive sites.   If you are new to this, making a real responsive page takes some knowledge and learning curve and initial frustration.    Start with the blueprint if you are learning.
0
 
altariamx2003Author Commented:
thx!!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now