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

altariamx2003Asked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
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
 
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
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
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
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
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
 
altariamx2003Author Commented:
thx!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.