Solved

How to make this table with divs??

Posted on 2013-06-16
6
358 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Using HTML5 and CSS How to place one element in front of another elemen 7 34
GET error with Font Awesome 3 19
send email part1 9 28
CSS Style Effect 2 12
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

830 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