Solved

How to make this table with divs??

Posted on 2013-06-16
6
354 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
  • 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
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
LVL 52

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 52

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

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Width of Page is Affecting Side Menu 6 26
HTML &#0153 2 19
Change div area and length 1 28
div to fit another div 8 23
This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

809 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