Solved

How to make this table with divs??

Posted on 2013-06-16
6
362 Views
Last Modified: 2013-06-17
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
Comment
Question by:altariamx2003
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39252018
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
 

Author Comment

by:altariamx2003
ID: 39252040
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39252041
Re-paste the code from my post and try again. I edited it to allow for variable height in the middle row.
0
Industry Leaders: 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!

 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39252108
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
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39252110
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
 

Author Closing Comment

by:altariamx2003
ID: 39254754
thx!!
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add a little space on either side of a table. 12 31
Set a parameter in a properties file and use in html table. 14 54
Anchor Bookmark 6 32
css messed up 8 25
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question